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

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

My role: A product designer, supported by a more senior designer during earlier 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 (rather than the course catalog). We hoped to better cater to the user need of finding a specific topic or language they had in mind.

search-onboarding-animation

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.

Release 3: Onboarding from all Sign-up Points

Background

On Codecademy, there are several different places a new user can sign up: the homepage, the navigation bar, the learning environment, and path landing pages. In the previous releases, only new users who signed up via the homepage were delivered an onboarding experience.

There was a major opportunity to bring all users through onboarding - not just those who sign up through the homepage. My contribution was in thoroughly documenting all of these extraneous flows (some of which involved payment and/or took into consideration future product launches that affect signup) and proposing how onboarding might be incorporated into them.

The Problem

Giving a recommendation makes sense for learners who sign up from the homepage - but how could our onboarding be framed for learners who sign up from a course or path page, i.e., those who already know what they want to learn?

While learners who want to jump into a course probably don't need a recommendation, there were still user and business benefits to capturing interests of new users when they join the platform.

onboarding-all-entry-pt

My Solution

I designed an alternate onboarding experience for learners eager to dive into courses. This version presents the same questionaire, but focuses the momentum on getting them to jump into the learning environment for their subject as soon as possible. As they are not immediately given a recommendation, the questionaire is presented as a process that helps personalize their Codecademy learning journey.

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!