Case study:
Re-imagining an eLearning platform

Cahoot Learning hero image

Project Overview (TL;DR)

Client: Cahoot Learning
Tools: Sketch, Invision,
Adobe Photoshop, Adobe Illustrator
Teams: Product, Development,
Executive Management

UX DESIGN
UI DESIGN
BRANDING
VISUAL DESIGN
Cahoot Learning, a small yet innovative EdTech organisation, built something special - a platform that could transform how professionals learn and grow together. While they were ahead of their time with collaborative learning pedagogy, the platform's clunky interface and limited mobile experience were holding it back.

The goal was simple yet powerful: make the platform as amazing on the outside as it was on the inside.
By focusing on user-centered design, Cahoot Learning was able to turn its already impressive platform into a game-changing solution.

The key challenges were identified to be:
- Outdated visual design that undermined the platform's innovative capabilities;
- Limited mobile responsiveness that contradicted the promise of flexible learning;
- A user experience not aligned with the platform's transformative potential.

By addressing these critical design and usability issues, we:
- Redesigned a modern, sleek, yet intuitive user interface;
- Built a smooth and responsive experience on mobile devices;
- Kept the core magic of peer-to-peer learning intact cementing Cahoot Learning as an innovator in the EdTech space.

Check out the project impact & learnings  

The problem
(and why it matters)

Cahoot Learning prides itself on its creation of an online learning product that delivers an innovative peer-to-peer collaborative learning experience. It allows learners to build relationships, reflect and apply their learning immediately, driving tangible change in the workforce.

At the time of the project (pre-Covid), Cahoot Learning was way ahead of the EdTech curve in its approach to driving learner engagement and closing the skills gap in workplaces. However the platform’s appearance belied this fact and was in need of a ‘make-over’ to reflect the innovation and power behind its pixels. The platform was also difficult to use on mobile screens which let down the concept of bite-content and on-the-go learning that Cahoot Learning was heavily promoting.

Consulting the teams working on this project and combining our shared experience on the platform the problem statement was worded to be:  
How might we redesign the Cahoot Learning peer-to-peer learning platform to create a user experience that accurately reflects its innovative technological capabilities and supports inclusive, on-the-go learning?

My approach to the project

Double diamond

Double diamond process diagram

Phase 1: Discovery

Objectives identified

1. Make the platform look more professional and engaging to clients and learners.

2. Make the platform more responsive and intuitive to use for everyone, everywhere.

3. Give learners more transparency where they are in a course.

Platform audit

To kickstart the project, the team conducted a comprehensive platform audit through a visual wall of screenshots from a recent course. The display proved invaluable in helping the team visualise the project's scope and identify inconsistencies across the user interface.

The team then documented all screens and features, evaluating their effectiveness and underlying rationale. Through ongoing validation via user data, UX research, and usability testing, we discovered that many elements were functionally sound and simply needed visual refinement.

While preserving high-quality components like our in-house video content, we also made strategic decisions to retire underutilised features such as the internal notepad based on user engagement data.

Some screenshots of the Cahoot Platform before the redesign

Competitive research

We then conducted a competitive analysis of leading EdTech platforms like edX, FutureLearn, Udacity, and Udemy, evaluating their aesthetics, features, and user experience against Cahoot's offering.

What set Cahoot apart was its innovative navigation system - a distinctive approach that displayed the entire course structure alongside content and enabled non-linear progression through courses. This unique feature, particularly powerful on desktop, set Cahoot Learning apart from the competition.

Cahoot competitor logos

User research

Through extensive EdTech market research and the platform analytics, we developed a clear picture of a typical Cahoot Learning platform user as of 2018.

Most interesting was that the vast majority of users viewed Cahoot on their desktops/laptops. Mobile phone usage was a fast growing segment, one that Cahoot needed to address.

Cahoot users breakdown by gender
Cahoot usage stats
Cahoot usage on devices breakdown

Phase 2: Definition

User personas

Cahoot identified 3 main types of user, each with their own needs, wants, strengths and weaknesses. The following data summarises these users after conducting multiple user interviews:
illustration of a learner
Malcolm
The Learner
Malcom is taking an Adaptive Leadership course on the Cahoot Learning platform for his job.

Goals
  • He wants to complete the course.
  • He aims to level-up his skills in Leadership.
  • He is also required to complete CPD requirements as per his KPIs.
  • He'd like to be able see where he is in a course at any given time and how much time is required to complete the course.
Pain points
  • He is sometimes confused as to where he is in the course and where he 'should' be.
  • Poor mobile responsiveness prevents him from effectively using the platform during his daily commute, limiting access to essential features on his phone.
illustration of a course facilitator
Charlotte
Course facilitator
Charlotte is one of the facilitators running the Adaptive Leadership course on the Cahoot Platform and is interacting with the learners on behalf of their employer (the client).

Goals
  • She aims to ensure learners valuable knowledge and practical skills from the course.
  • She would like to encourage more learner discussions and engagement within the course
  • To easily identify any learners needing assistance during the course.
Pain points
  • Tracking both stragglers and eager learners in course is time consuming so most of her efforts are aimed at the middle of the pack.
  • She's finding it very difficult to follow all discussion threads in the course.
illustration of a client
Susan
L&D Manager (client)
Susan is the head of the L&D department of a government agency. The Cahoot Platform is hosting course content owned by the agency.

