Onboarding @ Codecademy

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.

My role for this project focused on mid-to-late stages of the design process. Interested in how I do research and ideation? Check out my other case study! If you'd like the password, get in touch.

---

Release 1: Redesigning Onboarding

The Goal

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.

Identifying User Needs

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.

• The first group includes beginners interested in broadly "learning to code" - but may not know where to begin and need guidance.
• The second includes learners who are more experienced and/or have specific outcomes in mind - and want to jump into their intended material as fast as possible.

Translating User Needs into User Actions

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".

Collaborating on Copy

As I mocked high-fidelity flows, I continuously checked in with marketing to ensure the copy was welcoming, easy-to-understand, and streamlined.

Navigation System

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.

Learning Recommendations

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.

Accounting for mobile edge cases

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.

---

Release 2: Expanding on the Exploration Option

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.

---

Release 3: Onboarding from all Sign-up Points!

Documenting Existing Flows

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.

"But I already know what I want to learn!"

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.

My Solution

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.

Explore more of my product design work!

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!