Navigation IA redesign
2019 / PRODUCT DESIGNER / WEB
We know that course creators need to go through certain steps in order to build a successful school. How do we clearly surface those steps in our product?
I’m working with a team of 4 (a product manager and 2 devs), over the course of two months (ongoing) as the primary product designer. Along the way, a product marketer, head of design, engineering lead and product solutions specialist were heavily involved.
What's the problem?
As the Teachable platform grows and adds features, one of the challenges we’ve faced is being able to surface the correct feature to a user at the right time. Adding new features to our product has involved us grouping it in categories we think make sense, but we’ve never taken a holistic overview of the course creation process and used that to inform our feature placement.
Upon starting to talk about a migration of our front-end from Angular to React, we saw an opportunity to rebuild our site navigation to perform better. But if we’re going to rebuild this nav, perhaps it makes sense to rethink our navigation IA and design, untouched for several years, as a solution to our feature discoverability issues.
To solve the primary problem of discoverability, I worked with our head of design, engineering lead and lead frontend dev to scope version 1 of the nav changes to the following:
Tackling IA—primarily nesting and nomenclature
Minor color/CSS-related changes
Updating icons to new versions using Fontawesome
Ensuring solutions are component-based and scalable
Mobile design considerations
Creating detailed site map and IA solution
How do we measure the impact of this feature?
Improving conversion rates for features that have a high utilization rate
Finding utilization rates for certain actions within a school and then measuring its impact on conversions
Improving that conversion rate via our new nav
If knowledge base searches per week for specific features and flows consistently
If time to activation for sitewide edits or product creation decreases
If (via tree testing) discoverability of certain actions improves (defined by ability to find action the first time, as well as time to accomplish action)
Getting a baseline understanding of how our current nav was performing.
Done in order to get a better idea of the mental models with which people approach and think about their schools.
Worked with our in-house data team to find utilization rates for features, as well as seeing which items on our nav people interact with the most/least.
From the research, we saw the following themes:
Via card sorting, we see that people conceptually break down navigation items to: school features, design, course material and settings.
Users that had zero familiarity with Teachable had a 33% success rate of finding primary actions (across a sample size of 10 users)
Actions essential to setting up a school were among the most searched in our knowledge base: how to set up a domain, adding course material and setting up billing/profile
Looking at comparable products, we realized that other platforms had navigation hierarchies that reflected a specific user journey (ie -> customizing your site -> adding your product -> selling that product). We weren’t doing that (at least with intention).
Below are the high fidelity states, including the second-layer nav on the far right.