Thinkful: creating a site-wide style and a style guide

Online education platform for becoming a developer
The aim of this project was to create an updated style guide to unify the identity of the marketing website.

 
 

The problem

Over the course of a year various teams have worked on various projects within the market-facing website. Naturally, style variations evolved and frankly, some of them got out of control. Some small things needed to be updated and cleaned up too such as better H5 styling.

 
 
 

The goal

When potential customers visit Thinkful.com, they should experience a professionally presented website. They want to experience friendliness and expertise. (This includes both desktop and mobile experiences.)

 
 
 

The design process

 

Brainstorming and style exploration

The discovery process was pretty smooth. First, this was not a redesign but more of a style update. Additionally, before this project officially started, I started looking at websites and apps and making notes of all the lovely things that caught my eye. I saved those that made sense for Thinkful to use in a moodboard. Due to those two reasons, brainstorming and style exploration went smoothly.

Thinkful always wanted to be a friendly and personal company that was driven by its people; and, that's exactly what the company was. The website had to represent that. The easiest way to do this is to place photos of students, mentors and HQ staff front and center. To make those photos even more powerful, I've often combined quotes and testimonials from happy students and mentors. It's a great way to show the human aspect of the people behind the product and it adds social proof. Thinkful is a company that tries to change people's lives, it's very much about people. There isn't a page that doesn't have a face on it, albeit it the education advisor.

 

Mockups and iterations

Another thing I wanted to accomplish is to remove the amount of hues the style guide uses. One of the things that caused design debt and problems was the use of various colours. Over time, it became uncoordinated. If there were less colours available in the style guide, this issue would be avoidable in the future. So, I consolidated the different hues like the red and the yellow. I used various shades of blue, green and gray to allow for more distinction and accenting. I've also started to use the mixture of green with blue to give graphics more interest.

Since this wasn't a redesign the only things I could change were the visual styling and small copy improvements. That's why the iterations happened with the mockups. I did not change any layouts except shifting elements to the appropriate grid. This made the iterations run much smoother and quicker than normal.

Personally, I find there are three things that come together that can make any design great: the grid, the colours and the typography. My biggest OCD in creating UI elements is making sure everything is aligned to the grid, both horizontally and vertically.  When speaking about grids, you can't forget the vertical rhythm, aka line height. It can be a godsend when making a design look great and polished. I always start with picking something that looks good for the grid, the colours and the typography. Naturally, as you're going to use them within the design to make a layout and a page you'll need to adjust them to make sure they are an even better fit. For instance, for Thinkful's aesthetic, we always adjusted the various shades of blue and grays we needed. (There were either too many or too little.)

 

Mobile testing

Thinkful had a small mobile audience about less than 10% which meant designing started with desktop first. But I did need to making sure the UI changes made for the desktop designs translated well into mobile as well. Although at Thinkful there were multiple stylesheets and mobile design could have been made separate, it's best if it's not. Updating stylesheets by device is an easy way to get into design debt that we were trying to fix with this project. A good chunk of my job was to make sure that the design scaled well responsively.

 

Visual language

Another major thing I wanted to remove is dark backgrounds. There was one dark thing left by the time I was done - the footer. The website needed to lose those dark tones in order to feel lighter. Lighter is good, it sets the mood for professional and open.

For a long time, I was debating removing all deep blue backgrounds too. This leads me to the last thing I aimed to do which was to create a visual language for Thinkful. I've decided to keep the dark blue backgrounds for CTA callouts only. I've created other visual languages too such as yellow buttons are CTAs for sign up only, the light blue to white gradient is a background at the top of each page, photos and avatars of students, mentors or staff will be in colour and in circles, graphics can mix the blue and the green to get gradients and so on... Check it out for yourself below!

 
 

 
 

Final design deliverables

 
 

Vertical and horizontal grid

 

Colours

 

Typography

 

Layouts

 

Graphics

 

Humans

 

Texts and quotes

 

Calls to actions

 

 
 

Would you like to see another case study?

Thinkful: new user onboarding

Thinkful: sign up flow

Would you like us to get started on your project?