Universal Navigation

Role

Getting direction from my ux team lead and a product manager, I took the lead on the information architecture and visual design for this project.

Setup

When the Zillow and Trulia teams came together there was a lot of excitement, as well as a lot of questions. How are we different? Where do we overlap? Who owns what features? Where does our agent business fit in? Will our customers understand how to find their stuff?

In response to these questions, the Premier Agent brand was created to house the Zillow and Trulia agent business. This would be the place for agents to respond to their leads, manage their contacts, adjust their advertising spend, and many other features. Our ultimate goal was to create a comprehensive CRM experience for agents to nurture a customer from an initial lead to a final transaction, and even potential repeat business down the line.

The Problem

When Premier Agent was established, we began the product with a few key features hosted on our own domain, with other core features remaining on zillow.com. Moving and (in some cases) redesigning these features would take considerable time and resources. However, the navigation between these areas on the site was disjointed and appeared broken.

Premier Agent Navigation premieragent.com

Premier Agent Navigation premieragent.com

Premier Agent Navigation zillow.com

Premier Agent Navigation zillow.com

Problem Cont’d

Spot the differences? Many users found the experience of navigating between key features jarring and confusing, because their main navigation items shifted around, and in some cases, were even called different things.

Design Sprint

Knowing the navigation was a problem, our ux team organized a weeklong design sprint with some of our product and engineering partners. During this sprint, my engineering partner and I decided to explore a side navigation that would transition easily between mobile and desktop. We also took a look at how we were grouping links, based on the card sort research we were presented with.

Screens from the sidenav wireframe prototype

Screens from the sidenav wireframe prototype

Though the side nav option performed well in testing, we ultimately decided to go with a top nav because it would be easiest to implement across the two platforms.

Initial Approach

Together with product, I started an audit of all our existing agent pages, along with any subnavigation on those pages, the product owners of each page, whether the page would persist on zillow.com, come to premieragent.com, or be retired.

I created a pretty big spreadsheet.

Once I got the pages organized, I consulted some existing research that had been done on our current navigation, as well learnings from the navigation-focused design sprint. Based on that information, I was able to put together a site map that I hoped would unite the navigation for both domains.

Proposed navigation map

Proposed navigation map

Approach Cont’d

Once the navigation hierarchy was agreed upon, I put these items into a visual wireframe prototype, so product and other stakeholders could get an idea of how a new navigation might look on top of both Premier Agent and Zillow page content. Based on that exploration and feedback I made a few small tweaks and was ready to move into a visual layer.

Visual design options

Visual design options

Final Proposal

Over a few rounds of presentation and feedback, I came up with a final proposal for a universal navigation. Unfortunately, it will not be possible to implement until sometime in 2018, but I believe the research is solid and supports the new information architecture.