Reimagining Codecademy.com

Our 10 Design Principles

We have recently launched a considerable redesign of Codecademy.com, which you can read about in detail in our blog. Now, we would like to take this opportunity to expand on the main design principles that helped us guide through this 3-month undertaking.

Our UI toolkit covering every element, such as header, footer, form fields, button styles, sign up modules, grid, padding, typography, colors, and interactions.

Our 10 Design Principles

#1
One Column

Our notifications page in a single column layout.

Whenever possible, we have constrained our entire content to a single-column layout. This helped us focus on the core purpose of the page, while also giving us more control over our narrative. A one column layout was also easier to implement within our first responsive design system, by minimizing variation between different screens and form factors, such as mobile and tablet.

#2
Social Proof

One of our testimonial cards, used throughout the website.

We never want to be arrogant, pretentious and dull in talking about ourselves, the features we have just launched, or how the product can change your life. In our new redesign we rely more frequently on our users and community to convey the benefits of Codecademy and the impact it had in their lives via quotes and testimonials. You can watch a video of one of our users here.

#3
More Contrast

The use of color within our Dashboard experience — Home for signed in users.

Something you’ll notice straight away in our new design is that we use color quite sparingly, and normally with a very defined purpose. For most part, color is associated with specific actions: hover states, primary and secondary buttons and controls. This way we can guarantee that our calls to action are very prominent and distinguishable from other surrounding elements.

#4
Fewer Form Fields

Our simplified sign up window.

All of us know how tiring, frustrating, and sometimes exasperating, it can be to fill long forms of personal information. Whenever we require input from our users we have tried to minimize the number questions and forms fields. Overall, this measure also tends to increase conversion rates and reduce users’ typing fatigue.

#5
Keeping Focus

One of our worst case scenarios, which despite the high number of CTAs, still provides a structure that does not feel overwhelming to users.

We have always tried to reduce the number of calls to action in a single page, since we want users to focus on what matters the most, while also being able to single out the primary activity. One of our favorite design principles is Hick’s Law, which says that time it takes for a user to make a decision depends on the number of choices available — the higher the number the longer the decision time.

#6
Direct Manipulation

An example of a content card (language track), with contextual actions appearing on hover.

Whenever we have to decide between content (what users want to read, consume, and act upon) and chrome (actions, controls, and navigation), our answer is very swift: content should come first. As much as possible, we have allowed users to directly act upon UI elements for further contextual actions and controls, and in the process considerably minimize the amount of links and chrome on a page.

#7
Visual Hierarchy

Our new Blog. showing a very clear content hierarchy between its various entities.

Visual hierarchy is critical to any graphic designer’s work, and we have looked at it very closely when redesigning our 70+ pages. We have used typography, color and area to provide users with a clear content order that respects white space and recurrently gives their eyes a place to rest. Overall, we want the implicit hierarchy of each page to be immediately perceived, in order to improve its message and legibility.

#8
Visual Recognition

Card for an in-progress project, showing a live preview on the top.

We all know that humans are much better at recognizing things they have previously seen or experienced, than recalling them from memory. This is why we have introduced throughout our ecosystem (Profile, Dashboard, Track overview) snapshots of users’ in-progress projects. This way we can comfort users with visual elements they are familiar with, whenever they want to continue where they left off.

#9
Larger Targets

Some of our form fields and a primary CTA.

Another great universal design principle we love is Fitts’s Law, which essentially says that the time required to move and interact with a target area is a function of the distance and size of the target. The closer and larger the target, the faster the action. This is why we have increased the size of many UI elements, such as form fields, buttons, cards and links. Overall, it improves general usability (Fitts’s Law) and ease of use in touch-enabled platforms.

#10
Design for Edge Cases

Trying to find welcoming experiences, even when users have zero data to show.

We know how intimidating and lonely an out of the box digital experience can be, where many features might still be disabled for newcomers. As part of our redesign, we wanted to optimize our first time user experience, to feel like a rich, welcoming place, where users feel confident in exploring further. From our Dashboard to our Profile, we want users to always feel welcomed, even if they have just joined us.

The beginning

We’re all very excited with this recent release and would love to hear what you have to say about our redesign and many of the changes implemented across the product. At the same time, this is just a sample of the great things currently brewing at Codecademy. Please stay tuned for more updates.

UPDATE: Some people reached out to us wondering how we were able to embrace such a clean, minimal interface. In reply, we decided to write an entire post on ways to conquer white space. Read it here: Horror Vacui and the battle for white space