Overview

Problem

The course landing pages serve as a crucial entry point for prospective learners, but they lacked critical information, leading to user hesitation and lower sign-up rates. Additionally, the absence of optimized SEO elements limited our ability to attract organic traffic, which placed us at a competitive disadvantage.

Goal

Redesign and implement an updated course landing page template for over 480 courses, improving clarity for users, SEO, and overall sign up and enrollment rates.

Outcome

The redesign led to a significant increase in sign-ups, free trial starts, and code submissions. As a designer, I also measured success by how effectively the new design allowed learners to find relevant details and make more informed decisions, while also aligning with our business goals of increased conversion and engagement.

Problem

The course landing pages serve as a crucial entry point for prospective learners, but they lacked critical information, leading to user hesitation and lower sign-up rates. Additionally, the absence of optimized SEO elements limited our ability to attract organic traffic, which placed us at a competitive disadvantage.

Goal

Redesign and implement an updated course landing page template for over 480 courses, improving clarity for users, SEO, and overall sign up and enrollment rates.

Outcome

The redesign led to a significant increase in sign-ups, free trial starts, and code submissions. As a designer, I also measured success by how effectively the new design allowed learners to find relevant details and make more informed decisions, while also aligning with our business goals of increased conversion and engagement.

Research & Discovery

The project kicked off with an in-depth review of prior research, as well as conducting a competitive audit to familiarize myself with the existing landscape.

Prior to joining the project, another product squad had performed a usability study on the current course landing page, which uncovered that prospective users had lingering questions before committing:

1

1

1

1

How much will it cost me?

2

2

2

2

Does this match my learning style?

3

3

3

3

Is it reputable and has it been well-received by others?

4

4

4

4

Will it enable me to have the outputs I want?

Previous design

Brainstorm workshop

Brainstorming workshop

To kickoff the project, I ran a full-day brainstorming workshop with product, engineering, and stakeholders.

In preparation, I summarized the research and analytics into slides for easy consumption for the cross-functional team. Additionally, I converted the core pain points into How Might We (HMW) statements to guide our ideation exercises.

1

1

1

HMW provide visibility into the learning style of the course?

2

2

2

HMW promote trustworthiness and credibility of the course so that users feel secure and confident signing up?

3

3

3

HMW help users understand the tangible outputs of the course?

Brainstorming workshop

To kickoff the project, I ran a full-day brainstorming workshop with product, engineering, and stakeholders.

In preparation, I summarized the research and analytics into slides for easy consumption for the cross-functional team. Additionally, I converted the core pain points into How Might We (HMW) statements to guide our ideation exercises.

HMWs
HMWs

1

1

HMW provide visibility into the learning style of the course?

2

2

HMW promote trustworthiness and credibility of the course so that users feel secure and confident signing up?

3

3

HMW help users understand the tangible outputs of the course?

The ideation portion consisted of lightning demos and crazy 8s for each HMW.

Short-term vs. long-term strategy

The brainstorm generated insights that helped us identify essential elements. I organized key ideas into themes, and then we (product, design, engineering) created an impact-effort matrix to help prioritize ideas into must-haves, nice-to-haves, and moonshots.
The goal for a v1 was to create a baseline template with updated hierarchy, structure, and visual design, maintaining the same data as the current page.
Post-launch, we planned to iterate with larger features, such as ratings and reviews for a greater impact and an optimal learner experience.

Structure & hierarchy

After prioritizing requirements, the next step was to define the structure and hierarchy of the page.

We held a stakeholder review to align on the proposed structure, communicate dependencies, and to display the flexibility of the new page that would allow for future experimentation.

Hierarchy of the page was according to information that proved to be most important to learners based on the aforementioned usability study and other research:

After prioritizing requirements, the next step was to define the structure and hierarchy of the page.

We held a stakeholder review to align on the proposed structure, communicate dependencies, and to display the flexibility of the new page that would allow for future experimentation.

Hierarchy of the page was according to information that proved to be most important to learners based on the aforementioned usability study and other research:

1

1

1

1

Certificate of completion

2

2

2

2

Skill level

3

3

3

3

Price

4

4

4

4

