c300.png

Teachable - Navigation IA

 
 
 

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? 

 
 
 
4.1 copy 3.png
 
 
 

Background

Teachable is an edtech startup that enables anyone to create their own online courses. We have people that teach everything from feng shui to javascript, with 18+ million students learning on our platform.

Role

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.

 
 
 

 
 

Discover

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.

Our old nav

Our old nav

 
 
 
 
 

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)

 
 
 
 

 
 

Research

 

Tree testing

Getting a baseline understanding of how our current nav was performing.

tree test gif.gif
 

Card sorting

Done in order to get a better idea of the mental models with which people approach and think about their schools.

IMG_5049.jpg
 

Looker Queries

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.

In the first 90 days, 5.7% of schools with 2+ sales had the drip courses feature turned on

In the first 90 days, 5.7% of schools with 2+ sales had the drip courses feature turned on

 
 

 

Synthesis

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). 

 
 
 
 

 
 
 

Ideation

Expanded navigation ideations

Expanded navigation ideations

Mobile version of wireframe (nav is 288px wide)

Mobile version of wireframe (nav is 288px wide)

Nav Light and Dark ideations

Nav Light and Dark ideations

 
 
 

High fidelity states

 
 
 
 
 
 

 
 

Results

 
 

This project is currently under development.   

___

NAVIGATION iaCertificatesdesign systemsCustom RolesDiscussion