Codecademy

Jun '18 - Sep '19 · Product design

From summer of 2018 until September 2019, I was a product designer on Codecademy's design team. I collaborated closely with product managers, engineers, curriculum developers and other designers to bring new features into production.

I also worked within Codecademy's growing design system, at a time when our team began to consolidate design patterns and styles. Here are a few projects I worked on:


Onboarding

Onboarding releases

Over the course of several months, I supported designs of Codecademy's new onboarding experience, across various releases.

My role: A product designer, focusing on mid to late stages of this project.
Collaborators: Product manager, marketing, curriculum designers, engineers, designers


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 (which was the initiative of the more senior designer I collaborated with), my team gathered that there are two main groups of new users who come to Codecademy. The first group encompasses beginners who need guidance, are interested in "learning to code" but may not know where to begin. The second group includes learners are more experienced, have specific outcomes in mind, and may want to jump into their intended material as fast as possible.

cc-onboarding-welcome

Translating User Needs into User Actions

Accordingly, I collaborated with the designer, product managers, and marketing, and curriculum stakeholders to mock an onboarding experience that focuses on accomodating 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 that notes their interests and learning style - giving them a personalized recommendation while also helping Codecademy better understand its learners. In the first version of this onboarding experience, the learner could click "I want to explore on my own" to explore the catalog.

cc-onboarding-flow

Collaborating on Copy

As I mocked the flow at higher fidelities, I made sure to continuously check in with marketing team members to ensure the copy was welcoming, easy to understand, and as streamlined as possible.

I also created a navigation system that mirrored other types of navigation on the platform, giving users a sense of completion through the questionnaire and a means to return to previous answers by clicking on completed question numbers.

Learning Recommendations

When the learner completes the questionnaire, they are given two custom recommendations based on their interests. 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 who complete this questionnaire on a mobile device, our team created special logic make it clear to visit a desktop computer for the best learning experience on Codecademy's website, while also encouraging them to download Codecademy's companion mobile app if they want to dive into learning immediately.

onboarding-mobile-flow


Release 2: Expanding on the Exploration Option

In a later release, we updated the "I want to explore on my own" option to direct to a course search, instead of the course catalog. We hoped to better cater to the user need of finding a specific topic or language they had in mind.

Release 2 with search

While the team had just released a general search experience for the platform, my design work incorporated this search functionality into the narrative of onboarding. Creating an onboarding-version of search also let us surface popular recommendations to orient the new learner to our offerings.




Release 3: Onboarding from all Sign-up Points!

Problem

At the time, there were four main ways you could sign up on Codecademy. However, onboarding was only delivered in two of them. Because we were using onboarding to segment users, there was a large need from marketing to onboard all new learners. How could I adapt onboarding for all sign-up points, balancing company and learner needs?



Documenting Existing Flows

I first documented all possible signup flows (including flows that took into consideration future product launches that affect signup), noting how onboarding fit, or could fit, in.

I learned that reason why onboarding wasn't served in the two cases of signing up while creating a Pro membership - it was because of a conflicting Pro "onboarding" that introduced benefits of the membership. Our team thought this info was redundant, and saw an opportunity to replace it with our improved onboarding experience.

Onboarding documented flows

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

Onboarding versions

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.

Onboarding Proposed Flows

Because the questionnaire no longer generates a recommendation, it's presented as a process that helps personalize their Codecademy learning journey. My team noted a future opportunity to use the questionnaire to customize other aspects of the learner experience - although it was not part of this immediate release.

onboarding-all-entry-pt


Landing Pages

I also designed several landing pages for Codecademy features. Each required close collaboration with members of other departments, like marketing, customer support, and our community ambassadors in order to communicate key benefits, highlight powerful testimonials, and draw attention to call-to-actions in an accessible, friendly voice.

Community @ Codecademy

In spring 2019, Codecademy had several separate learner communities, spread across its forums, Facebook group, and Pro Lifelong Learner Community (currently hosted on Mobilize.io, and at the time on Slack).

I collaborated with a product manager, another designer, and the Codecademy community manager to bring more visibility to our learner communities, guided by existing findings these spaces allow learners to help each other out, share projects and ideas, develop comraderie while going through challenging material, and later, support each other in their careers.

To bring visibility to community offerings, we landed on creating a section in our dashboard to highlight all community spaces (forums, Facebook, and the Pro Lifelong Learner Community).

We decided to create a landing page focused on the Pro Lifelong Learner Community, bringing visibility to a platform otherwise only advertised to Pro members via a Customer.io notification. A link to this landing page is shown to learners on the free plan as a way to upsell the benefits of Codecademy Pro and its moderated, highly active community. For Pro learners, this link is replaced with a link that directly allows them to join the community.

Codecademy for Business

Towards the end of my time at Codecademy, I also designed a landing page for enterprise Codecademy plans - a process that was previously handled in an ad-hoc way through the customer support page.

My goal was to design a discoverable landing page that could serve as a central hub for teams to learn about Codecademy business plans and their unique benefits, as well as provide interested users a way to request a quote for their companies.

I also collaborated with product managers and stakeholders to discuss and mock-up different potential entry points for discovering enterprise options - bringing into discussion how enterprise plans might fit into our product ecosystem long-term. We eventually landed on adding a link at the bottom of the site footer as well as modifying our pricing page at the time to refer to enterprise memberships.

Learn more

I worked on many other projects at Codecademy - if you'd like to learn more about my work experience, get in touch!