In 2018, Codecademy updated their brand system to better accommodate the growing platform and represent its diverse user base. I was hired as a brand designer to help the design team test and implement the new branding system. You can read a full case study by my boss, Conor McGlaughlan (VP of Design) here.
My initial objectives at Codecademy focused on building and testing new brand assets against their older counterparts. My job was hands-on, and I quickly gained a practical understanding of how to design using the new style guide. With a firm grasp of the new brand, the fresh ads and landing pages soon outperformed their controls.
The product team began updating the UI design system and asked me to help with the new user onboarding flow. My job was to redesign the homepage using the knowledge gained from building landing pages. I was paired with a Senior Product Designer and joined all of the product design crits throughout the process.
Two goals guided the design process: increase sign-up conversions and introduce users to the new brand style. This would be the first full homepage refresh in almost four years. The current page had been optimized and consistently outperformed contending designs for quite some time. The page needed to be updated to roll out the new brand style, and performance could not be compromised in the process. Based on the success of the ad and landing page tests we had conducted, we were confident that both goals could be achieved.
Early work with the marketing department helped inform the homepage redesign. While working on landing pages, I was paired with a marketing manager and researcher. Together we conducted user interviews to understand why people purchased a "pro-level" course. These learnings applied directly to the new homepage and influenced the design from the beginning. Wireframes were built and reviewed with the product team as we refined the content to be displayed on the page.
Landing page Sketch file
I used the style guide from Gander (left) to make illustrations for Codecademy courses and ads.
One of the key areas I was able to help the product team was in translating the new brand design into UI components. The branding was made with the help of Gander, a branding studio. They did a wonderful job of building out a friendly and robust visual design system for marketing materials. As a brand designer, I was among the first on the team to do a deep dive into the system as I begin building marketing assets. Producing static and dynamic ads taught me to illustrate conceptual ideas, like data science, within the system.
Animation exploration
The design team discussed using these illustrations within the interface as a metaphor for the lessons the users were learning along their path at Codecademy. Working with one of the senior designers, I helped develop illustrations for different courses offered on the user dashboard. During design reviews, we selected illustrations to be used on the homepage to foreshadow learnings the user would earn further down their path.
The page was progressing well through several rounds of internal review with the entire product team. It seemed everyone at the company was excited about the brand refresh and was happy to review the page and provide input. The design team worked together to sort through the internal feedback to produce a version ready for external testing.