Getting a style guide from dream to reality

Skills

Facilitation UX writing

Background

Web style guides —or “design systems” as they are now called — are a way to multiply the impact of a UX team. They give guidance to developers and help consistency across products.

Challenge

We had different assets ((Most of the existing UI elements were not created by me)), that documented styles, interface components and iconography, but these were:

Located in different servers and products
Not accessible to development and product teams
Hard to locate

Actions

I took the existing Sketch, Word, Evernote and Microsoft Onenote files that had been developed and worked with developers ((Peter Berry and Deshi Rahim)) to create a style guide that would be useful for developers, designers and product managers.

I researched and created the site structure and wrote all the content.

Initial proposal for style guide home. (Partially blurred)

Example content page, initial concept. (Partially blurred)

Results

The style guide was built and is widely used. It means less design work up front on work items – often all that is required is a hand drawn sketch with a note to follow the style guide.

Recently (early 2018) when discussing an element of design, the lead developer (overseas based) said “Don’t worry – we’ve got this – we’re just going to use the style guide for that”.

“Don’t worry – we’ve got this – we’re just going to use the style guide for that”

I feel the style guide was not perfect, but it addressed the majority of user needs quickly and simply.

One trade-off is that of content management – the guide is extremely hard for designers to update due to its linkage to production code. This means updates require developer assistance and are therefore not as frequent as I would have liked.