Our 10 Design Principles
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.
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.
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.
Fewer Form Fields
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.
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.
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.
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.
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.
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.
Design for Edge Cases
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.
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