How we think about UX quality
A new team is addressing design debt in Shopify’s admin
By Sadie Redden and Jordan Ouellette
Everyone is responsible for quality at Shopify. But sometimes you need space for specific focus on quality. That’s precisely what a new team at Shopify is doing.
Our team is focused on looking horizontally across Shopify admin, which is the place merchants manage the core aspects of their business. We’re addressing quality issues from adjusting visual design details to fundamentally restructuring pages or components. Our team includes us (a senior staff product designer and senior content designer, plus a staff developer, Marc Thomas).
We say that in an ideal organization our team wouldn’t need to exist. But we also know that we’re not working with ideals and may never be (and that’s not really the problem). We’re shipping a lot of improvements to admin. We’ll mention a couple of those later in the post, and will be reflecting on improvements as they ship as part of a series of posts across our blog and social media.
This blog post aims to put these incremental improvements into context of our wider aim to improve overall quality. We’ll also outline a mental model for quality we’ve been sharing across the Shopify UX department to help other teams approach quality in a similar way. We hope it helps you, too.
Navigating design debt
To understand our work, it’s important to understand the context of Shopify admin. Shopify’s admin is like a big house that’s been built, renovated, decorated, cleaned, and maintained by many hands over the years since around 2006. Everything was built for a reason, everything had its purpose, but some things had to be built quickly and some things were built on a foundation that was never intended to support the kind of structures we ended up building on top of it.
And a lot has changed over the years. We keep growing and the market keeps shifting, and clutter keeps piling up. That all impacts a quality user experience.
Our team is taking an honest account of the state of our house and we’ve made a commitment to tidy up. Change isn’t easy. Shopify got really big really fast, and instead of focusing on the details, we were rightfully heads down on building quickly. But that was then. There’s a growing desire among us to shift our attention and change our behavior.
Product as a pyramid
To explain how we’re reshaping, reorganizing, and reframing different parts of Shopify admin, we’re going to share our mental model for working: a high-quality product is a pyramid of key layers. If any one of those layers is missing, you have a gap in that product, which creates a lower-quality experience. And, of course, there’s a gradient between these layers. So what are those layers?
The layer at the bottom is fundamental UX. This is things like user flows, information architecture, content, data modeling, and distilling the problem down to the essential units so we know we’re solving the right problem.
The middle layer is visual design. This can be misunderstood as aesthetics but this is very much UX craftsmanship. Visual design means presenting the fundamental layer in a crafted and meaningful way where visual design techniques are leveraged. For example, hierarchy space in the arrangement of
Visual design means presenting the fundamental layer in a crafted and meaningful way where visual design techniques are leveraged.
elements. A lot of the time, our design system Polaris provides us with a lot of this ‘out of the box’ through elements and components, and even layouts. It’s still important to ensure this is the best and most usable experience for our merchants. We need to take what comes out to the box and then craft and shape those elements and components into a meaningful experience.
The final piece of the pyramid is polish. We like to think of polish like going to a restaurant and tasting a chef’s dish. You may be able to say it doesn’t quite taste right, but unable to pinpoint which ingredients, seasoning, or flavor balance is off. Pinpointing those things that feel off takes a lot of work. But, once you get there, and dial in all those details, it’s amazing how it transforms the experience.
When it comes to the polished layer, it’s important that we sweat such details. It could be an extra 10 pixels on the front end but details are relational and provide meaning and hierarchy. Our approach for ensuring these final details are 100% is running a local version of the PR that the front end developer is working on, and looking for issues using Inspect in the browser and comparing notes against our mock ups.
Using this pyramid approach has helped us explain to stakeholders why the work is important, but also helped us understand where the quality issue that we’re trying to address lives. We also use the pyramid as a lens for identifying projects and opportunities. This helps us prioritize and triage: a project where the problem starts at the fundamental layer and goes all the way up the pyramid is going to take us a lot longer than addressing some polish debt. We generally don’t want to have more than one large project on the go at once. But for projects that need middle and top-layer pyramid improvements, we can tackle a few of these in tandem.
Shipping visual changes
One of our recent middle-layer projects was a card in shipping settings where merchants set shipping rates for their products that they ship. This is an example of how we’ve taken what is fundamentally the exact same thing, and presented it in a different way to create a clear model of the user interface for the merchant to interact with, and therefore created a more usable experience. This was not an aesthetics project, but rather a usability one; it’s using visual design techniques to solve the problem in a more meaningful way.
We also shipped an improvement last week to the pricings and plans page to improve overall hierarchy, visual rhythm, and cognitive load of the page. This is now the new baseline experience for merchants. Our growth team shipped this change first as an experiment to better understand the impact of this change, and it resulted in an increase in conversion. While we shouldn’t lean on experiments to replace our expertise and judgment, this experiment proved the importance and impact of sweating the details of visual design in our interfaces as nothing here fundamentally changed other than the visual presentation of information.
Excellence, not perfection
Making these changes is tantalizing detailed work. But we’re still focusing on shipping the details rather than simply sweating over them. Instead of perfection, we want to focus on excellence, which means putting your best foot forward, making decisions with integrity, staying curious, and connecting with your intuition.
We can learn to not feel anxious about imperfection. Striving for perfection is paralyzing. It’s okay to ship things that aren’t perfect at first. Shipping something is a part of a journey, just a step before the next iteration. To tap into how excellence shows up in our work (or doesn’t), we need to see our work clearly.
We can’t always be jumping from one shiny feature release to the next. Part of acknowledging that a feature is never really done is making sure our schedule
Part of the change we hope to see is more and more teams at Shopify spending 10% of their time addressing quality issues as part of a cyclical process of doing and reflecting, and reshaping.
and incentives allow us the time we need to maintain what we’ve built. We need time to iterate and push on the details to keep something excellent. Part of the change we hope to see is more and more teams at Shopify spending 10% of their time addressing quality issues as part of a cynical process of doing and reflecting, and reshaping.
Conclusion
UX design is a science and an art. There’s a lot of nuance and some things are subjective. Some of our quality improvements are, and will be, unquantifiable. Some of the things we change won’t individually move a number or take our product over the edge in terms of people using it. This is our long game of
Some of the things we change won’t individually move a number or take our product over the edge in terms of people using it. This is our long game of sweating and shipping the details to make an excellent experience.
sweating and shipping the details to make an excellent experience. The aggregate of these changes over a long period of time, will make for a truly great product that, in the end, will move substantial numbers. Ten percent investment in quality in product design will make our product 100% better.
It’s not scalable to have a small group take on all the quality improvements — one team alone can’t ensure high quality across the admin or across Shopify. And it would be too aspirational to expect a sudden cultural shift wherein every team is suddenly solving all of our quality problems. We’re in transition, and the solution is a balance.
The incremental improvements we’re shipping along with the very existence of the team is a demonstration that’s selling the rest of the company on what this cultural shift looks like and why it matters. We’re a living representation of Shopify’s commitment to quality.