Course format

5

5

5

5

Social proof (reviews, testimonials, etc.)

Proposed structure v1

Future experimentation

Proposed structure v1

Future experimentation

Proposed structure v1

Future experimentation

Proposed structure v1

Future experimentation

Design concepting

After alignment, I began working on higher-fidelity concepts for the template. I first gathered existing elements or components we had from other designs, such as the syllabus, and determined what we would be able to reuse or adapt for our needs.

Given content can vary per course, the template needed to be flexible, while also remaining scannable for lengthier courses.

This also gave us an opportunity to rethink our content strategy for courses in general, and work with the Curriculum team to identify areas where information is superfluous.

I explored various ideas for how to display metadata, as well as large chunks of information. For example, I explored a vertical chart vs. a horizontal display of metadata.

During this time, I also began to collaborate with our UX Writer to address copy needs outside of the curriculum content.

Usability test

Once confident in the organization of metadata and content, I conducted a usability test, hypothesizing that learners would prefer the new variant for its information and visual appeal.

The objective was to identify any issues with the layout, structure, and flow before launching an A/B test.

Findings

1

1

1

1

Metadata bar provided valuable information.

2

2

2

2

Course overview section was well-received and aided in identifying if the course was 'right for them.'

3

3

3

3

Testimonials generated excitement.

Opportunities

1

1

1

1

Prospective customers are still guessing the format of our courses.

2

2

2

2

Some confusion was caused by Pro labels in the syllabus & the upsell section.

3

3

3

3

The projects & testimonials section were often scrolled over.

Updates based on usability test

Updates based on usability test

Updates based on usability test

1

1

1

1

Removed the upgrade CTA from upsell, but kept the pricing page CTA, so that learners would be driven to the pricing page instead of checkout.

2

2

2

2

Removed plan-specific messaging from the upsell.

3

3

3

3

Added a module with a gif of our LE to provide learners insight into the format of our courses.

Concept refinement

I shared the usability results and updated designs with stakeholders. I then worked on refining visual design, which included exploring solutions for truncation states, edge cases, and breakpoints.

In addition, there was ongoing work across squads to revamp other related areas of the site (i.e., career paths, skill paths, catalog). Therefore, a core aspect of this project involved bringing visual uniformity across our anonymous experience, while still retaining a sense of distinction between each container type.

To accomplish this, I looped in the other designers and we brainstormed how we might look at these components and color usage across a broader array of our courses and path pages.

Experiment #1

Experiment #1

Experiment #1

We decided to build these pages in Unbounce first to help give us signal before building these pages in production.

If we were able to achieve parity with the current design (or increase our metrics), then we would have confidence to launch the page on-platform.

I created the pages in Unbounce and launched the experiment with 5 of our most popular courses: HTML, JavaScript, SQL, Java, Python 3.

These pages were optimized for mobile as well.

Experiment #1

Results

Results

-6%

-6%

decrease in sign up rate

Experiment #2

Experiment #2

Experiment #2

Based on the data, we had a few hypotheses on why the experiment saw a decline. I quickly made tweaks in Unbounce to test a new iteration.

We also received results from the ongoing surveys around metadata and social proof conducted by our UX research team, which helped inform the hypotheses around why there was underperformance.

Results

Results

+5%

+5%

increase in sign up rate

Experiment #3

Experiment #3

Experiment #3

Now that we saw positive results, we decided to conduct one additional experiment to evaluate the impact of reverting the primary CTA from “Start free course” back to “Start.” This would help us determine if the new phrasing, “Start free course,” had influenced performance.

It turns out that “Start” was a more preferable option for learners.

Now that we saw positive results, we decided to conduct one additional experiment to evaluate the impact of reverting the primary CTA from “Start free course” back to “Start.” This would help us determine if the new phrasing, “Start free course,” had influenced performance.

It turns out that “Start” was a more preferable option for learners.

Now that we saw positive results, we decided to conduct one additional experiment to evaluate the impact of reverting the primary CTA from “Start free course” back to “Start.” This would help us determine if the new phrasing, “Start free course,” had influenced performance.

It turns out that “Start” was a more preferable option for learners.