Goals
  • She would like high completion rates of all of the Adaptive Leadership course instances run on the platform.
  • She wants to see her learners engaged with the course content.
  • She would love to see her learners apply their learnings in their respective roles.
Pain points
  • It is difficult to quickly gauge learner engagement in an course, particularly when it is running.
  • She would like to see her agency's branding to appear more prominently on the platform, not just the logo.

Opportunities

During the Discovery Phase and brainstorming sessions for the project, several key opportunities emerged:

1. The ability to allow a client’s branding to be incorporated into the platform through use of logos, branded banners and branded course content. This was a also great time to reassess how the platform could utilise more styled layouts and engaging visual content.

2. Making the platform accessible for those with vision issues and the deaf.

3. Build upon the My Progress section to incentivise learner engagement through the course whilst also providing learners with their ‘suggested’ progression in the course at any given time.

Phase 3: Design & Development

Ideation

Throughout the design process, input and feedback from the team were encouraged at every stage, with a particular emphasis on collaboration with the development team. From the outset, the development team played a key role in shaping the project scope and identifying technical constraints.

Several ideation techniques were employed to drive creativity and problem-solving, including:
- Collaborative brainstorming sessions, such as ‘How Might We…’ scenarios
- Affinity mapping to identify patterns and insightsWhiteboard sketches and extensive use of post-it notes to visualize ideas
- Paper prototyping to rapidly explore concepts
- Card sorting exercises for organizing navigation menus across both desktop and mobile platforms
-An Impact/Effort matrix to prioritize tasks and features based on value and feasibility

Wireframes

Low-fidelity
Extensive paper and whiteboard sketches were created before transitioning to digital design. Icons were developed early in the process, given their importance in the navigation design and their role in early usability testing. Specifically, the icons in the main left-hand menu served as a space-saving solution for smaller screens, enhancing both usability and efficiency.
Low fidelity Cahoot platform screen designs
Hi-fidelity
The primary focus at this stage was on colour and legibility, aiming for a clean, professional aesthetic that would complement clients' branding and course content. Dark neutral greys were chosen to provide optimal contrast, avoiding the eye strain often associated with pure black. This phase also marked the early development of the Cahoot Learning Design System. Some of the existing Cahoot brand colours were subtly adjusted to improve contrast and accessibility.
High fidelity Cahoot platform screen designs

Usability testing

Due to time constraints, we skipped the prototyping phase and had the Development team build the new design directly into the staging environment. This allowed for easy comparison between the new and old views during testing.

The testing process highlighted several issues including:
1. New smaller versions of the Module Menu and an icon-only Left Hand Menu to better accomodate tablet users and some smaller laptops.

2. The new menus required more breakpoints be created to show the best menu combination on each screen size.
3. The new progress wheel was moved and re-sized several times to look better on different screen-sizes. Testing also highlighted that the Facilitator view of the platform would also benefit from a version of the progress section to highlight a cohort’s progress in a course compared to the ‘suggested’ pace set by the course designers.The progress wheel also needed to become a config to be turned on/off as some learners found it to be motivating and others did not.  
4. Client logos come in all shapes an sizes so it was trial and error finding the perfect sized area to accommodate logos on the course banner area.

5. Course banner heights were adjusted to show more course content.
6. The non-linear navigation system, whilst novel and widely liked, took a lot of screen real estate. This innovative structure was a double edged sword as there was no precedent to follow in the complexity of multiple navigation menus on screen. It took many iterations to get to where we were happy. Testing confirmed that learners still expected linear structured courses. To bridge the gap, I added “< Previous” and “Next >” buttons to the top of each course element as an additional way to navigate through a course.  

Phase 4: Delivery

The new platform was launched during the new year break, ensuring no disruption to active courses. This timing also gave our team space to adapt content and preview changes with clients.

The platform's debut - an asset management course for a longtime client - exceeded expectations, with users praising both the enhanced design and new features. This first deployment ran perfectly, validating our approach.
The clients were at first impressed by new look, then blown away by the additional features available to their learners.

Impact and learnings

Outcomes

Education Alliance Finland Quality Certified
95% Outstanding Pedagogical Approach and Learning Experience

The Education Alliance Finland (EAF) is an organisation that provides a global quality standard for learning solutions through product evaluations and certifications. EAF found Cahoot Learning's Platform to be 'exceptionally innovative and provides high educational value. The content is delivered in an extremely meaningful and engaging way'.

An accessible and inclusive platform
The platform's refresh marked Cahoot's pivotal shift toward inclusive design, starting with thoughtful color schemes and enhanced interface elements. This commitment to accessibility culminated in a comprehensive audit and review process, during which the platform successfully met all Level A and Level AA requirements of the Web Content Accessibility Guidelines (WCAG) 2.1.
"The product's graphics, sounds and other elements support the narrative and user experience in a, meaningful way and are pleasant... The learner UI is very easy to use and fluent."

Education Alliance Finland

Learnings

An involved staff member is an engaged staff member
The project highlighted the powerful link between engagement and innovation in cross-team collaboration. We discovered that team members who were actively involved became passionate contributors, providing meaningful improvements to the platform.

Resource prioritisation
To best leverage development resources, we focused on perfecting the platform's new navigation system, and establishing robust UI foundations for future growth. While this strategic decision meant that 20% of screens remained in their original state at launch, it enabled us to deliver core improvements efficiently. The remaining screens were addressed with future feature updates.

A good UX – Dev team hand-off is essential to the success of any project
InVision inspect mode was a godsend.
Bianca Rogers logo