Design best practices for Shopify apps
Designing an app that integrates seamlessly into a merchant’s online store makes the user experience (UX) more familiar and appealing, and the user interface (UI) more intuitive.
The design principles you incorporate into your app not only represent your user’s brand, but their values as well. The more user-friendly and accessible your app is, the more likely you will have happier customers and higher retention rates.
When designing your app, review the following best practices.
Build UI components with Polaris
Polaris is Shopify’s open-source design system used internally and by third-party developers to design and build apps that seamlessly integrate into a merchant’s store. Polaris helps speed up the design process and adheres to web accessibility standards, while creating an app experience that is familiar to users.
Polaris components are a collection of interface elements that can be used across your app. They include the following:
Define your information architecture (IA)
Your information architecture (IA) is the way you organize, structure, and label all your content, with the goal of helping your users find the information they need and to complete tasks efficiently.
An effective IA accomplishes the following:
- Simplifies complexity: Information should be structured and managed in the simplest way possible.
- Supports scalability: Good IA practices will help you avoid overhauling previous work whenever the product grows or changes.
- Creates familiarity: Regardless of how merchants access Shopify, it should feel like the same product.
Keeping your app organized and straightforward prevents user confusion, especially if your app is more complex. For more information on IA best practices, review the Polaris foundations for information architecture.
Write consistent interface content
Thoughtful, consistent interface content is a core element of a well-designed UX.
Use plain language to communicate concepts as efficiently as possible. As a benchmark, Shopify considers plain language to be a United States grade 7 reading level. Grade reading levels can be checked using apps like Hemingway or Readable.
To learn more about content standards for apps, refer to the Polaris foundations for product content.
Design for cross-platform experiences
Teams often design for the web and adapt to mobile. When this happens, mobile ends up being an adaptation of the web instead of higher quality, personalized experiences. When designing your app, always approach web and mobile native at the same time.
Consider the following factors:
- How the information flows between web, mobile, and apps
- What merchants do on each platform
- If the experience remains consistent and feel crafted
- Any embedded technologies that can be leveraged, like password managers, notifications, or haptic feedback
To learn more, refer to the Polaris guidelines for mobile.
Building an interface that works no matter where in the world your users are located not only increases your global market reach, it also creates a better overall UX.
Consider the following factors:
- Cultural differences: From your icons to your images to your content, localizing your app means not only translating to the local language, but also adapting to regional differences and being mindful of potentially confusing or offensive content.
- Text expansion: Translating your app text can expand it and take up more space, so your interface needs built-in flexibility to accommodate language-specific formatting, as it can vary greatly between languages.
- Changes in word order: It’s safe to assume the word order of every sentence in your UI will change when translated, so it’s best to avoid using UI components to build sentences and only use concatenated strings mindfully, or not at all.
To learn more about building interfaces that work everywhere, refer to the Polaris foundations for internationalization.
Make a good first impression
Well-designed onboarding flows increase engagement with your app. They’re efficient and they gradually introduce merchants to tasks that have a clearly defined goal and benefit.
When designing an onboarding flow in your app, consider the following best practices:
- Deliver on the promises of your motivational prompts and value propositions.
- Follow through on what the empty state says the product or feature will do.
- Get out of the way as soon as possible.
To learn more, refer to the Polaris guidelines for designing onboarding flows.
- Review the Polaris guidelines on designing apps for Shopify.