Building Shortlist’s first-ever style guide

#UX #Research #ProductionFreindlyDesign #WebDevelopment #HealthyDebates

Overview

Shortlist helps growing companies in Africa and India build and develop world-class teams. It combines technology and human touch to engage and screen the best candidates for interview-ready talent.

For a more cohesive brand identity across all of Shortlist’s products, we built the candidate-facing style guide to be used by design and engineering teams at Shortlist as a reference for typography, colours and design components.

As Shortlist continues to grow, as a product and company, the style guide acts as a central location for a live inventory of UI components and brand assets.

Role: Pankaj, the product team, leadership, and the engineering team and I worked on creating this style guide.

Duration: 12 weeks

The problem

When I joined the company in 2017, there was no design team or design system in place.
As part of a small team, being the only designer, and being a designer just starting out, there was inconsistency in design, a messy design process, A LOT of hard coding, and too many product-dev battles. We were using too many colours, fonts and font sizes and we knew no other way.
Our design process was neither sustainable nor scalable.

Research & learnings

Starting from scratch

My colleague and I were new to product design, had never worked on a style guide before and had no one else with design expertise in the company. This project involved A LOT of self-learning through research and understanding in-depth how tech products were developed.

Colours: How many are too many?

The biggest of the debates we had with the engineering team was over colours. How many shades of the same colour? How many different colours? Designers advocated for more colours, engineers, less. Was there a way in between? There had to be.

Colour analysis exercise. We reduced the number of greys post this exercise and added specific usage for each.

Insight: We did a colour analysis exercise of our existing products and others’ products. We found that although using many colours is not a problem, they did need to have a clear purpose of their use for consistency.

Fonts & font sizes: Many vs a few vs just one?

At Shortlist we used two main fonts - one for the heading and one for the body. We researched on tradeoffs between many vs few fonts and font sizes.

Insight for fonts: We learnt that there is an increase in loading time with an increase in the number of fonts. We finalised on just one for both heading and body to minimise some additional loading time.

Insight for font sizes: We carried out an analysis of our products and looked at other products. We found that we were using some additional font sizes that were not used frequently. We also realised that we didn’t have a clear purpose for a particular font size.

Learning from others’ style guides

During our research, we discovered various types of style guides:

Elaborate ones that included guidelines for many aspects of visual design, and less elaborate ones that focused on fonts, colours and UI components.
Some had a restricted number of colours and some were more generous with their colour palette.

Insight: We realised the number of fonts and colours was really up to the organisation. As long as they had a clear purpose, they could be included or excluded.

Taking our learnings —> Goals

For the first version of our style guide here was our main goal:

Incorporate the minimum number of font sizes, fonts, and colours needed to make a candidate-facing product.

We made the decision based on the products we had built so far. We left the option of adding more to the style guide as our products evolved.

🥳 Presenting, Shortlist’s style guide 🥳

Based on our learnings from desk research and discussions with the product and engineering teams, we build the first every style guide!

Through many iterations, we gradually cut down the number of colours, fonts, and font sizes, to make sure all aspects of style guide had a clear purpose and use case.

Colour scheme

Main colours

The primary colour is used for elements that reflect Shortlist’s brand and is used for the main CTAs. Its variants are used for hover states and links.

The secondary or the accent colour is used to lay emphasis on components.

Grey tints and shades

Greys are used show text hierarchy, as backgrounds, lines and borders.

Other colours

These are used positive and negative feedback and other special scenarios.

Typography

The font scale consists of 8 different font sizes in regular or medium font weights and is divided into three main categories - heading, paragraph and small text for certain scenarios.

Components

Presently, Shortlist uses all components from Google’s Material Design library for speedy product development.

Primary buttons

These are for the most important actions to be taken, the main CTA. These used sparingly per page.

Secondary buttons

Secondary buttons are the next most important actions to take on a page.

Tertiary buttons

Tertiary buttons are used for links, modals and other components like cards.

Reflection

Although tough, it was an immensely valuable experience making the process from design-to-development easier by reducing colour-matching errors and confusion. It was a rewarding experience to go deeper and think of a clear purpose for each design element.
The style guide helped set a good foundation for design at Shortlist and helped bring the design and engineering teams on the same page about design fonts and colours reducing the number of unfruitful discussions. It also helped develop a better relationship between the two teams :)