Inkling – Design Patterns

Sep '15 – Present | Interaction, Visual Design

The Objective

Wrangle the growing Wild West of typography, minutely differentiated colours, and custom components used across the Inkling platform for a consistent look and feel, and reduced design and development time. (In other words, maybe a style guide and define reusable components).

The Problem

Inkling's product design team didn't have a style guide. A lot of new features were being built from May 2014 onwards when the company pivoted. Designers often worked individually on separate sprint teams, and we ended up designing similar components with not-quite-the-same styles.

A particularly bad example was colour. My old manager made a script that extracted all the colour variables used in our CSS, and found 80+ base colours (not including tints and shades).

That's fewer than half of them shown on the right.

My Role

Project Manager, Designer

Other Contributors

3 Designers, 1 Developer

The Approach

We came up with a list of components to standardise in a team meeting, and then distributed the components and core styles to define. I took the role of project manager and led the team through prioritisation and setting checkpoints to make sure we could at least define our core styles by the end of the year.

I also talked to a member of the development team about the best way to display our style guide. We settled on making a Github pages branch of "common-ui", the repo of shared styles, because it would show the actual styles and components used in Habitat, and we could make a script to automatically update it when we pushed changes.

Typography

We agreed we had to define the core styles – typography and colour – before defining components because they would be built on that. I took on typography, and started by making an inventory of our existing distinct type styles. I analysed the levels of hierarchy needed in different pages, and came up with a standard set and guidelines for usage.

With my changes, our number of type styles in Habitat (counting only size, weight, and spacing) dropped from over 30 to only 8.

A partial inventory of the different type styles Habitat's authoring environment.

The set of standard styles, after a round of editing as new parts of Habitat (the module management, user management, and analytics areas) were made.

Buttons

I'm currently working on simplifying our button styles. The image below shows a partial inventory, and an attempt to categorise the distinct types of buttons we actually need. So far, the plan is to work from a minimal set of 3 – primary, secondary, and text buttons, and allow for large and small settings depending on frequency and context.