New Yext Navigation

Redesigning the primary nav after 5+ years.

Summary

Yext needed a new navigation system as the current one was outdated and running out of UI space as new features were added. I was the lead designer on the project working with a PM.

My Role

Designer, Researcher

Timeline

~3 months including research and several versions

Tools

Figma, User Interviews, Pendo

Details

Not only had Yext used a visually outdated navigation bar for quite a few years, but it could no longer support the number of pages the company wanted to create. We had run into a situation where smaller monitors would actually cut off pages that users might need to navigate to!

I was asked to spearhead a redesign of the navigation system--something that would have massive ramifications for the company and the design team.

The project eventually led us to make some significant changes, including:

- Changing our primary colors
- Redesigning our page structure
- Moving to a left-side navigation

Over the course of 3 months, I designed a new version, tested it with users, and then modified it into a final version.

The Previous Nav

A top bar with a lot of issues.
For the entire time I had been at Yext, we'd had a relatively outdated top bar navigation. Worst of all, for a long time you needed multiple clicks to get to certain pages. In fact, the first thing I did for this project was a "quick fix" ability to hover over each of the main products to navigate directly to a subpage.

Worse still was the fact that we were running out of room as we added new top-level and second-level products. Something clearly needed to change, and there were many opportunities for more general improvement as well.

First Draft

"Make it like Slack"
When I initially set out to redesign the navigation, we had a new product leader at Yext. He loved the way Slack's navigation allowed you to customize which channels or pages were available to you. He also felt that Yext had grouped it's products too much, and that the sub-pages could stand on their own.

My initial work followed this paradigm, but had a LOT of clear flaws. Everything was tiny, there was too much going on visually, and it just felt overly complicated.

Prototyping and Research

What do our customers really want?
Due to the important nature of the project, we were presented with an unusual opportunity at Yext to prototype the entire change. Our UX engineering team built up our initial prototype, and we were able to feature flag it and turn it on for a series of internal and external interviews.

Internally, we had fairly positive responses due to how poor the previous nav had been. This one looked cool and fixed a lot of problems, so Yext employees liked it.

Externally, however, our roughly 20 customer interviews and walkthroughs were met with two clear take-aways:

- "I only go to 2 pages, so this doesn't really effect me"
- "This feels really complex"

We essentially re-learned the fact that 90% of Yext's customers are not power users. While everyone internally considered each of our products important, externally most customers used one or two, and most users only used one.

Our nav had missed the mark because we had designed it for ourselves, not our customers.

Revised Version

Making everything bigger and simpler
The final version used larger text and icons, and prohibited users from opening more than one product area at a time so as to minimize visual clutter. 
‍
We also removed our "Second Level" panel that we had been using, in favor of entire pages that would help you understand why you might want to click on each link. This helped us minimize the need to "click and find out", and instead teach our users about our products more directly.