Unshipping Shopify's org chart
A Little Context
I’d started at Shopify in 2019 helping to launch the navigation for Plus Admin, a new area designed for our biggest customers, like Brooklinen and Allbirds. Plus Admin shipped in mid-2020 (a few months into the pandemic), and in early 2021 my team was working on adding a search feature.
But my boss at the time, Amy Thibodeau, gave me and my team a new challenge.
The Problem
Tobi Lütke, the CEO of Shopify, had been asking for years to make it faster for merchants to launch apps. As it stood, merchants had to click on an Apps page, wait for that page to load, then find the app they wanted to open and click the name of the app. Too much time, too many clicks—and fundamentally, apps not getting the prominence they deserved.
Amy assured me that we could and should take the time to do this right. But, uh, how quickly could we get it done?
The Approach
Unshipping the org chart
Sales Channels had a prominent section of the nav, while Apps were relegated to one page. Why? At some point in the past, the separate teams responsible for those areas shipped different solutions.
Confusingly, the former Apps page included apps with the same name as some sales channels, like Facebook and Google—but the apps were accessible only from this page, while the sales channels were listed in the navigation sidebar.
But merchants don’t care about who shipped what. So the first task in making it faster to launch apps was to unship the org chart—to treat apps and sales channels as equals.
We did that by disassembling the Apps page.
Merchants used that page to launch and manage apps, and discover new apps. So we needed to handle those jobs in different ways.
Apps and Sales Channels now have parallel discovery experiences, and both drive significantly more traffic to the Shopify App Store.
Managing apps? That could be moved to Settings.
Discovery was trickier. We worked closely with the Ecosystem and Marketplaces teams (responsible for Apps and Sales Channels, respectively) to create new discovery surfaces that mirrored each other, and gave merchants a taste of the Shopify App Store within their Admin. That took months of work to gain alignment, and it made for a more polished, intentional experience.
And launching, our primary problem to solve, was handled by adding a dedicated Apps section to the navigation bar, and leveraging the search UI to create “launchers.”
Leveraging search
My vision for Admin search was to help merchants not only find things, but complete tasks within the search context: not only a search, but also a command menu. And I wanted to expand the scope of Shopify’s Admin search, from a limited set of files within your store and an odd collection of things outside your store—like help docs—to encompass anything you needed access to within Shopify’s ecosystem.
Apps weren’t even findable in the Admin search UI at the time. This project presented a chance to make them not only findable, but to take the first steps toward a keyboard-optimized command menu where users could launch an app (or any other page or file) without lifting their fingers from the keyboard.
These App and Sales Channel launchers could be opened by keyboard shortcuts, or found in the search UI (using tags—part of a new filter system for search), but most users simply click on them in the navbar.
The App and Sales Channel launchers are keyboard-optimized. A user can type CMD-K or CTRL-K to open search, type the name of the app or sales channel they seek, and hit enter. Or mouse and click—we designed the experience to work well in either interaction mode.
Opening the search UI, rather than loading a page, cut the time to display the list of apps dramatically, and made for a simple, focused launching experience.
Giving merchants more control
The final piece of the solution was not only displaying apps in the navbar, but letting merchants pin apps to the navbar.
We had to talk Tobi into this—in general, Shopify avoids customization, and when we allow customization it’s at the store level (so all employees of a store see the same thing) rather than the user level.
But we made the case that pinning apps to the navbar let merchants focus on apps they care about, reducing the cognitive load of sorting through options, which in turn made launching faster. And it would be an odd, offputting experience if a user’s navbar changed because their boss changed the pinned apps. After some debate, Tobi agreed.
Launching an app or sales channel from the search UI-based launcher is fast, but accessing that same app or sales channel from the navigation sidebar is even faster.
Results
App Navigation shipped with our big biannual feature release, “Editions” (as in, the Summer 2022 Edition of Shopify).
Tobi even singled it out for praise on Twitter.
And did we actually make it faster for merchants to launch apps? We did.
Time to launch an app decreased 62%.
Lessons Learned
To create a great wayfinding system, we needed to unpack and solve many interrelated problems across the Admin and organization. Navigation is a synecdoche for the app—a part that represents the whole. It’s not just a list of links; it’s a representation of what an app or site is. That’s why Tobi is the editor-in-chief of Shopify’s navigation, and why such a significant change took months of alignment.
The debates over every pixel made the design better, and by the time we shipped, we’d stress-tested every aspect of the design and felt it was bulletproof. This is in keeping with how Shopify values antifragility: the belief that change, ambiguity, and adversity can make us stronger.
Nothing brings a team together, and gives it resilience, like a clear goal and shared purpose. I reinforced that we were constantly getting closer to our goal, and the team rolled with the feedback until we’d nailed the design and shipped the thing.