Crafting the Shopify admin

Take some time to explore the problem space. Consider research, technical limitations, merchant workflows, stress cases, existing patterns, and content. Don’t start by focusing on the details of the user interface (UI).

Talk to merchants. Solve the right problems by seeing the world through their eyes.

If you have researchers on your team, use their expertise. They’ll help you understand the whole problem and uncover biases and assumptions. If not, try some quantitative and qualitative research methods, like surveys and interviews.

Hone in on the real-world tasks merchants need to complete. At the same time, think inclusively (beyond the “average” merchant) and identify potential stress cases that could apply to the task.

Conduct an audit of the current Shopify admin and of similar products. Look for patterns, inconsistencies, and opportunities for improvement.

Create ordered lists and groupings of the content merchants need to see for each task in the flow.

See if plain language terms can be used in place of industry jargon.

Sketch your ideas in low fidelity, using real content.

Welcome merchants with as wide a range of job titles, backgrounds, locations, languages, and abilities as possible.

Design Shopify for everyone, not just the store owner. Most people who use Shopify aren’t business owners, but employees of a business.

Support multiple languages and cultural norms. Learn more about internationalization

Design for touch, keyboard, and mouse input to include people with a range of vision, motor, and cognitive abilities. Learn more about accessibility

Use plain language and write for a grade 7 reading level.

Information and functionality should be the same across devices and operating systems. Adapt the UI to Android, iOS, and the Web so merchants can think about what they want to achieve, not how the interface works.

Avoid launching features on one platform but not others.

Design the UI for different platforms according to the platform specifications.

All content should be available on every platform, but not every screen needs to have the same content.

Consider all devices, including all screen sizes and common operating systems. It can be helpful to start with the platform that has the most constraints.

Remember that embedded Shopify apps are supported on iOS and Android, and they render in web views.

The Shopify admin should teach everyone—first time users and experts—how to become better at their work.

Focus on the critical, actionable content for each screen by understanding the specific tasks merchants need to complete. Draw merchants’ attention to the information they need to make smart choices about their business.

The best error message is no error message. When crafting interactions:

Always use an explicit save action in forms to avoid accidental changes. Explicit saving is where merchants have to save their own changes. Many settings in the admin affect merchants’ storefronts, money, or operations, so don’t auto-save changes, even ones with low risk. Merchants should expect a consistent editing experience.

Always warn about destructive actions. Use a confirmation modal to make sure actions that delete data are intentional.

Provide smart defaults.

Deactivate unavailable controls. If an action or option becomes unavailable during interaction, deactivate it rather than handling an error when it’s clicked.

Accept input in a variety of formats.

Provide concise in-context help to avoid validation errors and to explain difficult concepts. This is commonly done using the help text on Polaris’ form components, but this pattern applies broadly and can have other implementations.

Tell merchants what’s happening as soon as they interact with the UI.

Acknowledge interactions immediately. Follow the guidelines for interaction states when crafting new interactive components.

Confirm successful actions using the toast component.

Use loading components like spinners and skeleton content when requested content can’t be shown right away.

Validate input interactively, such as validating text fields as merchants type.

Use banners for important and temporary feedback, like errors and warnings.

Polaris was inspired by the admin, and the admin should align with Polaris. At the same time, Polaris is a guide, not the destination. It should evolve and be challenged.

When you face a user interface design problem:

1. Review the guides, components, and patterns that are related to your problem.
2. If they don’t solve your problem, try designing something fresh. Use the design and content guidelines to keep it feeling like Polaris.
3. Compare solutions. Pick the solution that’s best for merchants and build it in your app.
4. If you’re still unsure, reach out on GitHub.
5. If your chosen solution fills a clear gap in the system and could be reusable, propose to add it to Polaris.