Creating an e-learning introductory lesson
Blue Canoe Learning is a Bellevue-based education startup. The Blue Canoe app helps learners with English language pronunciation using the award-winning Color Vowel System–a system that combines physical movement, auditory cues, and visual reinforcement.
My contributions
Reimagined a mobile introductory e-learning lesson that increased completion from 42% to 91%
Evaluated the current experience through usability testing
Aligned the product leadership, engineering, and the education team on a solution
Designed and iterated on the new experience using prototype testing
Problem
How might we increase completion rate of the introductory lesson?
The Blue Canoe app is based on a methodology called the Color Vowel System. The first experience in the app explained the basics of the methodology, but users were not completing it.
Discovery
Observe
The first task was to validate and understand the problem. I found a remote testing service that allowed audio recordings during the session–no small task. Watching the sessions, it quickly became obvious that the introduction was not keeping the users’ attention. The old experience was essentially a passive presentation that the users had to step through. My hypothesis was that users needed an interactive experience.
Define
I read the book Design for How People Learn and listened to a few podcasts. I took my learnings and met with the education team to define exactly what the introduction needed to accomplish. We came away with a 3 item list.
Spelling is not pronunciation in English
Correct stress is essential to being understood
Color Vowels are names for stressed vowel sounds
Next, I put together guidelines to help guide the design process.
Show lesson objectives in advance
Show, don’t tell. Have the learner discover on their own.
Immediately show how the info is useful
Have a gradual learning slope: info, demonstrate, reward, info, ...
Make the learners feel successful
Be ruthless and only show what is absolutely necessary. It’s easier to add more info if testing shows it’s needed. It’s harder to remove later because we can’t tell what’s important.
Iteration and evaluation
I based the core of my design on elements in the Babbel and Duolingo interfaces. I felt these would already be familiar to learners. Based on the feedback in usability testing my iterations included: removing unnecessary screens, changing the actual words in the examples, changing the order of the concepts, and explaining concepts in different ways. Below are a few examples of areas that changed based on prototype testing.
User flow
The final form of the user flow with a focus on the learning cycle: teach a concept, have the learner demonstrate, reward with micro interactions and points.
Prototype
Later version of the prototype–still using my voice for audio prompts
Release and future considerations
Success at release
The feature was released in January 2020. The response from educators was very good and the completion rate went from around 40% to 90%.
Later iteration
After the initial release of the feature, I setup very detailed funnels so we could look at where learners were dropping off. Analysis of this funnel uncovered serious microphone bug on some Android devices. Additionally it showed us that the word “professional” was too difficult for many learners. We fixed the Android bug and switched to a shorter, easier word: “success.”
I also conducted a few moderated usability sessions–digging into the new live experience with learners. The sessions showed us new pain points that didn’t come out in the prototypes: (1) it took too long to receive pronunciation feedback and (2) the language used in the feedback guidance was confusing. We updated the feedback language to be more beginner-friendly and improved the cloud response time by over 1 second.