Building a Brand & Design System

A Codecademy Case Study

Between 2016 and 2018, Codecademy’s team and product line doubled. We had evolved from a team of 20 teaching a few million learners how to code for free to a 50 person team teaching tens of millions of learners with both free and paid product lines.

We had a few rules we never broke during that change — always be focused on the learning experience, never reduce our global accessibility, and generate revenue in ways that help us achieve our mission of teaching people the skills they need to improve their careers and lives.

As we grew many of the existing UI patterns and brand materials began to break and required a dedicated work effort in order for us to continue to scale. The following case study outlines the Codecademy revamp, including a brand refresh and UI design system creation, that I led from fall 2017 until the launch in spring 2018.

Scope & Direction

We agreed that the Codecademy revamp would be measured in the following three ways, each representing a key driver for the company:

1. Growth: Drive revenue through improved creative for advertising and marketing.
2. Speed: Increase speed of design and development process through a single source of truth in codebase used by both design and engineering.
3. Educational results: Increase learning retention through improved interactions and UI components.

Next we determined the scope of the revamp:

Off-the-shelf or custom? We considered using off-the-shelf systems like Material Design, but concluded that our learning/teaching interactions and feedback mechanisms required a custom solution.

Rebrand or refresh the brand? It had been four years since our original branding was developed with Pentagram. The brand guide had limited coverage for our new marketing and advertising needs, but the logo and core approach were still delivering. Therefore, we decided to refresh and extend the original brand with the help of Gander, a branding studio.

Phase I: Research & Analysis

The first step was to conduct the research needed to gather key insights around how we should approach the brand refresh and UI design system. To do this, I assembled a team including the branding studio Gander, my design team along with a new design contractor, a few engineers, and a behavioral scientist. We organized the research efforts into four into distinct groups (see below), working in parallel on each.

1. Brand Research: We conducted interviews with the Codecademy team and surveyed our learners. This, paired with purchase and behavioral product data gave us a clear picture of how our team and learners currently perceived the brand.
2. Existing Product Audit: We documented the biggest learner reported issues, as well as known inconstancies and breakdowns in the learner journey. We then inventoried what engineers used in production vs. what designers used in sketch to map the existing gaps and inconsistencies.
3. Future Audit: We outlined the next five years of desired new products and then developed concrete stories about how our learners would use them. From this, we identified the core interactions and UI components required to ensure the new UI design system would be future proof.
4. Educational Audit: The behavioral scientist conducted an analysis of our existing learning product to gain a comprehensive understanding of its current state. This gave us key insights and data into how we could improve the learning environment to increase completion rates and learning efficacy.

We used a shared Sketch file to compile the audit of the different UI and brand assets we had organically built over the years.

Research Conclusions

We organized the conclusions and findings into two buckets, Brand and UI Design System. This helped to focus the two teams I was directing moving forward on this project — the Branding Team and the UI Design System Team.

Codecademy’s brand needed to:

• Shift from a beginner’s coding resource to a professional career advancement solution, while maintaining it’s global position as the first and best resource for every code curious person.
• Allow for multiple sub-brands including Codecademy Pro and Codecademy Intensives
• Support Codecademy’s expansion into paid advertising and marketing campaigns

Codecademy’s UI Design System needed to:

• Systematize the Codecademy teaching method into UI components and interaction models that can scale to new platforms and domains such as data science and machine learning.
• Cover current and future UI needs including marketing flows, core feature sets, and R&D experimentation work.
• Allow for constant evolution by the the engineering and design teams.

Phase II: Development

We worked with the entire Codecademy team to create brand and system pillars. From there, we began work on the following brand direction and visual elements.

Brand Development

We explored three distinct visual directions with Gander. Once we aligned on a direction, we developed color, typography, graphics, photography, and animation. The UI Design System team worked collaboratively with Gander to test how the brand could live within the new UI Design System.

One of the biggest branding challenges was to find ways to make the technical and complex nature of code approachable. To achieve this, we arrived at a graphic system using expressive colors, simple geometric shapes, and looping animations that allowed us to make the complex simple and captivating.

UI Design System Development

The Codecademy product was primarily an education tool — that meant that the new UI Design System needed to be accessible and functional, while reflecting the brand refresh. To do this we developed a flexible system of primary and secondary components and visual elements.

Phase III: Testing

Once we had the Brand Guidelines and initial UI Design System built in Storybook (the React component library used by engineering), product designers and engineers began using elements for current projects. This allowed us to test the UI Design System across the following three environments:

1. Product Tests

We used the branding and UI Design System work to revamp our core Learning Product. This gave us an opportunity to apply the new UI and branding to our most important product to test for usability and accessibility. These tests resulted in final adjustments to typography and color.

2. Ad Tests

We compared the new brand creative to current creative on Facebook ads. The new brand creative out-performed control, so we shifted efforts to test different applications of the refreshed brand creative such as motion vs static, graphics vs. photography, and messaging variations.

3. Marketing Page Tests

We created marketing page prototypes using the new branding and UI Design System to get valuable feedback from current and potential users.

Phase IV: Launch

In the spring of 2018 we used the updated brand creative and UI Design System to launch a new global website, ad campaign, and a mobile product, which doubled paid signups.