We’ve been working hard over the past four months trying to reimagine Codecademy and we couldn’t be happier to finally unveil it to the world. We have redefined every component under our brand, from a single button on our dashboard to our email template, business cards, slides and even apparel.
We had been discussing a design refresh for a while, but somehow it always ended up being pushed to the side. Finally, in October last year, after completing a user segmentation project that brought to live the main user archetypes of Codecademy.com, it quickly became apparent that if we wanted to grow and mature as a brand, we required a thorough redesign of our entire product.
Why a redesign?
Reason #1 – Start fresh
First, there was the obvious problem of design incoherence and variation. This happened primarily because we lacked a well-defined color and font palette, a uniform visual language for our badges, a unified layout scheme (page types), and a cohesive strategy for all print materials – business cards, postcards, posters, etc. After two and a half years of multiple nip and tuck design fixes and additions, it was time to clean up the house and start fresh. This meant we could finally create an extensible UI pattern library (used and shared by designers and developers) and optimize our new face across multiple platforms by embracing a responsive design layout.
A random sampling of pages within our old web ecosystem, showcasing some visual design inconsistency.
Reason #2 – Brand matureness
Secondly, was the realization that our young startup look and feel was slowly becoming incompatible with our future goals and aspirations. In a time when we are engaged in several partnerships with schools, companies, and governments across the globe, while also continuing to fulfill the needs of our growing user base, our brand should feel a bit more mature, inviting, professional, and sophisticated.
Codecademy’s quirky and undistinguished old logo was created by one of our co-founders in a few minutes by browsing through various fonts in a word processor. The logo featured the giddy lobster font, which has become so popular that is at times compared with Microsoft’s Comic Sans.
Our new look
Phase 1
Back in early November last year, we partnered with our friend Eddie Opara, and his immensely talented team of designers at Pentagram, in order to create a new visual identity that could better reflect the company’s age, ambition, and main attributes.
The first thing we tackled was the logo, as the key centerpiece of our new look. We spent some time talking to our users, colleagues, and our founders Zach and Ryan, to have a solid grasp of Codecademy’s perception and future aspirations. After this important research period, we went through several revisions, continuously narrowing down on the mark that best represented our main traits.
While putting the finishing touches to our new logo, we began creating a complementary color, font and iconography palette. It was important to handle all these components simultaneously, so we could delineate a consistent design thread through all of them. Phase 1 gave us the most critical building blocks of our new brand, through our partnership with Pentagram, and marked the beginning of an exclusive in-house development period.
Various early directions for our new logo.
Narrowing down on a few favorite visual marks.
Our final logo with its underlying grid.
Our new graphical language used across the site to indicate different types of content (symbols), actions and controls (icons), and learning achievements (badges).
FF DIN Rounded – Our primary typeface.
Our new color palette.
Phase 2
After defining the main brand pieces with Pentagram (logo, typography, iconography, color), we started applying it internally to our entire web ecosystem by building a comprehensive number of reusable design patterns. For two weeks we built a sizable UI toolkit covering a variety of elements (see below).
Our first attempt at the UI toolkit encompassing only a short amount of elements.
Our growing UI toolkit covering every element, such as header, footer, form fields, button styles, sign up modules, grid, padding, typography, colors, and interactions.
Phase 3
This was the longest, and perhaps most exhausting, of all phases, where we redesigned 70+ webpages in tandem with other collateral material (email templates, slides, apparel, etc). Fortunately, we imposed ourselves a very well defined timeline, with multiple cycles and milestones, which helped us guide through this large task (see sitemap below).
First, we created a comprehensive sitemap of Codecademy.com and then divided the sitemap into four groups, each representing a 2-week delivery cycle. As we redesigned the various pages in each cycle, our brilliant team of developers built our UI styleguide and constructed many of the pages based on the shared design patterns.
Examples of our redesigned pages, from left to right: Enterprise, Stories, Profile.
Examples of our redesigned pages, from left to right: Blog, About, Jobs.
Examples of our redesigned pages, from left to right: Help Center, UK Curriculum, Hour of Code.
Phase 4
Our final phase was all about making sure we were building the thing right. We implemented and tested our new redesign, while in the process getting feedback from our community. We created a huge amount of redlines for all the new material, started experimenting with some versions live on the site, and listened to dozens of comments from our selected users and moderators.
An example of the various comps created to support the accurate implementation of all our redesigned pages.
The beginning
Even though we spent a long time rethinking Codecademy, this hefty work is still unfinished. It certainly provides our team and product with a much-needed fresh face, one that we can feel proud of, and most importantly, one that our users can thoroughly enjoy. But this is just the beginning. We would love to hear what you have to say about our redesign and how we can continue improving our product. We have dozens of ideas to continue pushing this brand foreword. Please keep coming back for more!
