Polaris The Shopify Design System

The Shopify Design System 🎨

Building tools that entrepreneurs use to power their businesses day in and out is what Shopify is expected to deliver. So, when it comes to the creation of these tools, their usability is optimised.

In other words, implementing a Shopify design that is easy to use is a key business requirement for the platform to ensure that the adoption and engagement of products are maximised.

However, for the platform to be able to make its applications as consistent as possible while features continue to scale, the Polaris software is Shopify’s saviour.

So, in today's article, we will take a look at what led Shopify to Polaris, the rationale behind design systems and how the software solves the problem of consistency for the platform.

Identifying The Problem 🔎

The primary goal at Shopify is to make it easier for merchants on the platform to create a seamless experience for their customers and just like most startups and app developers, the Polaris software begins with a baseline set of features which are drawn then up amidst prototyping.

Once those features have been given the green light, there’s no stopping what comes next. The core guiding principle followed by Shopify's design is to keep the barriers to adoption as low as possible, for without customers adopting the app, everything else would become a moot point.

However, we know that Shopify is constantly pushing its boundaries too; iterate faster, address customer feedback and roll features out more rapidly so that the platform’s users benefit from its changes and updates as quickly as possible.

Attempting to address all opportunities within the rapid development cycles inevitably leads to healthy friction between the pace of feature delivery and the need to enforce a consistent experience.

However, with some small teams, consistency can be pushed to the side in the interest of driving near-term customer value, but the Polaris Shopify design system aims to put merchants in a stronger position so that this compromise isn’t a necessary cause of action.

So, while there might be some instant gratification when running fast and delivering near-term value, the lack of consistency in the experience may very well end up costing way more in the long run.

If you want our advice, we’d say stay clear of this approach, as this will not only make integrating features increasingly harder and more expensive over time, but the lack of consistency could also lead to a degraded user experience and dissatisfaction among customers.

We believe that as the adoption of the Polaris software grew, it became clear to Shopify that the platform would need to rethink its approach for this new design system to be truly scalable and solving this problem is where design languages came into action:

Consistently Designing

If you didn’t already know, good design principles mandate that Shopify’s platform makes the most common of tasks easily accessible whilst providing a consistent experience to users throughout all touch-points. However, the reality is that building a consistent experience across the board is hard to achieve, especially given the way teams tend to work.

See, teams of designers typically work in parallel, creating experiences based around a project’s requirements and Shopify understands that it isn’t always a straightforward process to come out with interfaces that feel consistent.

Designs are always created to cater for specific needs. For instance, maybe a page needs a playful feel due to content heaviness, or maybe the ‘Save’ action of an important setting needs a two-phase commit process?

The examples above may be pretty niche, but even in these unique cases, the key message here is that designs should always stay consistent which means that an existing foundation of colours and styles should be used, but creating variations of components should be executed with caution.

The hope for Shopify and Polaris is that as more users discover the application’s functionalities, it should be easier to understand; how things work, when to expect feedback, where to discover options and most importantly, how to consume presented information.

A Good Design Language 📜

As Massimo Vignelli once said, "Styles come and go. Good design is a language, not a style" and we respect that. See, design languages are like lego block sets. Each block is dictated by its inherent design attributes as to how and when it can be used.

So, when talking about the concept as a finished build, a good design language should provide the following three characteristics:

A set of reusable UI elements, such as; buttons and form controls.

Guidelines and support in regards to providing feedback on; users’ actions, page loads and other time-consuming processes.

A style guide that includes guidelines on; typography, use of colour, animation, best practices for the use of the reusable components and content notes.

Design languages should enforce the block layout and colour palette that one is allowed to play with. Given this, creating new experiences is just a matter of repeating those building blocks in a manner that is required by functionality.

The Right System

Brad Frost offers an interesting perspective on design systems within his book - Atomic Design, which brings an analogy between design systems and atoms to light.

As you'll already know, atoms are the building blocks of all matter and complex organisms are just groups of two or more atoms held together by chemical bonds and when it comes to the Shopify design system, its components function similarly.

Given this analogy, the question - can one single design language become the source of building blocks for all interfaces on the web? naturally arises.

