Finding pixel perfection in technical product design
Why the Flagship Themes team at Shopify has cast off traditional discipline definitions
The Flagship Themes team aims to launch 20 new themes by the end of the year. In August 2021, the team launched Dawn, Shopify’s leading theme, packed with features that bring together everything Online Store 2.0 has to offer. Nine months later, the team has built on that foundation and embraced a new way of working that is accelerating our time to launch and most importantly, increasing the value our products deliver to merchants. With the recent release of Ride and Colorblock — the latest Flagship Themes in our catalog — it’s a good time to reflect.
Flagship Themes are often the first real touchpoint merchants have when realizing the potential of Shopify. Themes provide an art direction for expressing a brand and give structure to a merchant’s narrative surrounding their products. Themes are designed to be easily customized (through settings) and extensible (through app integration, metafields, etc). By leveraging themes, merchants are able to rapidly build out a storefront and launch their business with confidence that their buyers will have a fast, accessible, and intuitive buying experience. And of course, Flagship Themes are always free to merchants.
With all things commerce and technology, Flagship Themes have had to continuously evolve. The release of Shopify’s Online Store 2.0 meant all previous free themes in the catalog suddenly became ‘legacy’. Rather than rebuild these art directions, the team embraced the moment as an opportunity to rebuild the catalog around what we saw resonating with merchants and buyers in today’s commerce landscape. Our challenge was that we needed to work very quickly to deliver a diverse collection of themes that would address the wide range of merchant needs and desires.
Dawn is a powerful and beautiful theme, but it isn’t right for everyone. Our aim was to launch unique visual styles that inspired merchants to craft a distinct look and feel for their storefront. But across all our Flagship Themes, we chose to maintain consistent features to ensure that merchants could confidently choose an art direction without fear of missing out on critical commerce functionality.
In previous years, designing and building a theme was a six month effort at best. Today, we’re averaging 8–10 weeks. How are we moving and shipping fast? As the Flagship Theme team’s Senior UX Manager, I’m going to share how the secret is found in our team’s approach to web design and cross-discipline collaboration.
Designing for the web
Flagship Themes are built to be “web native”, meaning we take advantage of all the potential of CSS and HTML when realizing our designs, and we are highly conservative in our use of JavaScript. The result is a fast, accessible, and intuitive experience for buyers. But for designers, it demands a deep understanding and appreciation for the way the web is constructed, and how web browsers are evolving.
Over the last nine months, our team underwent a rigorous exercise examining the core patterns that make up commerce on the web and stripping away superfluous elements that may negatively impact performance. Working alongside developers, we embraced web native patterns for drop downs including sort and filter controls as well as language and location selectors.
When designing the media gallery, we built zoom functionality that could be easily controlled through keyboard commands to ensure maximum accessibility. When the design team wanted a dual scrolling experience on Product Pages, our developers leveraged CSS in order to achieve the effect without using any Javascript. The ideation and implementation process happened in parallel, forcing our developers to think like designers and pushing designers to think like developers.
The details we debated were often small but when brought together as a cohesive storefront solution, the impact is significant. Merchants can express their brands through great storytelling, imagery, and interactions without concerns that decorative elements of their website are reducing load times or excluding some buyers from being able to browse and complete a purchase.
The details we debated were often small but when brought together as a cohesive storefront solution, the impact is significant.
Harmonizing design and development
As designers, we see our work with themes as an exercise in embracing what technologies are out there and exploring their potential for great UX. At the same time, we feel a responsibility to push the boundaries of what the technology can currently do.
We view our development team as creative problem-solvers and it’s essential that they’re involved in the earliest stages of our work. I chatted to our team to get their views, too. Ludo Segura, Front End Developer on the Flagship Themes team, points out that it’s critical for developers to work with designers as early as possible in order to pre-empt the technical limitations they’re working within.
“We have specific principles we try to follow on the theme we’re building: very performant, use JavaScript as progressive enhancements, and ensure the experience without JavaScript is enjoyable.
“Given the nature of our projects, we try to leverage native functionalities from the browser as much as possible. This means we sometimes hit limitations due to browser support. Then we either need to re-adjust the designs or come up with coding workarounds, which is a fun challenge. We have to be attuned to the latest CSS, JavaScript, and HTML features support, and always be on the lookout for newer properties and browser updates to expand our possibilities and improve our approaches.”
Martina Marien, Senior Front End Developer on the Flagship Themes team, highly values this opportunity to collaborate with designers — even before the designs are labeled ‘ready to build’: “Throughout the design process, designers have the opportunity to share their work and progress in Slack updates and design reviews. This gives us, as developers, the opportunity to provide input on the feasibility of a design and things to consider (such as accessibility, performance and complexity), and prototype, all before the designs are ready to build.
“It’s also normal to question design and UX decisions while building,” Martina adds. “The devs on our team pair with designers all the time. It helps us validate assumptions and expectations we have about a design. On the other hand, it allows us to work through alternative implementations together on the fly.”
This fluid collaboration leads to joint ownership. Martina says: “The collaborative nature of our team doesn’t stop at the design process. Devs and designers alike own the implementation of a feature, meaning that they are both involved at every stage. Devs and designers on our team share the responsibility of ensuring that any feature has great UX and is also accessible and performant.”
Technical product design
To fulfill that responsibility, our designers delve into technical design. Melissa Perreault is a Staff Product Designer on our team, but she functions as a design technologist in her understanding of Liquid code and CSS. When she works with a developer to build her Figma file as a prototype, she can open up the code and see certain variables that’ve been applied, and actively tweak it to the way she wants it to be.
Through this close collaboration, Melissa works with developers daily via direct video calls and quick Slack huddles to work through technical limitations and advise on iterating in smaller pull requests (PRs) to keep work small and focused, and fast.
Melissa says, “Shopify devs share a passion for context sharing with UX. They believe in our ability to grow our technical knowledge and understand that we need to deeply understand the technical limitations and opportunities of a feature to make fully informed decisions, strengthen opinions, or craft rationales.
“Our developers value our questions, opinions, and suggestions. Having the ability to propose technical solutions not only broadens our ‘T-shape knowledge’, but also gives us confidence to speak the same language,” she adds.
More than that, our developers lean into UX, too. As Melissa says, “It’s a shared learning loop: devs also learn how UX thinks about a problem, what matters to us and the merchants/buyers’ experiences. They value our craft and are curious to keep learning as well.”
Reaching pixel perfection
Melissa’s collaboration and learning enables her to give very specific feedback to our developers; she’s not just saying ‘this thing should be 10 pixels to the left’. She’s likely already copy and pasted the code, played with her prototype preview, and recreated what she’s trying to achieve to go back to the devs.
Without her role, perhaps we’d be taking video recordings of things that look off or don’t seem to function correctly for our devs to figure out by finding the right PR and opening up the code. That’s just a lot slower.
The close relationship between UX and engineering makes for meaningful conversation to move us to pixel perfection so quickly. But it’s not all about being in the code.
Polished UX is technical work
Tyler Alsbury, Staff Frontend Developer on the Flagship Themes team, has a similar view of the design-developer harmonization.
He says, “I help UXers sort out the final details of what is and is not feasible to develop and help to establish what the scope of the initial deliverables will look like based on both the requirements of the feature and the challenges of implementation.”
Tyler sees technical work as being a fundamental part of “polishing the UX” where pixel perfection is only achieved in the intricate work between design and development: “When working directly on a feature, once a solid enough baseline implementation of a feature is built, we will often move towards a more iterative approach to polishing the UX. This is around when it goes into code review and we continue to iterate until it is ready to ship.”
“I like to think of a UXer as being partly a technical job just as I like to think of frontend development as being a UX job. I don’t think there’s that much of a line between the way we need to think about the product we’re building. While our day to day job might differ, the types of concerns we have are very much the same.
“Working with world-class UXers has given me an even stronger sense of this notion. I’ve been at Shopify for two years and have felt myself level up significantly in terms of the way I think about UX from many angles. Some of this has been on a more technical level, like networking, asset optimization, and other performance factors, but a lot of it has been more on the UX side, like accessibility, quality user interfaces, vertical rhythm, content hierarchy,” he adds.
“I don’t think a frontend developer, or any developer for that matter, is complete unless they have a good understanding of UX principles and this is something I’ve truly gained by working with the incredible UXers on my team.”
I don’t think any developer is complete unless they have a good understanding of UX principles.
Creative exploration brings innovation
Shopify is a unique and complex product. And I truly believe that the collaboration between designers and engineers, and the entrepreneurial ‘wearing all the hats’ spirit of Shopify combined with a true respect for UX, is what pushes our products forward. Beyond shipping fast, our team’s symbiotic relationship brings new opportunities to innovate through creative exploration. We see tremendous opportunities (and some challenges) within the changing landscape of the web including web3, container queries, and much more.
I’m passionate about making space for my team to shake off traditional role definitions and simply experiment with these new tools and technologies because our commitment to being “merchant obsessed” and endlessly curious is what fuels innovative and meaningful user experiences.
