Redesigning content navigation: a unified sidebar that helps learners stay on track
I designed a universal sidebar that brings all content types into one consistent view. Learners can now check their progress without leaving the lesson, reducing distractions and improving focus.
My role on the project
As the only product designer on the team, I focused on creating a clear content hierarchy, supporting different content types, and validating the experience through rounds of user testing. I also ensured the design was inclusive, accessible and consistent across learning flows.
My role on the project
As the only product designer on the team, I focused on creating a clear content hierarchy, supporting different content types, and validating the experience through rounds of user testing. I also ensured the design was inclusive, accessible and consistent across learning flows.
My role on the project
As the only product designer on the team, I focused on creating a clear content hierarchy, supporting different content types, and validating the experience through rounds of user testing. I also ensured the design was inclusive, accessible and consistent across learning flows.
Platform migration as a catalyst for change.
Platform migration as a catalyst for change.
Platform migration as a catalyst for change.
At the end of 2023, QA Group reached a pivotal moment: we began migrating clients from Circus Street to the Cloud Academy platform. These clients were used to a simpler, highly intuitive UX—one they genuinely liked and trusted. The pressure to improve navigation and usability wasn’t just a nice-to-have—it was a business-critical need.
This shift gave us the opportunity to rethink our learning experience, starting with one of the biggest pain points: the sidebar(s). Before, different content types had different sidebars. Learners struggled to understand where they were and how to track their progress. Many were exiting their sessions just to check their status on course landing pages, disrupting their learning session.
At the end of 2023, QA Group reached a pivotal moment: we began migrating clients from Circus Street to the Cloud Academy platform. These clients were used to a simpler, highly intuitive UX—one they genuinely liked and trusted. The pressure to improve navigation and usability wasn’t just a nice-to-have—it was a business-critical need.
This shift gave us the opportunity to rethink our learning experience, starting with one of the biggest pain points: the sidebar(s). Before, different content types had different sidebars. Learners struggled to understand where they were and how to track their progress. Many were exiting their sessions just to check their status on course landing pages, disrupting their learning session.
At the end of 2023, QA Group reached a pivotal moment: we began migrating clients from Circus Street to the Cloud Academy platform. These clients were used to a simpler, highly intuitive UX—one they genuinely liked and trusted. The pressure to improve navigation and usability wasn’t just a nice-to-have—it was a business-critical need.
This shift gave us the opportunity to rethink our learning experience, starting with one of the biggest pain points: the sidebar(s). Before, different content types had different sidebars. Learners struggled to understand where they were and how to track their progress. Many were exiting their sessions just to check their status on course landing pages, disrupting their learning session.
The button to open the sidebar was often misinterpreted.
As a result, a significant number of users relied on the breadcrumb navigation to return to the Courses' landing page when seeking information about their progress, disrupting the learning experience.
The button to open the sidebar was often misinterpreted.
As a result, a significant number of users relied on the breadcrumb navigation to return to the Courses' landing page when seeking information about their progress, disrupting the learning experience.
The button to open the sidebar was often misinterpreted.
As a result, a significant number of users relied on the breadcrumb navigation to return to the Courses' landing page when seeking information about their progress, disrupting the learning experience.
Key challenges we faced
Inconsistent UI: Different sidebars (or none) depending on the content type
Progress friction: Users often exited sessions to check where they were
Complex structure: Courses, lessons, and programs all had different navigation logic
Unclear content hierarchy: Increased cognitive load for learners
Key challenges we faced
Inconsistent UI: Different sidebars (or none) depending on the content type
Progress friction: Users often exited sessions to check where they were
Complex structure: Courses, lessons, and programs all had different navigation logic
Unclear content hierarchy: Increased cognitive load for learners
Key challenges we faced
Inconsistent UI: Different sidebars (or none) depending on the content type
Progress friction: Users often exited sessions to check where they were
Complex structure: Courses, lessons, and programs all had different navigation logic
Unclear content hierarchy: Increased cognitive load for learners
Here's an example of QA’s complex content hierarchy for context.
Here's an example of QA’s complex content hierarchy for context.
Here's an example of QA’s complex content hierarchy for context.
How might we refine our learning flow while integrating new content from QA and Circus Street?
How might we refine our learning flow while integrating new content from QA and Circus Street?
How might we refine our learning flow while integrating new content from QA and Circus Street?
My process
Here’s a quick list of the steps I took to get to the solution:
My process
Here’s a quick list of the steps I took to get to the solution:
My process
Here’s a quick list of the steps I took to get to the solution:
Auditing the existing sidebar patterns and navigation behaviors
Auditing the existing sidebar patterns and navigation behaviors
Auditing the existing sidebar patterns and navigation behaviors
Mapping the content structure and all possible use cases
Mapping the content structure and all possible use cases
Mapping the content structure and all possible use cases
Prototyping sidebar layouts for multiple content types
Prototyping sidebar layouts for multiple content types
Prototyping sidebar layouts for multiple content types
Running unmoderated user tests to validate clarity and flow
Running unmoderated user tests to validate clarity and flow
Running unmoderated user tests to validate clarity and flow
Iterating on the designs based on feedback
Iterating on the designs based on feedback
Iterating on the designs based on feedback
Designing accessible, responsive components to support the final UI
Designing accessible, responsive components to support the final UI
Designing accessible, responsive components to support the final UI
The solution: a smarter, universal sidebar
I designed a universal sidebar that brings all content types into one consistent experience, so learners can stay focused, see their progress at a glance, and view videos comfortably (no need to toggle full screen!) – without interrupting their flow.
The solution: a smarter, universal sidebar
I designed a universal sidebar that brings all content types into one consistent experience, so learners can stay focused, see their progress at a glance, and view videos comfortably (no need to toggle full screen!) – without interrupting their flow.
The solution: a smarter, universal sidebar
I designed a universal sidebar that brings all content types into one consistent experience, so learners can stay focused, see their progress at a glance, and view videos comfortably (no need to toggle full screen!) – without interrupting their flow.
Key improvements include:
Key improvements include:
Key improvements include:
Clearer Content Hierarchy:
Supports up to 3 levels of content and has clearer visual cues (icons, duration, locked/unlocked status)
Clearer Content Hierarchy:
Supports up to 3 levels of content and has clearer visual cues (icons, duration, locked/unlocked status)
Clearer Content Hierarchy:
Supports up to 3 levels of content and has clearer visual cues (icons, duration, locked/unlocked status)
Progress at a glance:
Learners can see course progress, title, and duration at the top—but also at the lesson level, no need to leave the video
Progress at a glance:
Learners can see course progress, title, and duration at the top—but also at the lesson level, no need to leave the video
Progress at a glance:
Learners can see course progress, title, and duration at the top—but also at the lesson level, no need to leave the video
Seamless Continuation:
On return, learners are dropped back into the exact spot they left off
Seamless Continuation:
On return, learners are dropped back into the exact spot they left off
Seamless Continuation:
On return, learners are dropped back into the exact spot they left off
Intuitive and inclusive navigation:
Next/Previous buttons improve flow and inclusivity
Intuitive and inclusive navigation:
Next/Previous buttons improve flow and inclusivity
Intuitive and inclusive navigation:
Next/Previous buttons improve flow and inclusivity
Consistent Experience:
One sidebar across lessons, courses, uplift courses, programs and blended courses
Consistent Experience:
One sidebar across lessons, courses, uplift courses, programs and blended courses
Consistent Experience:
One sidebar across lessons, courses, uplift courses, programs and blended courses
Results were very positive overall!
Following the implementation of the improved sidebar and other UI enhancements, user feedback and platform analytics indicated the following improvements:
Results were very positive overall!
Following the implementation of the improved sidebar and other UI enhancements, user feedback and platform analytics indicated the following improvements:
Results were very positive overall!
Following the implementation of the improved sidebar and other UI enhancements, user feedback and platform analytics indicated the following improvements:
Consistent positive feedback from Cloud Academy and newly migrated users
highlighting enhanced content clarity, ease of navigation, and a more seamless learning experience
Consistent positive feedback from Cloud Academy and newly migrated users
highlighting enhanced content clarity, ease of navigation, and a more seamless learning experience
Consistent positive feedback from Cloud Academy and newly migrated users
highlighting enhanced content clarity, ease of navigation, and a more seamless learning experience
53% decrease in users exiting the learning flow to check their course progress on the landing page
as key progress indicators are now visible in the sidebar, reducing unnecessary disruptions of the learning sessions
53% decrease in users exiting the learning flow to check their course progress on the landing page
as key progress indicators are now visible in the sidebar, reducing unnecessary disruptions of the learning sessions
53% decrease in users exiting the learning flow to check their course progress on the landing page
as key progress indicators are now visible in the sidebar, reducing unnecessary disruptions of the learning sessions
28% reduction in the need for full-screen viewing
thanks to improved UI clarity and better visibility of the collapsible sidebar, allowing users to expand video lessons to a larger size by simply collapsing the sidebar
28% reduction in the need for full-screen viewing
thanks to improved UI clarity and better visibility of the collapsible sidebar, allowing users to expand video lessons to a larger size by simply collapsing the sidebar
28% reduction in the need for full-screen viewing
thanks to improved UI clarity and better visibility of the collapsible sidebar, allowing users to expand video lessons to a larger size by simply collapsing the sidebar
For the pixel lovers: A peek inside the sidebar anatomy
For the pixel lovers: A peek inside the sidebar anatomy
For the pixel lovers: A peek inside the sidebar anatomy
A unified and flexible experience supporting a wide range of use cases
A unified and flexible experience supporting a wide range of use cases
A unified and flexible experience supporting a wide range of use cases
Check out more projects
Creating Ela: an AI assistant reshaping how QA learners solve challenges.
I designed an AI-powered assistant that delivers instant, in-context support to QA learners. Built in under 8 weeks, it’s already earning strong user ratings, driving engagement, and closing competitive gaps in a fast-moving market.
Avg. rating 4.5/5: Strong validation for a beta release
Creating Ela: an AI assistant reshaping how QA learners solve challenges.
I designed an AI-powered assistant that delivers instant, in-context support to QA learners. Built in under 8 weeks, it’s already earning strong user ratings, driving engagement, and closing competitive gaps in a fast-moving market.
Avg. rating 4.5/5: Strong validation for a beta release
Creating Ela: an AI assistant reshaping how QA learners solve challenges.
I designed an AI-powered assistant that delivers instant, in-context support to QA learners. Built in under 8 weeks, it’s already earning strong user ratings, driving engagement, and closing competitive gaps in a fast-moving market.
Avg. rating 4.5/5: Strong validation for a beta release
Helping Circus Street learners feel at home in a new learning platform.
I redesigned QA Learning’s content pages to reduce friction and clarify navigation, helping retain customers and steady the learning experience during a high-risk platform transition.
–20% tab clicks: improved page structure clarity
–25% scroll depth: better content prioritization
0 helpdesk tickets: smooth client transition
Helping Circus Street learners feel at home in a new learning platform.
I redesigned QA Learning’s content pages to reduce friction and clarify navigation, helping retain customers and steady the learning experience during a high-risk platform transition.
–20% tab clicks: improved page structure clarity
–25% scroll depth: better content prioritization
0 helpdesk tickets: smooth client transition
Helping Circus Street learners feel at home in a new learning platform.
I redesigned QA Learning’s content pages to reduce friction and clarify navigation, helping retain customers and steady the learning experience during a high-risk platform transition.
–20% tab clicks: improved page structure clarity
–25% scroll depth: better content prioritization
0 helpdesk tickets: smooth client transition
Unifying Text Lecture experiences after a major content merger.
I transformed fragmented Text Lectures into a unified, intuitive experience — resolving usability and progression issues to protect learner engagement and retention during Circus Street’s post-merger transition.
Resolved 5 out of 5 major UX inconsistencies: Addressed and resolved all identified UX debt.
Unifying Text Lecture experiences after a major content merger.
I transformed fragmented Text Lectures into a unified, intuitive experience — resolving usability and progression issues to protect learner engagement and retention during Circus Street’s post-merger transition.
Resolved 5 out of 5 major UX inconsistencies: Addressed and resolved all identified UX debt.
Unifying Text Lecture experiences after a major content merger.
I transformed fragmented Text Lectures into a unified, intuitive experience — resolving usability and progression issues to protect learner engagement and retention during Circus Street’s post-merger transition.
Resolved 5 out of 5 major UX inconsistencies: Addressed and resolved all identified UX debt.
Driving study habits and boosting cashflow through a 3-month challenge at Cloud Academy.
I designed a 3-month challenge that increased engagement, reduced churn, and boosted cashflow. 20% of participants stayed active three months after—well beyond typical subscription periods.
+18% increase in MoM upfront cashflow
Driving study habits and boosting cashflow through a 3-month challenge at Cloud Academy.
I designed a 3-month challenge that increased engagement, reduced churn, and boosted cashflow. 20% of participants stayed active three months after—well beyond typical subscription periods.
+18% increase in MoM upfront cashflow
Driving study habits and boosting cashflow through a 3-month challenge at Cloud Academy.
I designed a 3-month challenge that increased engagement, reduced churn, and boosted cashflow. 20% of participants stayed active three months after—well beyond typical subscription periods.
+18% increase in MoM upfront cashflow