Shopify Polaris for Admin
Role:
Illustration • Icons • Visual design • Art direction • Project management • Peer mentorship
Team:
Alisha Giroux • Holly Schofield • Erin Moncrieff • Jesse Bennett-Chamberlain • Alistair Lane • Canopy Design
Tools:
Adobe Suite • Figma • Github • Slack
Shopify got big. Real big. Real fast. It wasn’t just for small business owners to start an online store anymore. It was an ecosystem of interconnected products and marketplaces powering over 1 million of some of the world’s biggest businesses, offline and online.
The design language of the Admin misrepresented what Shopify had become and didn’t support merchants to be successful as much as it could.
Key research insights told us to:
Keep it clean and focused. The backend is where merchants spend a lot of their time managing their business. The visual tone of the space should be organized and easy to look at for hours on end.
Minimize decision fatigue. The Admin was dense with things demanding merchants’ attention. Shopify should only surface what they need to know, when they need to know it, and in a way that can be easily understood.
Make it a space they can call their own. Like the back office of a retail space, the admin is a space that belongs to the merchant. Shopify’s branding shouldn’t take precedent here.
Explore
The illustration style was developed in conjunction with efforts from other others to develop a new design language for all of Shopify. The two informed each other through the process, until we landed on the skeleton of a style that we could begin building with and refine over time as new ideas and constraints emerged. A V1 style guide was built to help us define the major elements that would tie everything together.
Understand
We collaborated with a small team of developers to build a custom tool that captured the visual assets in all of Shopify’s Github repos, and listed them out for manual review. From there, we populated a massive list of them all in Figma, with details of location in the product, size, and other important context. This was the hub from which we discussed options, made decisions and documented our progress as a team.
Design
We were continuously refining and testing our concepts through the process, with the goal of doing a first pass redesign on all the illustrations as a priority. Once this first pass was complete, my focus shifted onto assessing quality and consistency across the entire body of work, in the different contexts they’d be applied, making adjustments and final refinements to the overall style as needed.
Icons
Our icon system also needed a design refresh, with very little time and resources to spare. We quickly formed a small team of designers to work through the entire library and define and test a new style. After a first pass was complete, I shifted into a focus on quality and consistency, worked through all 400+ icons to ensure everything was pixel-perfect and aligned to the new style, and collaborated with developers to ship the changes into Shopify’s Polaris Icon Library.
Scaling icons
Since Shopify’s icons are built and managed by everyone, the process of creation and contribution needs to be carefully documented. I built internal educational materials to define the subtle nuances of the icon style and instruct designers on how to make them, then collaborated with content design to build external-facing documentation included in the Polaris design system.
Scaling illustrations
Leading up to the launch, I also built new internal educational content for the illustration system, and external-facing documentation as part of Polaris to help explain why the changes were being made, and how internal designers could continue evolving and contributing to the system. We ensured all finalized assets were organized and labelled and accessible in Figma libraries for use by product teams company-wide.
Final Results
Shopify’s revised design language for Admin and Mobile experiences was launched in the Fall of 2020.
We shipped around 200 new illustrations, an entirely revised icon library, and supportive documentation to empower designers across Shopify to continue contributing to the systems in a more self-supported way.
