BP 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.
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.
Discovery
Validate the problem, end users, and project goals
Stakeholder Interviews
I met with all stakeholders to help set clear expectations as well as provide 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.
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 than 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
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.
Information Architecture
Wireframes
Design
Commit to internally validated ideas, test with users
Desktop
Mobile
Rapid Prototyping
We used InVision as our primary platform for prototyping. With a hot-spot prototype, we were able to conduct 'hallway' tests and direct user testing to quickly validate and iterate on designs.
Validation
Validate, learn, and 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