Winter '19 - Spring '19 · Product design
From June 2018 to September 2019, I was a product designer on Codecademy's design team, bringing new features into production - all while working within Codecademy's growing design system.
Over the course of several months, I supported designs of Codecademy's new onboarding experience, across three different feature releases.
I collaborated with a product manager, coworkers in marketing, curriculum and engineering, and another product designer who focused on initial research and ideation for this project.
Improve upon the company's first version of onboarding, by better orienting new learners to Codecademy's offerings - as well as serving business needs of capturing data for segmentation, persona targeting and personalization.
In the user research stage (the responsibility of the more senior designer I collaborated with), my team identified two main groups of new Codecademy users.
Accordingly, I collaborated with the other designer, product managers, and marketing, and curriculum stakeholders to mock an onboarding experience that accomodates both learner types: one who needs a recommendation, and one who is more self-guided. We also kept a persistent option to skip onboarding and jump into the platform.
By clicking "Give me a custom recommendation", a learner can complete a questionaire for their interests and learning style. The questionnaire produces a personalized recommendation, while also helping Codecademy better understand its learners. In the first version of this onboarding experience, the learner can explore the catalog by clicking on "I want to explore on my own".
As I mocked high-fidelity flows, I continuously checked in with marketing to ensure the copy was welcoming, easy-to-understand, and streamlined.
I also created a navigation system that mirrored navigation elsewhere on the platform, giving users a sense of completion and a means to return to previous answers by clicking on the numbers of completed questions.
After completing the questionnaire, the learner is given two custom recommendations. They are first recommended a Path, a more long-term curriculum offering, aligned with higher levels of engagement.
For users signing up on a mobile device, our team created special logic to communicate that they should continue on desktop for the best learning experience (our platform is not optimized for mobile).
We also saw this as an opportunity to also encourage new learners to download Codecademy's companion mobile app if they're itching to learn ASAP.
In a later release, we routed "I want to explore on my own" to a course search feature - instead of the course catalog. We hoped to better cater to the users who wanted to find a specific topic or language in mind.
While the team had just released a general search experience for Codecademy, my designs incorporated this functionality into the narrative of onboarding. Creating an onboarding-version of search also allowed us to orient the new learner with our popular, suggested offerinigs.
At the time, there were four main ways you could sign up - but onboarding was only delivered in two of them! Because we were using onboarding to segment users, there was a large marketing need to onboard all new learners. How could I adapt onboarding for all sign-up points, balancing company and learner needs?
I first documented all possible signup flows (including ones that considered future product launches affecting signup), noting how onboarding fits - or could fit - in.
I learned why onboarding wasn't served in those two cases of signing up while creating a Pro membership - it was because of a conflicting, Pro "onboarding" introducing membership benefits.
Our team thought this info was redundant and didn't add value. We saw it as an opportunity to replace it with our improved onboarding experience.
Our onboarding flow centered around finding something to learn. This made sense for learners who sign up from general points in the site - but how could onboarding be framed for learners who sign up from a course or path page: in other words, those who already know what they want to learn? In existing flows, a learner who signed up from a course still was brought to get a recommendation - which was dissonant with their need to jump right into learning.
I designed an alternate onboarding experience for learners who sign up with intent to dive into courses or paths. This version presents the same questionnaire, but with the momentum of getting learners to jump into the learning environment for their selected subject as soon as possible.
Because the questionnaire no longer generates a recommendation, it's presented as a process to personalize their Codecademy learning journey. Although not part of this immediate release, my team saw future opportunities to use this to customize other aspects of the learner experience.
This isn't the only product design work I've done for Codecademy! I have another case study, this time focused more on research, ideation, and low-fi prototyping. Get in touch if you'd like the password!