Rethinking navigation

The Polaris design system was growing. Fast. It needed an IA that could keep up.

As the Polaris design system matured, Shopify needed to add new content and tools on the design system website. 

The site used a horizontal top navigation, and we were running out of room to place new top level categories. We had also heard anecdotally that the current categories were somewhat limiting.

Before messing with the navigation to suit the needs of a growing design system, I wanted to talk to users to find out what they thought of the current layout.

So, I conducted user research sessions to determine expected behavior and learn what users were actually looking for. The methods for this included individual sessions, as well as group sessions with entire teams. I realized the data might be skewed if individuals were self-selecting, so I also reached out to a few managers who directed teams. This way, I would get to hear from all disciplines—design, content, and development.

During these sessions, I asked users to:

  • Walk me through a common workflow of theirs that involved Polaris.

  • Find specific resources on the Polaris site (components, documentation, etc.).

I learned that: 

  • Developers overwhelmingly found the current nav efficient. Putting building blocks like icons, tokens, and components in the top nav was great for them. 

  • Visual designers and content designers struggled to find what they needed, like pattern guidance or content guidelines.

  • The Foundations category was too ambiguous—it contained too much content, with no context. Folks couldn’t find what they needed, or they didn’t bother clicking it at all.

  • 55% of users defaulted to search first. And that number was split 50/50 between Google searches and site searches.

There was obviously a need to improve search since a large percentage of users reached for that lever first, but technical restraints blocked us from tackling that at the time. 

I wanted to see if there were changes in the short term that could improve site navigation and discoverability of content.

My goals were:

  • Help anyone find anything, quickly (i.e., support multiple user journeys).

  • Build a nav that could support our growing body of content. 

My restraints were:

  • We had only 2 weeks to roll this out.

  • The only folks working on this were me and one dev.

  • Improving search was out of the question (for now).

My first step was to see if anyone had already solved this problem for design systems. I studied several top design system sites, but there was no consensus. Some sought to be educational platforms, where as others acted more as reference sites. This resulted in very different information architectures. I couldn’t find any one solution that I thought was perfect.

My next step was to look at our own product—the Shopify admin, built for our merchants.

Our merchants were interesting, because they could be any type of user, with varying familiarity with Shopify. Many merchants are small business owners, doing every job at the company–fulfillment, marketing, customer support, etc. Other larger merchants had teams working on the platform, so you might have specific users dedicated to specific tasks. 

The sidebar navigation allowed these multiple user journeys to be possible. It also exposed the full content hierarchy of the admin. Users could click into one category, but quickly navigate to others without much effort.

I designed and proposed a side navigation, similar to the Shopify admin. This solution allowed us to:

  • Make all content scannable at the top level, as well as highlight new tools and resources.

  • Offer relevant content for each user journey, simultaneously.

  • Use spacing to group content in intuitive ways that avoided abstract category titles and clarified hierarchy.

  • Align with the IA of Shopify.dev, our partner site that we were considering merging with. This gave us a chance to test how our content fit within that context. 

We knew this solution worked for our team’s goal of expanding the available content on the site, but I wanted to validate the effectiveness of this with end users. We surveyed the company after we shipped the new nav, and 94% of respondents reported increased happiness with the Polaris site.

Another great benefit of this IA is that it exposed the content hierarchy of the site. This made existing content obvious, and it opened up conversations about what should continue to change in the future.