If the answer to this question is yes, this solution could be utilised to solve a consistency problem across the board. However, the reality of this is pretty unlikely, as most interfaces are built with design languages that look similar to each other, but they’re not quite the same.

This may be a good thing within one system, but unfortunately, this approach would not work well across the web, where each business would work with a different audience that has unique priorities and preferences.

Therefore, it is fundamental that systems remain appropriate to the design’s goals. Of course, there are many popular design languages and systems out there that have a broad appeal, but these are what we call ‘relaxed versions’ of a full-blown design language.

So, ensuring that the user experience is consistent isn’t a goal as such with these systems, because the focus is instead centred around ease of development.

When it comes to a true design language, there will always be a typical mission statement, which consists of a group of ideals and principles that the language relies upon to make design decisions.

These ideals and principles will derive largely from the primary audience that the language was intended for.

Shopify Polaris 🚀

The goal for Shopify is to make commerce better for everyone so, the platform’s objective is to stay true to this mission with the Shopify Polaris design system.

“We create tools that give even the most inexperienced entrepreneur the best chance to succeed. At the same time, we design products that help some of the world’s leading businesses manage enormous complexity.” - Shopify

With the Polaris software, the platform has done a great job of including the components of a strong design system which can only be described as containing; reusable UI, guidelines for feedback and a style guide, without being too rigid.

Wondering how to access the Shopify design system? Polaris can be accessed in the two following ways:

The first method utilises an npm library that contains all of the React components for the elements described within the language. This method is as good as having APIs (React props) for each of the UI elements to provide callbacks for; form controls, labels, button types and more.

The second method relies upon a Sass/ CSS file which contains classes for all components used within each element. This offers an implementation-agnostic version of Polaris which can be used alongside any form of Javascript framework, or by itself.

Polaris Software In Shopify’s Designs

Since Shopify turned to the Polaris software, the platform has found itself in the favourable position of being able to solve some common UI challenges where inconsistencies are concerned. For instance:

N0.1: Two-Phase Commit Process

Sometimes, merchants will need to build the functionality for users to confirm their actions in the app and Polaris suggests triggering a change of state in the Page header, enabling an explicit save button.

N0.2: Custom Buttons & Non-Primary CTAs

Users will inevitably run into situations where it is difficult to categorise buttons as primary, but Polaris offers a very clear protocol for the kind of buttons that one should use and how they should use them.

Additionally, with the detailed guidelines in the React Button Component API, it can become very easy for users to decide which buttons to use in different conditions. For example, the Outlined buttons are great for secondary actions such as upselling.

N0.3: Feedback Indication

This is an area where inconsistencies commonly crop up. Some would even go as far as to say that it is a widely neglected area that can cause a lot of frustration to the user without anything being wrong with the software.

So, to help reduce user anxiety, the Polaris software offers several ways to show loading states for various types of processes and all three options indicate the status of the action to users.

Designing for Scale 📈

The three uses above only scratch the surface in regards to how the Polaris software can be of assistance, but more specifically, its content guidelines are a great resource for; writing calls to action in the correct tone, whilst incorporating consistent labels and descriptions.

It’s always a challenge to take a step back and re-evaluate an approach to design because the immediate benefits aren’t always obvious at first glance. However, there will always be new and compelling build features that gauge more attention than others but as your app platform matures, the varied and sophisticated set of capabilities will require a robust design foundation.

Once the basic building blocks are in place, the velocity of a new feature development will accelerate significantly. If you want our opinion, we’d say that there isn’t one right way to approach this, but we will say that the more clarity you have in your vision, the easier it will be to evaluate your options.

Based on Shopify’s experience of using the Polaris software as a design system, from the outside looking in, we’d say that it would seem as though the solution has provided a design language that has enabled the platform to build a clear set of rules that we all can follow, which will continue way into the future as new features are created.

We here at Karmoon believe that the Polaris Shopify design system is a major contributor to the experience that users across the net have to know and love. We’re only too happy to praise the solution for its polished and consistent characteristics.

Have you found today’s guide on the Shopify design system useful? Reach out and let us know what you think of the Polaris software. If you’re actively looking to work with a Shopify agency designer or developer to assist you with your business, we’d love to hear from you. Get in touch to get started!