bp-nav-hero.png

BiggerPockets' Navigation

When you’re designing a website, application, or other product, you always start with the global idea and structure before addressing more detailed issues.

01.

Context

Frame the project and original state

 
 
 

The Product

BiggerPockets is a social network for the real estate investing community. They offer free content, tools, and a community of nearly a million members to help people avoid mistakes: learn valuable tips; find partners, deals, and financing; and make the best investing decisions possible.

 

The team

James Dixon - Senior Product Designer

Vignesh Swaminathan - VP of Product

Allie Hopper - Project Manager

Kshitiz Gurung - Senior Software Engineer

Hilary Catton - Director of Customer Success

 
 
 
 
 

Historical Context

The previous navigation system was mainly based on the content medium type. Then grouped across four main areas: Community, Education, Marketplace, and Tools.

 
 
 
 

 
 

02.

Discovery

Validate the problem, end users, and project goals

 
 
 
 

Stakeholder Interviews

I met with all stakeholders to help set clear expectations as well as provided effective guidance to ensure the project remains focused. During these sessions, we are able to determine the business goals and technical contrasts. Additionally, there was a consensus that this would need continual testing, analysis, and iterating upon release.

Takeaways:

  • Business goals - Improve web traffic, SEO, bounce rate, and exit rate.  Increase the potential revenue by converting users to customers.
  • Technical constraints - The only technical issue is actually a personal issue. We currently do not have a front-end engineer.
 
 
 
 
 

Current IA Structure

We started our exploration by conducting research on the current state of the site-wide navigation. I broke-down the current hierarchy and compiled it in a mind-map. It was clear that the overall structure was overwhelming.

 
old-nav-breakdown.png
 
 
 
 

User Research

Working with our Director of Customer Success, we conducted user interviews with a variety of people including long-time members, recent signups, and complete strangers to the site. We additionally did card sorting exercises with these users.

 

Key insight:

  • Unclear main navigation model - users found it unclear how each of the top-level options were distinguished from one another.
  • Over reliance on search - users often abandoned exploring the main navigation and turned to leveraging search.
  • Topic over medium - users cared more about simply accomplishing their goal then the medium type it was delivered in.

 

Takeaway:

  • User needs - Increase user engagement through greater discoverability and accessibility of site-wide content.
 
 
 
 
 

Analytics

According to our analytics reports, users weren't finding meaningful value in the current navigation. The issues solidified the more data we gathered.

 

Key insights:

  • ~71% overall site bounce rate
  • ~54% of all organic traffic exited, only to return during the same search session
  • Lucky Orange data and recording confirmed user frustration and confusion surrounding our navigation
 
 
 

 
 

03.

Ideation

Organize discovery, explore options, and develop wireframes

 
 
 
 

ConTent Audit/Tagging

Shortly before this project went underway, we started an initiative to properly structure our content tagging system. There was no data structure in place that could be leveraged across all content types: forums, podcasts, webinars, blog, members blog, guides, and videos.

 

Once we implemented the new tagging system, we were able to have a guiding line for our audit. This audit and tagging structure led to the new IA site structure.

 
 
category-nav-hierarchy.png
 
 
 
 
 

Information Architecture

 
 
 
 
 

Wireframes

 
 
 

 
 

04.

Design

Commit to internally validated ideas, test with users

 
 
 
 

HIgh Fidelity Mocks

Desktop

 
 
 

Mobile Web

 
 
 
 
 

Rapid Prototyping

We used InVision as our primary platform for prototyping. With a hot-spot prototype, we were able conduct 'hallway' tests and direct user testing to quickly validate and iterate on designs.

 
 
 

 
 

05.

Validation

Validate, learn, plan for the next iteration

 
 
 
 

Recap

The navigation redesign was aimed at solving the problems of what currently exists in the platform. We accomplished our goals by creating a new navigation that included the following:

  • A topic based content structure

  • A design that worked within our current technical constraints

  • Improve discoverability and accessibility

  • Improve overall site IA structure

  • A decreased cognitive load on our users

 
 
 
 
 

Further Considerations

The features presented were prioritized given the timeline. With additional time and budget, the following features are worth considering:

  • Notifications / User menu - significant work needs to be done in regards to the structure of the current notification system and user menu
  • Mobile apps - duplicate the same structure on our mobile applications
  • Analysis & Iterations - continued analysis of the initial release are needed to inform our next iterations