Portfolio | Global navigation on Zapier.com

Project

In early 2020, we identified a need to update the global navigation on Zapier.com. New foundational pages didn't fit in with the existing navigation structure, and existing menu items didn't align with industry standards or what visitors would expect them to contain.

For example, three of the top-level menu items—Apps, Explore, Tips & Advice—had the same cluttered sub-navigation structure and confusing child items. Visitors could navigate from Explore to a Tips & Advice sub-section, and also from Tips & Advice to an Explore sub-section, and links to apps appeared in all three top-level menu items, not just Apps.

We embarked on a project to redesign our global navigation from the ground up in terms of structure, visual design, and interaction. As a content designer, I was responsible for establishing the information architecture of Zapier's new global navigation.

Strategy

I. Competitive analysis

I started with a competitive analysis of the global navigation on similar SaaS sites, looking for areas we needed to improve to achieve parity. This was a helpful exercise to identify where our global navigation had obvious information gaps.

For example, we didn't give users a simple way to learn what Zapier was, why they should use Zapier, and what Zapier's features were.

Instead of grouping our resources under one distinct parent category, our resources were spread across a number of different top-level menu items, and were missing some important resources altogether.

I used the findings of the competitive analysis to come up with 15 child category items: How Zapier works, Product tour, Customer stories, Security, Popular ways to use Zapier, Apps that work with Zapier, Explore Zapier by job role, Blog, Experts, Developer platform, Help center, Community, Zapier for Teams, Zapier for Companies, and Pricing.

II. Card sorting

Next, I conducted an open card sort with the 15 child category items. 40 participants were asked to sort the items into groups that made sense to them, then give each group a name that best represented the items it contained. They were then asked if any expected content was missing, as well as explain how they decided on the groupings and names.

Some of the key findings from the card sort were:

1. Users naturally grouped most product and feature-related items together, and most resource pages together.

There was a strong agreement between items like "How Zapier works" and "Product tour", and between items like "Blog" and "Help center".

2. "Pricing" had little agreement with any other pages.

This was a clear signal to keep "Pricing" as its own standalone category.

3. A third of participants mentioned that their groupings were influenced by other websites.

This was also clearly reflected in participants' group names, which frequently matched or were similar to menu items seen in the competitive analysis.

Based the card sort results, I created a navigation structure that grouped the 15 child category items into 5 parent categories.

III. Tree testing

I used the new navigation structure to design a tree test with a series of eight tasks. Tasks were written to avoid using keywords that appear in the parent and child category labels.

Where would you find case studies on how this software helps existing users?
You want to see how this software can work for your entire department.
Where would you go to find out if this software is safe and trustworthy?
You want to engage a consultant or specialist to help you set everything up.
Where would you look for ideas and inspiration on how to use this software?
You're a real estate agent. You want to find out how you can best use this software in your everyday work life.
You want to read the latest articles published by the company that makes this software.
Where would you go to find out what this software does and how to use it?

55 participants completed the tree test, and were then asked to rate the ease of use of the navigation menu to complete the activity, and if there were any category labels that they found confusing. The results of the tree test helped to validate certain parent-child relationships which were not clear in the card sort, as well as identify a few categories that could benefit from clearer labels.

For example, some users in the card sort placed the "Customer stories" child item in a feature-centric group, while other users placed the item in a resource-centric group. In the "Customer stories" tree test task, 56% of participants visited Why Zapier? first, compared to 29% who visited Resources first. This made a strong case for placing the "Customer stories" child item in the Why Zapier? parent category.

Based on these results, I made changes to the navigation structure and ran a second tree test with the same eight tasks and 58 participants. This tree test had the following overall results:

The 8 tasks completed by participants had an average success rate of 86%.
91% of participants rated the navigation menu as "Very easy" or "Slightly easy" to use to complete the activity.
The success rate increased and time on task decreased for each task where the labels or category relationship was changed from the first tree test.

Outcome

The new global navigation was launched site-wide on Zapier.com in July 2020, along with an updated visual and interaction design that adhered to the Zapier design system guidelines.

We tracked and compared the performance of the new global navigation to the old global navigation over the course of one month, which yielded the following findings:

The percentage of users who clicked a link in the global navigation menu increased by more than 3x.
Key pages that were not in the old global navigation had large boosts in discoverability with up to 150% increase in traffic.