Highspot

Design Process

Understand the Problem

I began my design process by understanding the problem that sales leaders (referred to as "instructors" when defining their user needs) faced when structuring trainings for their teams. Based on customer feedback and research conducted by the UXR team, the main need identified was:

Instructors want to create a unified “curriculum” that their learners can complete. Instructors want to choose the courses, enroll their learners, and track progress of their learners.

To ensure all aspects of this problem were addressed, I worked with a PM to break these down into specific user goals.

Organize

Instructors want to group courses together to help learners easily understand the connection and relation among several courses. Previously it was not clear how different courses connected or how multiple courses built upon each other.

Enroll

Instructors generally had a specific non-changing collection of courses that they wanted cohorts of learners to complete. The current process for this involved going to each individual course and enrolling learners in that course. For multiple courses, this was a time-consuming and cumbersome process. Being able to group courses together and only go through the enrollment workflow once would save time and improve user satisfaction.

Report

Because the courses grouped together are related, instructors wanted to see learner metrics at an aggregate level rather than looking at each individual course. This would help instructors gauge and analyze their team's progress.

Define User Needs

Starting from the existing problem breakdown into Organize, Enroll, and Report, I worked with a PM and Engineering Lead to define the basic user needs that would define the MVP of this feature. The two main users of the product feature (Instructor/Sales Manager and Learner/Sales Rep) had different scenarios that both needed to be addressed in the MVP.

Course Instructor

As a Course Instructor, I want to…
• Ensure that a learner has completed an entire set of courses in a learning path so I know they have achieved the learning expectations I set for them
• Add, remove, or change the order of courses from a learning path so I can adjust requirements over time
• Name and add image/description to a learning path so learners understand what it’s about, expectations, and are excited to take it
• Be able to enroll learners and evict a learner from a Learning Path
• Know how learners are progressing in the learning path so I can encourage them to finish it
• Report on aspects of the learning paths so I can see how effective learners are at completing them
• Enable other users to administer a learning path so I don’t have to be the only one responsible for it

Learner

As a Learner, I want to…
• Find the learning paths I am enrolled in easily so I can continue my work
• Understand that a course I am taking is part of a learning path so I have appropriate context and can refer back to the learning path itself as needed
• Understand my progress in a learning path so I can dedicate more/less time to its completion
• Avoid having to redo courses I have passed that happen to exist in more than one learning path that I am taking

Information Architecture

To determine the best IA for learning paths and their corresponding certifications, I explored different options for structuring these items within the existing platform. For each option I evaluated the pros and cons, looking at criteria such as functional complexity, technical feasibility, scalability, competitor solutions, and ease of use for both instructors and learners.

We determined the most optimal solution was to structure certifications as an "add-on" to learning paths, rather than them being two separate items or two versions of the same item.
‍

Solution

The completed Learning Path feature enabled sales team managers to group together courses into one curriculum, enroll their entire team into the curriculum at once, and track and monitor learner progress at the curriculum level.

Create New Training Modal

To align with users' mental map of the product, the new Learning Path feature was included in the existing "create new training" modal along with a description to ensure users understood its purpose within the Lesson → Course → Learning Path structure.

Instructor View

When instructors view the learning path overview page, they are presented with relevant metrics to monitor learner progress both at the learning path level and granularly at the course level. This helps users see what content resonates best with learners and easily identify areas where learners may be struggling.

Learner View: In Progress

When viewing a learning path overview as an in progress learner, the main use of the page is to monitor your progress. Progress bars at both the learning path and course levels help learners visualize and understand their progress.

Learner View: Completed

Once a learning path is completed, the main goal for learners who visit the learning path overview page is to see their individual course scores and quickly verify completion. A banner with a celebratory icon at the top of the page also provides user delight and helps learners feel proud of their accomplishment.

Design Details

Below are some specific details about various design decisions made as part of this project.

Learning Path Creation Modal

When creating a new learning path, the only technical requirements are for users to give their learning path a name and designate where it should be saved. However, internal research indicated that learning paths with an image and description were more likely to be selected by learners. To try to set users up for success, those fields were also included in the initial creation modal, but labelled as optional fields to ensure the workflow works for all users.

Empty States

All the pages and sections I designed included an empty state design to ensure that users knew the next step they should take to proceed and were not confused why they were viewing a blank page.

Course States for Instructors

There were over 20 different states a course could be in that affected learner access to it - for both learner and instructor views, on all device types, I designed consistently styled variants of the course bar. This ensured that users knew if there was an issue with the course they needed to resolve, especially if it was blocking learners from progressing.

Guiding Learners

When learners view the learning path overview page, I included clear action buttons to help them understand what tasks they needed to complete on the page. The action button for each course changes as users progress through the course, evolving from "Start Course" to "Continue Course" to eventually viewing the course results. This also helped learners see what actions they could take when scanning a long list of their courses.

Communicating Final States

There were various final states a learner could reach within a learning path: Completed, Incomplete, Certified and Failed Certification. To ensure learners knew their state and how they reached that state, I visualized this information using message banners, a status badge, and individual course statuses. This helped learners see how their various course scores combined to generate the overall learning path score.

Result

Using the new Learning Path feature, sales leaders can design a curriculum and enroll their teams in multiple courses at once rather than manually enrolling sales reps in each individual course. The average learning path has 8 courses, meaning the average user can complete their workflow 8x faster.

In 6 months after implementing Learning Paths, 40% of existing customers were using the new feature.

This also closed a major competitive gap, with 100% of Highspot's top 3 competitors offering a similar feature.