Interactive Courses on Pluralsight
Pluralsight is a technology education platform that was founded in 2009. Pluralsight built a successful video content library with the world's top experts, but learners were missing opportunities for practice and application. Through human-centered design, our cross-functional team introduced interactive, hands-on learning to the video library providing practice opportunities for learners.
Overview
Services
Qualitative and quantitative research, UI/UX design, instructional design, usability testing, illustration, product marketing, strategy
Team
Product Manager, Product Designer (yours truly), and 5 software engineers
History
Our product team initially worked at Code School, but this project was the first integration phase after Pluralsight's acquisition of Code School in 2015.
Problem
Pluralsight's technology learning platform hosts an impressive library of video content, but learners were craving something more than passive learning. Technologists need opportunities to practice and apply the skills they are learning, so Pluralsight's acquisition of Code School was the perfect opportunity to bring Code School's interactive learning ethos into the product.
Play, pause, code, repeat
Our first step was conducting 1:1 interviews with learners to understand how they practice and apply the skills they learn on Pluralsight. We talked to both engaged and disengaged learners to understand their successes and pain points.
The most common behavioral pattern we discovered is play, pause, code, repeat. Learners would set up two monitors— one with the video course and the other with a local development environment. This requires the installation of a text editor and the technologies being taught. The learner would then watch 2-5 minutes of video content, pause, and then replicate the author's demonstration on their own. Learners would repeat until the video course was completed, but our team knew we could provide something better. We crafted an envisioned journey map to hypothesize an ideal learning journey.
Research summary
Our team conducted 42 discovery calls, analyzed NPS data, and built quantitative surveys to understand our learners and personas. Discovery calls consisted of VOCs (voice of the customer), to understand the current learning journey, and CPTs (customer preference test) to validate our hypotheses through prototype observation.
Content Tile | Hands-on Learning
Shading some gradients, throwin' some shadows, and bringin' out the blues for this content tile illustration to represent the hands-on learning formats in Pluralsight.
Research summary
Our team conducted 42 discovery calls, analyzed NPS data, and built quantitative surveys to understand our learners and personas. Discovery calls consisted of VOCs (voice of the customer), to understand the current learning journey, and CPTs (customer preference test) to validate our hypotheses through prototype observation.
The build
Learning loops
I partnered with instructional design experts to craft effective learning loops within the experience. Interactive Courses start with an author led tutorial that features visual examples and demons followed by in-browser coding challenges for practicing concepts.
A real-world workspace
The in-browser code editor features a robust experience for technologists of any skill level and includes syntax highlighting, Intellisense/autocomplete, and customization options. The file tree allows learners to manage, view, and work with multiple code files within the challenge, while the live preview shows exactly what the code is doing.
Guided feedback
Each code challenge is backed with unit tests that anticipate any mistake a learner may encounter. This allowed us to provide real-time, targeted feedback to guide the learner through challenges.
Celebration and progress
It was important that the overall course design emphasized the learner's accomplishments and progress, so I designed a system of success states and animations. Our goal was to maintain some of the fun and delightful experiences of Code School.
Code Challenge | Animation Flow
Some fun UI animation ideas for Interactive Courses, our interactive, hands-on experience for learning how to code!
Launch and results
I worked closely with Product Marketing to determine pricing and packaging, create product messaging and communications, build marketing videos and materials, and prepare for the product unveiling at Pluralsight Live, our first live conference event.
Interactive Courses were 2.97x more engaging than passive learning through video content. This means that learners were more likely to engage with other content on the platform to continue their learning journey. Interactive Courses had an average completion rate of ~45% (arithmetic mean) as compared to the 6% average completion rate for video courses.
This project was a huge learning opportunity for me, because it helped me gain skills outside of UI/UX design that were more holistic to product development (strategy, product marketing, research). I couldn't have asked for a more talented cross-functional team to work with and seeing the response from learners has been incredibly inspiring.
In-browser Code Editor
How do you like your code editors and apps, light ☀️ or dark 🌑?