When you’re designing a website, application, or other product, you always start with the global idea and structure before addressing more detailed issues.
Frame the project and original state
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.
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
The previous navigation system was mainly based on the content medium type. Then grouped across four main areas: Community, Education, Marketplace, and Tools.
Validate the problem, end users, and project goals
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.
- 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.
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.
- 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.
- User needs - Increase user engagement through greater discoverability and accessibility of site-wide content.
According to our analytics reports, users weren't finding meaningful value in the current navigation. The issues solidified the more data we gathered.
- ~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
Organize discovery, explore options, and develop wireframes
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.
Commit to internally validated ideas, test with users
HIgh Fidelity Mocks
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.
Validate, learn, plan for the next iteration
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
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