Improving content navigation and learner experience at QA through a universal sidebar
Improving content navigation and learner experience at QA through a universal sidebar
By simplifying content navigation I reduced confusion and boosted engagement on QA’s platform. The new sidebar provided a more intuitive way to explore content, helping learners stay focused and track their progress more effectively.
MY ROLE ON THIS PROJECT
When I joined the team, the decision to implement a new sidebar had already been made. My goal was to refine the design and make it as intuitive and user-friendly as possible. Given the complexity of our content structure, I focused on creating a clear and understandable content hierarchy, improving usability through multiple rounds of user testing, and designing inclusive, accessible flows for all content types. My work helped transform the sidebar into a seamless navigation tool that improved the overall learning experience for our users.
MY ROLE ON THIS PROJECT
When I joined the team, the decision to implement a new sidebar had already been made. My goal was to refine the design and make it as intuitive and user-friendly as possible. Given the complexity of our content structure, I focused on creating a clear and understandable content hierarchy, improving usability through multiple rounds of user testing, and designing inclusive, accessible flows for all content types. My work helped transform the sidebar into a seamless navigation tool that improved the overall learning experience for our users.
MY ROLE ON THIS PROJECT
When I joined the team, the decision to implement a new sidebar had already been made. My goal was to refine the design and make it as intuitive and user-friendly as possible. Given the complexity of our content structure, I focused on creating a clear and understandable content hierarchy, improving usability through multiple rounds of user testing, and designing inclusive, accessible flows for all content types. My work helped transform the sidebar into a seamless navigation tool that improved the overall learning experience for our users.
READ THE CASE STUDY
The end of year 2023 marked a critical milestone for the QA Group as we began transitioning clients from Circus Street onto the Cloud Academy platform. The biggest challenge is that these clients were accustomed to a much simpler and more intuitive UX—one they genuinely loved.
The pressure to streamline the user experience was a real business need. To address this, we took an incremental approach, continuously refining different aspects of the platform to ensure a smoother, more intuitive learning experience.
READ THE CASE STUDY
The end of year 2023 marked a critical milestone for the QA Group as we began transitioning clients from Circus Street onto the Cloud Academy platform. The biggest challenge is that these clients were accustomed to a much simpler and more intuitive UX—one they genuinely loved.
The pressure to streamline the user experience was a real business need. To address this, we took an incremental approach, continuously refining different aspects of the platform to ensure a smoother, more intuitive learning experience.
READ THE CASE STUDY
The end of year 2023 marked a critical milestone for the QA Group as we began transitioning clients from Circus Street onto the Cloud Academy platform. The biggest challenge is that these clients were accustomed to a much simpler and more intuitive UX—one they genuinely loved.
The pressure to streamline the user experience was a real business need. To address this, we took an incremental approach, continuously refining different aspects of the platform to ensure a smoother, more intuitive learning experience.
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?
Unpacking the problems with our content Sidebar
We had to take a critical look at our sidebar, reassessing its design and functionality to ensure it met the needs of our transitioning users while providing a more intuitive and seamless experience for the entire user base. The lack of a clear structure and consistency in content presentation led to confusion among our learners, and impacted engagement and the overall learning experience in a negative way.
Unpacking the problems with our content Sidebar
We had to take a critical look at our sidebar, reassessing its design and functionality to ensure it met the needs of our transitioning users while providing a more intuitive and seamless experience for the entire user base. The lack of a clear structure and consistency in content presentation led to confusion among our learners, and impacted engagement and the overall learning experience in a negative way.
Unpacking the problems with our content Sidebar
We had to take a critical look at our sidebar, reassessing its design and functionality to ensure it met the needs of our transitioning users while providing a more intuitive and seamless experience for the entire user base. The lack of a clear structure and consistency in content presentation led to confusion among our learners, and impacted engagement and the overall learning experience in a negative way.
Don't have time for this?
Jump straight to the final solution
Don't have time for this?
Jump straight to the final solution
Don't have time for this?
Jump straight to the final solution
Key issues included:
Difficulty in distinguishing between different content types (exams vs labs vs lessons)
Inconsistent navigation across learning experiences: courses and lessons had their own sidebar, which looked and worked differently and it was difficult to understand the course progress during a learning session.
Challenges in tracking progress and understanding content hierarchy.
Key issues included:
Difficulty in distinguishing between different content types (exams vs labs vs lessons)
Inconsistent navigation across learning experiences: courses and lessons had their own sidebar, which looked and worked differently and it was difficult to understand the course progress during a learning session.
Challenges in tracking progress and understanding content hierarchy.
Key issues included:
Difficulty in distinguishing between different content types (exams vs labs vs lessons)
Inconsistent navigation across learning experiences: courses and lessons had their own sidebar, which looked and worked differently and it was difficult to understand the course progress during a learning session.
Challenges in tracking progress and understanding content hierarchy.
OUR SIDEBAR BEFORE
Clearly understanding course progress wasn’t always intuitive, and 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.
OUR SIDEBAR BEFORE
Clearly understanding course progress wasn’t always intuitive, and 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.
OUR SIDEBAR BEFORE
Clearly understanding course progress wasn’t always intuitive, and 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.
BREAKING DOWN OUR CONTENT STRUCTURE
Our platform is built around a structured content hierarchy designed to support different types of learning experiences. Courses are the core of it and serve as containers that house various learning units, including:
BREAKING DOWN OUR CONTENT STRUCTURE
Our platform is built around a structured content hierarchy designed to support different types of learning experiences. Courses are the core of it and serve as containers that house various learning units, including:
BREAKING DOWN OUR CONTENT STRUCTURE
Our platform is built around a structured content hierarchy designed to support different types of learning experiences. Courses are the core of it and serve as containers that house various learning units, including:
Video & Text-Based Lessons
Core instructional content.
Video & Text-Based Lessons
Core instructional content.
Video & Text-Based Lessons
Core instructional content.
Hands-on labs
Programming challenges for practical application of the learnings.
Hands-on labs
Programming challenges for practical application of the learnings.
Hands-on labs
Programming challenges for practical application of the learnings.
Exams, Quizzes, Assesments and Smart Assessments:
Question based content to reinforce and assess learnings.
Exams, Quizzes, Assesments and Smart Assessments:
Question based content to reinforce and assess learnings.
Exams, Quizzes, Assesments and Smart Assessments:
Question based content to reinforce and assess learnings.
Over time, additional content structures were introduced, such as Skill-Based Programs and Blended Learning Courses, which expanded our offerings but also introduced inconsistencies in navigation. This evolving complexity made it essential to improve how content is organized and presented, ensuring clarity and ease of use for learners.
Over time, additional content structures were introduced, such as Skill-Based Programs and Blended Learning Courses, which expanded our offerings but also introduced inconsistencies in navigation. This evolving complexity made it essential to improve how content is organized and presented, ensuring clarity and ease of use for learners.
Over time, additional content structures were introduced, such as Skill-Based Programs and Blended Learning Courses, which expanded our offerings but also introduced inconsistencies in navigation. This evolving complexity made it essential to improve how content is organized and presented, ensuring clarity and ease of use for learners.
A SIMPLIFIED OVERVIEW OF QA'S CONTENT STRUCTURE
While there are additional variations in content organization, such as Uplift Courses and Blended Learning Courses, the overall structure remains consistent.
A SIMPLIFIED OVERVIEW OF QA'S CONTENT STRUCTURE
While there are additional variations in content organization, such as Uplift Courses and Blended Learning Courses, the overall structure remains consistent.
A SIMPLIFIED OVERVIEW OF QA'S CONTENT STRUCTURE
While there are additional variations in content organization, such as Uplift Courses and Blended Learning Courses, the overall structure remains consistent.
Behind the pixels: the process I followed to reach the final solution
Behind the pixels: the process I followed to reach the final solution
Behind the pixels: the process I followed to reach the final solution
1. User Interviews & Feedback Analysis:
Gathering insights from learners and enterprise users to understand their struggles and expectations.
1. User Interviews & Feedback Analysis:
Gathering insights from learners and enterprise users to understand their struggles and expectations.
1. User Interviews & Feedback Analysis:
Gathering insights from learners and enterprise users to understand their struggles and expectations.
2. Content Auditing & Mapping:
Analysing existing content structures, including extreme use cases, to identify inconsistencies and overlaps.
2. Content Auditing & Mapping:
Analysing existing content structures, including extreme use cases, to identify inconsistencies and overlaps.
2. Content Auditing & Mapping:
Analysing existing content structures, including extreme use cases, to identify inconsistencies and overlaps.
3. Competitor Analysis:
Question based content to reinforce and assess learnings.
3. Competitor Analysis:
Question based content to reinforce and assess learnings.
3. Competitor Analysis:
Question based content to reinforce and assess learnings.
4. Navigation & UX Redesign:
Implementing a more intuitive categorisation and visual hierarchy to clarify content relationships and improve discoverability.
4. Navigation & UX Redesign:
Implementing a more intuitive categorisation and visual hierarchy to clarify content relationships and improve discoverability.
4. Navigation & UX Redesign:
Implementing a more intuitive categorisation and visual hierarchy to clarify content relationships and improve discoverability.
DESIGN SOLUTION
Rethinking navigation for a better experience:
I designed a universal navigation system that is more efficient, intuitive, and flexible. It supports multiple content types seamlessy while remaining scalable enough to accommodate QA's evolving content offer.
DESIGN SOLUTION
Rethinking navigation for a better experience:
I designed a universal navigation system that is more efficient, intuitive, and flexible. It supports multiple content types seamlessy while remaining scalable enough to accommodate QA's evolving content offer.
DESIGN SOLUTION
Rethinking navigation for a better experience:
I designed a universal navigation system that is more efficient, intuitive, and flexible. It supports multiple content types seamlessy while remaining scalable enough to accommodate QA's evolving content offer.
Key improvements include:
Key improvements include:
Key improvements include:
Clearer Content Hierarchy:
The sidebar can displays up to three levels of content under the general progress, using distinct icons to differentiate content types for better recognition.
Clearer Content Hierarchy:
The sidebar can displays up to three levels of content under the general progress, using distinct icons to differentiate content types for better recognition.
Clearer Content Hierarchy:
The sidebar can displays up to three levels of content under the general progress, using distinct icons to differentiate content types for better recognition.
Enhanced Progress Visibility:
A progress circle, content title, icon, and total duration are prominently displayed in the sidebar header, offering learners a quick overview of their advancement.
Enhanced Progress Visibility:
A progress circle, content title, icon, and total duration are prominently displayed in the sidebar header, offering learners a quick overview of their advancement.
Enhanced Progress Visibility:
A progress circle, content title, icon, and total duration are prominently displayed in the sidebar header, offering learners a quick overview of their advancement.
Detailed Content Steps:
Each step includes duration, locked/unlocked status, and completion tracking for improved clarity.
Detailed Content Steps:
Each step includes duration, locked/unlocked status, and completion tracking for improved clarity.
Detailed Content Steps:
Each step includes duration, locked/unlocked status, and completion tracking for improved clarity.
Seamless learning Resumption:
When learners return to their studies, they are automatically directed to their exact last point of engagement. The sidebar scrolls to highlight the content in progress, ensuring a smooth continuation.
Seamless learning Resumption:
When learners return to their studies, they are automatically directed to their exact last point of engagement. The sidebar scrolls to highlight the content in progress, ensuring a smooth continuation.
Seamless learning Resumption:
When learners return to their studies, they are automatically directed to their exact last point of engagement. The sidebar scrolls to highlight the content in progress, ensuring a smooth continuation.
Improved Navigation Controls:
To enhance accessibility and user experience, Next/Previous buttons have been added at the bottom, allowing for effortless movement between content sections.
Improved Navigation Controls:
To enhance accessibility and user experience, Next/Previous buttons have been added at the bottom, allowing for effortless movement between content sections.
Improved Navigation Controls:
To enhance accessibility and user experience, Next/Previous buttons have been added at the bottom, allowing for effortless movement between content sections.
DIVING DEEP INTO THE DETAILS
The sidebar’s component anatomy
DIVING DEEP INTO THE DETAILS
The sidebar’s component anatomy
DIVING DEEP INTO THE DETAILS
The sidebar’s component anatomy
The new sidebar is designed to support an array of different uses cases
Use the arrows below for a quick overview
The new sidebar is designed to support an array of different uses cases
The new sidebar is designed to support an array of different uses cases
Use the arrows below for a quick overview
CONCLUSION
Overall the results were very positive
Following the implementation of the improved sidebar and other UI enhancements, user feedback and platform analytics indicated the following improvements:
CONCLUSION
Overall the results were very positive
Following the implementation of the improved sidebar and other UI enhancements, user feedback and platform analytics indicated the following improvements:
CONCLUSION
Overall the results were very positive
Following the implementation of the improved sidebar and other UI enhancements, user feedback and platform analytics indicated the following improvements:
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.
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 navigation disruptions.
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 navigation disruptions.
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 navigation disruptions.
Consistent positive feedback
highlighting enhanced content clarity, ease of navigation, and a more seamless learning experience.
Consistent positive feedback
highlighting enhanced content clarity, ease of navigation, and a more seamless learning experience.
Consistent positive feedback
highlighting enhanced content clarity, ease of navigation, and a more seamless learning experience.
