Making QA’s content pages less overwhelming, more consistent and flexible.
Making QA’s content pages less overwhelming, more consistent and flexible.
I redesigned QA’s content pages to create a more intuitive user experience.Through a simplified layout and reduced information overload, we improved learner satisfaction for a smoother clients transition.
MY ROLE ON THIS PROJECT
I was involved in this project from the start, working towards the goal of making the platform simpler, less distracting, and easier to use. I researched competitors, analyzed data, and worked with the Product Manager to explore different solutions, ranging from small tweaks to bigger, more disruptive changes. The project required tight cross team collaboration and user testing to ensure the changes worked well.
MY ROLE ON THIS PROJECT
I was involved in this project from the start, working towards the goal of making the platform simpler, less distracting, and easier to use. I researched competitors, analyzed data, and worked with the Product Manager to explore different solutions, ranging from small tweaks to bigger, more disruptive changes. The project required tight cross team collaboration and user testing to ensure the changes worked well.
MY ROLE ON THIS PROJECT
I was involved in this project from the start, working towards the goal of making the platform simpler, less distracting, and easier to use. I researched competitors, analyzed data, and worked with the Product Manager to explore different solutions, ranging from small tweaks to bigger, more disruptive changes. The project required tight cross team collaboration and user testing to ensure the changes worked well.
READ THE CASE STUDY
How might we make it easier for learners to scan content pages and find the information they need?
At the end of 2023, the QA Group reached a pivotal moment as we began migrating clients from Circus Street to the Cloud Academy platform. There was a challenge: these clients were used to a simpler, more intuitive experience they truly liked. The pressure to improve the platform’s usability wasn’t just a nice-to-have; it was a business necessity.
To tackle this, we took an incremental approach, making continuous improvements to refine the user experience and ensure a smoother transition for all learners.
We started with Courses and Lessons, the core of our platform. These pages were cluttered with excessive details, making it harder for learners to find relevant information. Additionally, inconsistencies in how information was structured across the two content types led to a confusing user experience.
READ THE CASE STUDY
How might we make it easier for learners to scan content pages and find the information they need?
At the end of 2023, the QA Group reached a pivotal moment as we began migrating clients from Circus Street to the Cloud Academy platform. There was a challenge: these clients were used to a simpler, more intuitive experience they truly liked. The pressure to improve the platform’s usability wasn’t just a nice-to-have; it was a business necessity.
To tackle this, we took an incremental approach, making continuous improvements to refine the user experience and ensure a smoother transition for all learners.
We started with Courses and Lessons, the core of our platform. These pages were cluttered with excessive details, making it harder for learners to find relevant information. Additionally, inconsistencies in how information was structured across the two content types led to a confusing user experience.
READ THE CASE STUDY
How might we make it easier for learners to scan content pages and find the information they need?
At the end of 2023, the QA Group reached a pivotal moment as we began migrating clients from Circus Street to the Cloud Academy platform. There was a challenge: these clients were used to a simpler, more intuitive experience they truly liked. The pressure to improve the platform’s usability wasn’t just a nice-to-have; it was a business necessity.
To tackle this, we took an incremental approach, making continuous improvements to refine the user experience and ensure a smoother transition for all learners.
We started with Courses and Lessons, the core of our platform. These pages were cluttered with excessive details, making it harder for learners to find relevant information. Additionally, inconsistencies in how information was structured across the two content types led to a confusing user experience.
Even ignoring the UI inconsistencies, it was clear that both the courses and lessons pages needed a better information hierarchy.
To see an overview of the key points I evaluated, please click through the slides using the arrows below.
Don't have time for this?
Jump straight to the final solution
Even ignoring the UI inconsistencies, it was clear that both the courses and lessons pages needed a better information hierarchy.
Even ignoring the UI inconsistencies, it was clear that both the courses and lessons pages needed a better information hierarchy.
Content data relevance: Rating, number of users who started the content, and duration were displayed. Was this relevant for learners?
Primary Actions clarity and relevance: Start content/enroll in the course, or add to bookmarks. Enroll flow was hidden under the start button launching a flow through a modal, which was ok for a workaround but not ideal in the long run.
Rating System logics: always available, even before users started the content, which make no sense.
Training Content: A list of all included materials with relevant details, based on heatmaps this is the most relevant information for learners.
Content type counters: Heatmaps showed quite some activity here. During testing sessions we found out learners thought the icons were filters.
Content Description: while a short preview is visible, a click is needed to read the full description. The preview alone sometimes make no sense since it is created independently by content creators who weren’t given guidelines.
CPE Score relevance: it’s available only for B2B users and not for all content, indicating Continuing Professional Education (CPE) credits, it’s highly valued by some of our clients.
Certificate Section relevance: it’s always visible, even for users who haven’t started the course yet.
Layout optimization: We can defintely improve the page’s structure to reduce excessive scrolling, ensuring key information is more accessible.
Author Information relevance: It’s displayed prominently but not very relevant based on data.
Tags highlighting key subject areas: We evaluated their visibility and usefulness.
Content Recommendations Relevance and Placement: They are located far down the page with minimal user engagement, suggesting they may not be effectively positioned or relevant for learners.
Lessons weren’t in a much better place, and had a layout that differed significantly from the course page, leading to inconsistencies in the user experience. Below are the key aspects we assessed:
Content data relevance: We were displaying average rating, number of users who started the content, and duration. But did our learners need to know all this?
Actions placement and Rating System logics: Rating system was available even before starting to consume content, and all actions were displayed in the lower section of the page while, on all other content pages they are placed in the hero section, just below the title.
Tab Navigation structure: Had tabs sitting outside of the content information section. This characteristic is unique to this one learning unit.
Content information positioning and structure: on this page the content description is displayed in full and on the left, contrary to what we find on the course’s page, and it’s including author’s informations, which makes for an inconsistent experience.
Layout optimization: There was a clear opportunity to improve the page’s structure ensuring easier accessibility to key information.
Author Information relevance and positioning: Could end up very low down on the page, since the length of content description might vary.
Covered topics tags positioning and relevance: Same as for Courses, data demonstrated very low engagement.
Key findings that helped shaping the final design
Key findings that helped shaping the final design
Key findings that helped shaping the final design
There was very low engagement with author links:
Click rates on "Author Name" were minimal, indicating that the feature held little relevance for learners.
0.2% - 0.3%
users interaction
There was very low engagement with author links:
Click rates on "Author Name" were minimal, indicating that the feature held little relevance for learners.
0.2% - 0.3%
users interaction
There was very low engagement with author links:
Click rates on "Author Name" were minimal, indicating that the feature held little relevance for learners.
0.2% - 0.3%
users interaction
Content recommendations were ineffective:
The content recommendation section saw minimal user interaction, proving ineffective as a discovery tool for learners. This was likely due to low visibility and the fact that users weren’t actively seeking recommendations in that section.
Content recommendations were ineffective:
The content recommendation section saw minimal user interaction, proving ineffective as a discovery tool for learners. This was likely due to low visibility and the fact that users weren’t actively seeking recommendations in that section.
Content recommendations were ineffective:
The content recommendation section saw minimal user interaction, proving ineffective as a discovery tool for learners. This was likely due to low visibility and the fact that users weren’t actively seeking recommendations in that section.
Users struggled to find key information
Heatmaps revealed excessive scrolling, indicating that learners had difficulty quickly locating important details.
Users struggled to find key information
Heatmaps revealed excessive scrolling, indicating that learners had difficulty quickly locating important details.
Users struggled to find key information:
Heatmaps revealed excessive scrolling, indicating that learners had difficulty quickly locating important details.
DESIGN SOLUTION
We cleaned up the default page view by removing redundant information and highlighting only what learners care about most. We then organized everything else under dedicated tabs, creating a structure that’s flexible enough to accommodate all our current (and future) use cases.
Use the arrows below to see how these changes apply to both courses and lessons.
DESIGN SOLUTION
We cleaned up the default page view by removing redundant information and highlighting only what learners care about most. We then organized everything else under dedicated tabs, creating a structure that’s flexible enough to accommodate all our current (and future) use cases.
Use the arrows below to see how these changes apply to both courses and lessons.
DESIGN SOLUTION
We cleaned up the default page view by removing redundant information and highlighting only what learners care about most. We then organized everything else under dedicated tabs, creating a structure that’s flexible enough to accommodate all our current (and future) use cases.
Use the arrows below to see how these changes apply to both courses and lessons.
Since the inconsistencies went beyond the Courses and Lessons landing pages, we unified the way information is displayed across all content types for a more cohesive experience.
Please click through the slides using the arrows below to see how the design solution applies to all content pages
Since the inconsistencies went beyond the Courses and Lessons landing pages, we unified the way information is displayed across all content types for a more cohesive experience.
Please click through the slides using the arrows below to see how the design solution applies to all content pages
Since the inconsistencies went beyond the Courses and Lessons landing pages, we unified the way information is displayed across all content types for a more cohesive experience.
Please click through the slides using the arrows below to see how the design solution applies to all content pages
CONCLUSION
Impact of the redesign
CONCLUSION
Impact of the redesign
CONCLUSION
Impact of the redesign
With these updates, learners experience a more intuitive and structured learning journey. By reducing distractions we reduced frustration and increased course completion rates.
With these updates, learners experience a more intuitive and structured learning journey. By reducing distractions we reduced frustration and increased course completion rates.
With these updates, learners experience a more intuitive and structured learning journey. By reducing distractions we reduced frustration and increased course completion rates.
Positive feedback reporting the ability to take faster decision-making when scanning the landing pages, as essential information is immediately available without scrolling.
Positive feedback reporting the ability to take faster decision-making when scanning the landing pages, as essential information is immediately available without scrolling.
Positive feedback reporting the ability to take faster decision-making when scanning the landing pages, as essential information is immediately available without scrolling.
Positive feedback from Content Teams and Content Engine Teams (our Content Management System) stakeholders, appreciating the more flexible structure and clearer information displayed.
Positive feedback from Content Teams and Content Engine Teams (our Content Management System) stakeholders, appreciating the more flexible structure and clearer information displayed.
Positive feedback from Content Teams and Content Engine Teams (our Content Management System) stakeholders, appreciating the more flexible structure and clearer information displayed.
• Less than 20% of users clicked on tabs to access content not visible by default and also decreased overall time spent on page
• Scroll depth decreased by 25% (less need to scroll excessively to find relevant informations)
• Less than 20% of users clicked on tabs to access content not visible by default and also decreased overall time spent on page
• Scroll depth decreased by 25% (less need to scroll excessively to find relevant informations)
• Less than 20% of users clicked on tabs to access content not visible by default and also decreased overall time spent on page
• Scroll depth decreased by 25% (less need to scroll excessively to find relevant informations)
DIVING DEEP INTO THE DETAILS
Keep reading if you'd like to know more about the thinking behind the design decisions.
Please click through the slides using the arrows below to see the list of improvements implemented.
DIVING DEEP INTO THE DETAILS
Keep reading if you'd like to know more about the thinking behind the design decisions.
Please click through the slides using the arrows below to see the list of improvements implemented.
DIVING DEEP INTO THE DETAILS
Keep reading if you'd like to know more about the thinking behind the design decisions.
Please click through the slides using the arrows below to see the list of improvements implemented.
Course content steps were set as the default information for users
Since the list of course content is the most relevant information for learners, we made it the default view on course landing pages.
Additionally, we improved the experience by transforming the previously displayed content type icons into functional filters.We also introduced a step indicator, allowing learners to track their progress by showing completed and remaining steps.
We made key content details easier to find for all pages.
We moved a short course description to the hero section, just below the title, to help users quickly scan the course without having to search for key information further down the page.
The full course description will be under the "About tab",
together with the CPE score and covered topics.
We also planned for the option to display partnership information, which is primarily used by our B2B clients.
We moved content suggestions out of the main view, but kept them at reach.
Since the related content section saw little engagement, we decided to keep it but move it under a tab. This allows users to explore the library based on their interests without distracting them from their primary goal—finding information about the course itself.
This approach also aligns with how related content is displayed on other learning pages, creating a more consistent and familiar experience.
We made It easier to see what’s completed and what’s next
We improved the way users track their progress by making completed content steps visually distinct from those still in progress. Previously, the only indicator was a small "Completed" label on the content step, which was easy to overlook.
Now, the UI clearly differentiates completed steps, allowing learners to see their progress at a glance.
We also introduced a toggle that allows users to show or hide completed content, making it easier to focus only on what still needs to be completed. This is especially useful for courses with many steps, reducing unnecessary scrolling and helping learners quickly access the content they need to study.
We made it easier to understand when a course is completed and a certificate is available for download
All courses grant a certificate upon completion and this information was already displayed below the hero, we found this section redundant. On the old course page, there was a dedicated section informing users that completing a course would earn them a certificate and showing their progress toward it.
To make it more relevant, we moved it to a dedicated space that only appears once the course is completed, sitting above the list of completed content steps. This ensures learners see it at the right moment—when they can actually download their certificate.
Looking ahead, we plan to enhance this experience with gamification elements, such as animations and badges, to make course completion feel more rewarding.
Course content steps were set as the default information for users
Since the list of course content is the most relevant information for learners, we made it the default view on course landing pages.
Additionally, we improved the experience by transforming the previously displayed content type icons into functional filters.
We also introduced a step indicator, allowing learners to track their progress by showing completed and remaining steps.
We made key content details easier to find for all pages.
We moved a short course description to the hero section, just below the title, to help users quickly scan the course without having to search for key information further down the page.
The full course description will be under the "About tab",
together with the CPE score and covered topics.
We also planned for the option to display partnership information, which is primarily used by our B2B clients.
We moved content suggestions out of the main view, but kept them at reach.
Since the related content section saw little engagement, we decided to keep it but move it under a tab. This allows users to explore the library based on their interests without distracting them from their primary goal—finding information about the course itself.
This approach also aligns with how related content is displayed on other learning pages, creating a more consistent and familiar experience.
We made It easier to see what’s completed and what’s next
We improved the way users track their progress by making completed content steps visually distinct from those still in progress. Previously, the only indicator was a small "Completed" label on the content step, which was easy to overlook.
Now, the UI clearly differentiates completed steps, allowing learners to see their progress at a glance.
We also introduced a toggle that allows users to show or hide completed content, making it easier to focus only on what still needs to be completed. This is especially useful for courses with many steps, reducing unnecessary scrolling and helping learners quickly access the content they need to study.
We made it easier to understand when a course is completed and a certificate is available for download
All courses grant a certificate upon completion and this information was already displayed below the hero, we found this section redundant. On the old course page, there was a dedicated section informing users that completing a course would earn them a certificate and showing their progress toward it.
To make it more relevant, we moved it to a dedicated space that only appears once the course is completed, sitting above the list of completed content steps. This ensures learners see it at the right moment—when they can actually download their certificate.
Looking ahead, we plan to enhance this experience with gamification elements, such as animations and badges, to make course completion feel more rewarding.
AN ESPECIALLY CHALLENGING ONE
By adding a tab dedicated to authors, we made everyone happy, since we removed cognitive load for users, while giving more flexibility to content creators.
There was a lot to consider when we got to redesigning the section under the tab displaying authors informations. Our main decision was driven by data: the engagement was so low we could have removed the information and most users wouldn’t have noticed, but it wasn’t that simple. Ex-Cloud Academy content creators have their own “fan base”, and surprisingly, some learners have chosen courses based on a specific author. Additionally, for internal reasons, there was a request to display multiple authors and differentiate between primary and secondary contributors. Given this, we didn’t feel like removing the section entirely was the right approach.
AN ESPECIALLY CHALLENGING ONE
By adding a tab dedicated to authors, we made everyone happy, since we removed cognitive load for users, while giving more flexibility to content creators.
There was a lot to consider when we got to redesigning the section under the tab displaying authors informations. Our main decision was driven by data: the engagement was so low we could have removed the information and most users wouldn’t have noticed, but it wasn’t that simple. Ex-Cloud Academy content creators have their own “fan base”, and surprisingly, some learners have chosen courses based on a specific author. Additionally, for internal reasons, there was a request to display multiple authors and differentiate between primary and secondary contributors. Given this, we didn’t feel like removing the section entirely was the right approach.
AN ESPECIALLY CHALLENGING ONE
By adding a tab dedicated to authors, we made everyone happy, since we removed cognitive load for users, while giving more flexibility to content creators.
There was a lot to consider when we got to redesigning the section under the tab displaying authors informations. Our main decision was driven by data: the engagement was so low we could have removed the information and most users wouldn’t have noticed, but it wasn’t that simple. Ex-Cloud Academy content creators have their own “fan base”, and surprisingly, some learners have chosen courses based on a specific author. Additionally, for internal reasons, there was a request to display multiple authors and differentiate between primary and secondary contributors. Given this, we didn’t feel like removing the section entirely was the right approach.
Ex-Circus Street content rarely included author information—about 90% of the time, it wasn’t available all together. For the first iteration, we moved author details under a dedicated tab supporting a boolean property, meaning that if no author information is available, the tab is also not available.
Ex-Circus Street content rarely included author information—about 90% of the time, it wasn’t available all together. For the first iteration, we moved author details under a dedicated tab supporting a boolean property, meaning that if no author information is available, the tab is also not available.
Ex-Circus Street content rarely included author information—about 90% of the time, it wasn’t available all together. For the first iteration, we moved author details under a dedicated tab supporting a boolean property, meaning that if no author information is available, the tab is also not available.
Later on we plan to release a design iteration supporting multiple authors and a distinction between principal and secondary. We evaluated the possibility to specify which authors are principal and which are secondary, but then decided to go for a simpler and more “politically correct” visual hierarchy. Since we have no control over the number of authors and we’d like to avoid over complicating the logics we’ve also decided to go for a more generic “credits” label for the tab.
Later on we plan to release a design iteration supporting multiple authors and a distinction between principal and secondary. We evaluated the possibility to specify which authors are principal and which are secondary, but then decided to go for a simpler and more “politically correct” visual hierarchy. Since we have no control over the number of authors and we’d like to avoid over complicating the logics we’ve also decided to go for a more generic “credits” label for the tab.
Later on we plan to release a design iteration supporting multiple authors and a distinction between principal and secondary. We evaluated the possibility to specify which authors are principal and which are secondary, but then decided to go for a simpler and more “politically correct” visual hierarchy. Since we have no control over the number of authors and we’d like to avoid over complicating the logics we’ve also decided to go for a more generic “credits” label for the tab.
