All Tutorials

UX and design rubric for Shopify themes

All Tutorials

UX and design rubric for Shopify themes

UX and design rubric for Shopify themes

Themes listed on the Shopify Theme Store adhere to various requirements, criteria, feature sets, and standards. Design and UX are key among the principle areas of focus for high-quality theme development.

In both building Shopify free themes, and assessing themes from our Theme Store Partners, a detailed rubric is used to review the design and UX components of the theme. This ensures that the theme is confidently addressing vital areas such as Art Direction, Consistency, Typography, Layout, and Customer UX, among others.

To assist in your custom theme development, we have outlined the rubric below. Use this rubric as a guide to better design and UX implementation on your custom theme builds.

Alignment to project brief

There is a visible solution outlined in the project brief.

Score Description
1 — Critical improvement needed
  • Not aligned with the brief.
  • The proposed solution is rarely visible in the theme.
  • The proposed solution no longer works as expected. We no longer believe in the solution.
2 — Some improvements needed
  • Somewhat aligned with the brief.
  • The proposed solution is visible in some places of the theme.
  • The proposed solution is weaker than anticipated. We are lacking confidence that the solution will help merchants be successful.
3 — Good to move forward
  • Aligned with the brief.
  • The proposed solution is visible throughout the theme.
  • The proposed solution is still viable. We still believe the solution will be successful in helping merchants.

Art direction

Choice of photography, images, icons, and overall originality.

Score Description
1 — Critical improvement needed
  • Poor or unclear art direction.
  • Many inconsistencies make the design decisions seem unintentional.
  • Problematic photography and/or poor quality images. The visual assets should be changed.
  • The icons are not consistent and/or do not match the overall design.
  • Poor or low resolution logo.
  • The color system is too complex, rigid, or difficult to customize without harming legibility or visual balance.
2 — Some improvements needed
  • The art direction can be improved.
  • Some inconsistencies in the overall design.
  • Some problematic images.
  • Some icons seem inconsistent compared to the others (stroke weight, size, level of details, etc.).
  • Some problematic details in the logo.
  • The color system has some weaknesses. Some components are not assigned the proper swatch. It is not easy to customize the colors and maintain a professional look and feel.
3 — Good to move forward
  • Clear art direction.
  • Original.
  • The design is intentional and well thought out. It follows a certain logic and a system.
  • Good choice of photography. Images are purposeful and raise the overall look and feel.
  • Well designed icon set.
  • Well designed logo.
  • The color system is robust and easy to customize without harming the aesthetic or legibility of isolated components. There is a good level of flexibility for merchants to customize their color palette without it being overly complex.

Layout

Flow of content, hierarchy, balance, contrast, white space, responsiveness, grid, and alignment.

Score Description
1 — Critical improvement needed
  • Many elements don’t add value.
  • There is no grid or the layout is disorganized.
  • There is a lack of spacing in many areas or too much spacing in many areas.
  • Many elements are not aligned.
  • Unrelated elements cannot be distinguished from one another.
  • Related elements are generally not tied together.
  • Primary and secondary information is mixed.
  • Design patterns are scaling with no obvious connections across small and large screens.
2 — Some improvements needed
  • Some elements don’t add value.
  • Some elements fall out of the grid.
  • There is a lack of spacing in some areas or too much spacing in some areas.
  • Some elements aren’t aligned.
  • Some unrelated elements are difficult to distinguish from each other.
  • Some related elements are not tied together.
  • Primary and secondary information is sometimes mixed.
  • Some design patterns are scaling with no obvious connections across small and large screens.
3 — Good to move forward
  • All elements add value.
  • Balanced and refined grid.
  • Spacing is well thought out.
  • Elements are all aligned.
  • All unrelated elements are easily distinguished from each other.
  • Related elements are easily tied to each other.
  • Primary and secondary information is clearly designed as such.
  • Opinionated and purposeful design decisions.
  • Design patterns are scaling in a way that makes sense across small and large screens.

Typography

Font pairings, font sizes, line spacing, hierarchy of text, number of fonts used, and the legibility of the text.

Score Description
1 — Critical improvement needed
  • Elements are often indistinguishable. Requires a lot of reading effort.
    • Headings, subheadings, links, body text, dates.
  • Too many words per line.
  • Too many font styles.
  • Many poor font pairings.
  • Many irregular line spacings.
  • Text is too small or too big.
2 — Some improvements needed
  • Elements are sometimes indistinguishable.
    • Headings, subheadings, links, body text, dates.
  • Readability presents some issues.
    • Some poor font pairing.
    • Some irregular line spacing.
  • Some fonts are not elegant.
    • Some fonts are not being used in the right way or for the right purpose.
3 — Good to move forward
  • Different elements are easy to distinguish.
    • Headings, subheadings, links, body text, dates.
  • Good overall readability.
    • Line spacing.
    • Font sizes.
    • Words per line.
    • Pleasing font set, and elegant font pairing.
  • Specific fonts are being used in the right way, and for the right purpose.

Consistency

Consistency in design patterns (between pages and on a single page).

Score Description
1 — Critical improvement needed
  • There is a lot of inconsistency in one or various elements such as:
    • Spacing
    • Icon style
    • Image quality
    • Typography
    • Color
2 — Some improvements needed
  • There is some inconsistency in one or various elements such as:
    • Spacing
    • Icon style
    • Image quality
    • Typography
    • Color
3 — Good to move forward
  • No obvious issues with consistency.

Accessibility

Hover states, color ratios and touch targets.

Score Description
1 — Critical improvement needed
  • Many obvious issues with color contrast.
  • Many uses of justified text.
  • Inputs are hard to identify.
  • Many touch targets don't have enough space surrounding the action.
2 — Some improvements needed
  • Some obvious issues with color contrast.
  • Some justified text evident.
  • Some inputs are hard to identify.
  • Some touch targets don't have enough space surrounding the action.
3 — Good to move forward
  • No obvious issues with color contrast.
  • No obvious touch target issues.
  • Inputs are easily identifiable.
  • No justified text.

Buyer UX

Purchase flow through the collection, product, and cart pages.

Score Description
1 — Critical improvement needed
  • Many concerns with the purchase flow.
  • Many elements require additional cognitive load to understand.
  • High risk of customer distraction when making a purchase.
2 — Some improvements needed
  • Some concerns with the purchase flow.
  • Some elements require additional cognitive load to understand.
  • Some risk of customer distraction when making a purchase.
3 — Good to move forward
  • No obvious issues with the purchase flow.
  • Product options are obvious and visible.
  • No friction for the customer when shopping for a product.
  • No obvious distractions when making a purchase.
  • No cognitive challenges in the design.

Merchant UX

Theme settings

Score Description
1 — Critical improvement needed
  • Overly complex theme settings.
  • The settings are either too rigid or too flexible.
  • High risk of the merchant becoming confused or frustrated.
2 — Some improvements needed
  • The theme settings are sometimes a bit too complex.
  • Some risk of the merchant becoming confused or frustrated.
3 — Good to move forward
  • Good balance between opinionated theme settings and flexibility.
  • Designed with a good merchant experience in mind.