ryan evan davis
san francisco
product designer
Project 01

MP Navigation

Pushing teams toward a north star

Entering 2018, Mixpanel wanted to move toward a more cohesive brand message. Things weren’t in disarray—we had a solid brand, voice, visuals and product. But years of disparate design, the relative recent addition of a marketing department (and its natural growing pains) led to our content and brand team unclear what the way forward would be for housing and pushing out new content. Into that void, a PM and I convinced the org to reevaluate how it saw its own product, and how it could be marketed. The original task was straightforward: make the site navigation more scalable for new content. I was the most tenured designer on a young team, which led to me leaning heavily on my institutional knowledge and conducting additional research to understand what exactly our content portfolio looked like. It became clear that a mere reskin wasn’t going to cut it. We had to delve deeper and understand how the navigation affects our ability to tell our story.

Step 1

Identifying the problem

The old site navigation left content hidden, and difficult to discover. We had received feedback that users found our experience to be frustrating and counter-intuitive. In the short term we wanted to solve for the original task at hand. We explored scalability, aesthetic, mapping what we had, and thinking through the goals our users currently had.

Step 2

A ripple becoming a wave

We brought in a cross functional team from product to marketing and partnerships. What started as a series of meetings to get small scale buy in, became a discussion about who, what, why, and where. Which then lead to mapping a new direction. All the while tests for the current designs were generating information in the background.

Step 3

First pillar mock (current)

Working with product marketing we re-evaluated the UX + strategy for how we talk about Mixpanel. I conducted research, validated the results and made the first new features page mockup to test what we collectively are calling the first pillar of Mixpanel, which would serve as the backbone of the new navigational structure.

Starting with solving current problems

I wanted to start, literally at the top and work my way down, as I planned several tests for several iterations. My working theory was that by dividing the page and placing the actionable items on the right, the layout would be more intuitive for user understanding, resulting in higher engagement across the board. I used the elements on the left to tell the story of our user’s journey. From building a mental model of what Mixpanel is, to understanding how it can help your use case. I also explored many badging and FAB systems.

Continuing by moving down one level at a time

The old navigation reflected the way our internal teams built rather than the way users actually experienced the product. Our categories were sometimes too broad, and sometimes too narrow, so right-sizing those, relative to the content we had was a challenge as well. The site itself had several stylistic updates, so I needed to craft something that felt like it lived in the same world. I employed a bisecting design to distinguish between umbrella content versus focused.

The key meetings that started the wave

We presented our research to the cross-functional team, emphasizing that there was a great deal of content that didn’t really fit under our existing categories, and that distinctive marketing strategies over time had left the overall feel of the site navigation more disjointed than we’d like. The sheer breadth of the content on the site presented our biggest challenge; even if we shoehorned orphaned content into the the navigation we were using, we’d run into the same scalability problem we’d been called in to resolve in the not too-distant future.

The temporary solution to plead our case of a bigger picture seem to do just the trick! After that meeting, we set up more meetings with leaders across the org to talk them through what we needed to do and how they could help. This lead to brainstorming sessions with product marketing, content, partnerships, and design which built off of our research and early site mapping to come up with "pillar pages".

The pillar pages were built around positioning Mixpanel’s marketing team had been taking. They latched on to my idea of telling a story through the navigation, specifically, they liked how the features could provide a mental model of what you can do with Mixpanel. This was how the "5 key pillar system" came to be. It is a system that lumps the key features into groups that support the aforementioned positioning. To tackle the problem of scalability, we nested template or 'SEO' style pages within a parent Pillar page. That allowed us the flexibility to fit more content comfortably, as well as allow users to dive deep on the subjects they’re interested in without being shepherded to pages they don’t care about.

Features pillar > SEO templates

Diving a little deeper into what is actually going on between these two pages we have this chart. As an example, the first pillar consists of the six core reports found in Mixpanel; this is simply known as the 'Core reports'. These pages are curated, yet very flexible. The 'SEO' pages on the other hand are templated and text heavy. A child SEO page will inherit the illustrative content and copy as its hero from the content section of a pillar page. These pages are meant to be discovered through exploring the website, ad leads, or google searches (hence the name). On these pages we are testing the idea of using a different style sticky nav to focus users and limit random page movement. We also hypothesize that consistently naming a pillar up in the nav will help ground users.