Now that we saw positive results, we decided to conduct one additional experiment to evaluate the impact of reverting the primary CTA from “Start free course” back to “Start.” This would help us determine if the new phrasing, “Start free course,” had influenced performance.

It turns out that “Start” was a more preferable option for learners.

Experiment #3

Results

Results

+10%

+10%

increase in sign up & user submits

increase in sign up rate

Components & Specs

Given the 'templatized' nature of the project, it was important to create page-level figma components, a componetized template, as well as have structured guidelines.

This would not only make it easier for reusing these components across other container types, but provide engineering a solid foundation for the components and data necessary for these templates.

Final specs for v1 included 7 different breakpoints, truncation/overflow states, and prototypes for various interactions and states.

Additionally, I always like to record a Loom walkthrough of the specs for engineering, as well as have a live handoff session to address any questions.

Launch

Given that we had signal that the new design will not decrease our metrics, we felt confident building and releasing the page in production to 100%.

The next steps would be to do a pre/post analysis and then continue iterating and adding features and content to the page. Stay tuned for another case study on the next phase.

Impact

↑ 10%

Sign up rate

↑ 27%

Trial starts

↑ 9%

Submits

Codecademy has 85 million learners as of 2024.

Impact

↑ 10%

Sign up rate

↑ 27%

Trial starts

↑ 9%

Submits

Codecademy has 85 million learners as of 2024.

Impact

↑ 10%

Sign up rate

↑ 27%

Trial starts

↑ 9%

Submits

Codecademy has 85 million learners as of 2024.

Impact

↑ 10%

Sign up rate

↑ 27%

Trial starts

↑ 9%

Submits

Codecademy has 85 million learners as of 2024.

Components & Specs

Given the 'templatized' nature of the project, it was important to create page-level figma components, a componetized template, as well as have structured guidelines.

This would not only make it easier for reusing these components across other container types, but provide engineering a solid foundation for the components and data necessary for these templates.

Final specs for v1 included 7 different breakpoints, truncation/overflow states, and prototypes for various interactions and states.

Additionally, I always like to record a Loom walkthrough of the specs for engineering, as well as have a live handoff session to address any questions.

Where we are now

Where we are now

Where we are now

Since launching the redesigned course landing pages, we have run several more experiments, focusing on promoting new features, optimizing metadata displayed, and aligning with our new pricing strategy.

These iterative tests have resulted in a steady increase in both traffic and sign-ups, demonstrating the effectiveness of our approach. We remain committed to further optimizing the landing pages to provide the best possible experience for our learners.

next case study
Growth

Boosting conversion via data-driven experiments

View project

Growth

Boosting conversion via data-driven experiments

View project

Growth

Boosting conversion via data-driven experiments

View project

Growth

Boosting conversion via data-driven experiments

View project

• BACK TO TOP • BACK TO TOP • BACK TO TOP
• BACK TO TOP • BACK TO TOP • BACK TO TOP
• BACK TO TOP • BACK TO TOP • BACK TO TOP
• BACK TO TOP • BACK TO TOP • BACK TO TOP
• BACK TO TOP • BACK TO TOP • BACK TO TOP
• BACK TO TOP • BACK TO TOP • BACK TO TOP

Given the 'templatized' nature of the project, it was important to create page-level figma components, a componetized template, as well as have structured guidelines.

This would not only make it easier for reusing these components across other container types, but provide engineering a solid foundation for the components and data necessary for these templates.

Final specs for v1 included 7 different breakpoints, truncation/overflow states, and prototypes for various interactions and states.

Additionally, I always like to record a Loom walkthrough of the specs for engineering, as well as have a live handoff session to address any questions.

Components & Specs

Components & Specs

Given the 'templatized' nature of the project, it was important to create page-level figma components, a componetized template, as well as have structured guidelines.

This would not only make it easier for reusing these components across other container types, but provide engineering a solid foundation for the components and data necessary for these templates.

Final specs for v1 included 7 different breakpoints, truncation/overflow states, and prototypes for various interactions and states.

Additionally, I always like to record a Loom walkthrough of the specs for engineering, as well as have a live handoff session to address any questions.