In the past 5 years, Redfin had created more content to serve home buyers and sellers. However, there was no consideration or framework for how any of that content should surface at the Header navigation level. The result was a few menus that acted as junk drawers for marketing pages.
I saw this as a growing problem and started a plan to fix the information architecture and navigation of the site and apps. I brought along with me our director of design and my Lead PM for feedback. My Role: UX, User Research, Visual Design
Why is navigation so important? Its the second most used feature product-wide. The first? Performance. Performance is the difference between a 10% bounce rate and a 70% bounce rate. What about navigation? It tells the visitor who you are, what you offer, and how to find those offerings—all within a split second. Getting it right can have a huge impact on the sanity of the user and make it easier for them to accomplish their goal. For better or worse, because it lives on every page it influences the rest of the product as well.
What are the problems?
Content - There is no criteria for inclusion, anything and everything could be added to the site header. Often there is duplicate content.
Hierarchy - Of the items that are included, there is a lack of prioritization for user needs and business goals. Pages with little to no business value steal clicks from other, more valuable pages.
Visuals - All of the visual choices from type to color to layout have resulted in a jarring and untrustworthy looking design that dominates every single page on the site. Buttons have to be bright orange in order to stand out against the sea of red.
Entering the 21st century.
The old header looked like a remnant of the late 90s. Odd fonts, two levels of links stacked, and that red. Ouch.
Enter a cleaner, more personalized, organized navigation. Marketing content on the left, engaged features on the right. Search is grouped with the side pane.
The worst offender
The color of the header was by far the most prominent thing across the product. In order for any content to stand out it had to be bigger and bolder, resulting is a messy and embarrassing product. I could have done any color, honestly, but white blends in nicely with the rest of the pages, letting their content shine. When we turned on the white header engagement with every page increased over 500%.
Content Organization Across Platforms
I outlined the pages on each platform to get a sense of the "shape" of the content. Too much on a top level will make it hard to choose between options, but if there are too many levels it will be harder for a user to discover the lower level content.
As a quick guide all 3 of these graphs should roughly look the same.
Website
iOS - 3 Tab navigation
Android - Hamburger Menu
Resolving platform differences
Between the app and the site we chose an user behavior framework based on usage patterns. App users are highly engaged whereas the site can have a healthy mix of first-timers and engaged users. Customers that are the most engaged use both platforms. Engagement features that require an account would be the main focus of the app and the site would have those features plus all of the marketing and SEO content.
Incremental A/B Tests and Usertesting
White Header
One Line Header
Swap Links
Because the high volume of traffic, it takes less than a week to get to statistical significance. We quickly learned how well our designs did and continued iterating.
One line Header experiment - engagement (% of clicks) was higher on every single link. The results weren't mind blowing however, it was only an increase of 5–7% percent.
Splitting out "Buy" from "Sell" increased Buy Page views by 338.34% (16186 to 70986) and Inquiry form submissions by 284.74% (166 to 639). Sell page views didn't change too much. This tells us that most of our users are probably home buyers rather than sellers. "Agents" and logo clicks stayed the same while searchbox submissions were down by a tenth of a percent.
Mobile Web
During mobile web testing, I discovered some interesting patterns - It doesn't really matter what the top left button is, users know its going to either the homepage, or a menu for the home page. 90% of users tapped the logo to go back to the home page anyway, so I reduced the number of items to Home Buying, Selling, and the app upsell. This also allowed me to ditch the 3 line hamburger icon in favor of a simpler dropdown arrow.
Apps
Long after the white header and One Line Header shipped, the mobile app still was red and orange branded. Stakeholders were concerned users wouldn't have as strong a connection with Redfin if the app wasn't red. I drew a version of the app with the white header, and found an opportunity to bundle the change in with another feature improvement. The result was a lighter design, a more clear primary action on the map, and users seemed to like it.
Going beyond: Try not shipping the org chart
The pages on the site seem to be grouped by engineering teams: Buy & Sell is the brand team, Tools is the marketing team and My Redfin is the product team. What if the site was grouped more like an actual users journey through the home buying process?
We are currently wireframing out a few different ideas around this for the app and will run tests later in Q1 2018. Those learnings will be brought back to the web.
