Style Guides: the not so sexy part of the design process. Creating a style guide is time consuming, and keeping it up-to-date can be challenging. They often cater to a single type of viewer and become a nuisance to those forced to refer to them. In this case study I will highlight how I helped come up with the perfect style guide.

 
 

The Project

The style guide was intended for Mirth Results, a Clinical Data Repository, which was undergoing a full rewrite and redesign. At the beginning of the project we did not have a style guide to base our designs. It started to get confusing for those involved as it was hard to tell the difference between what was new, approved, antiquated or needed improvement.

 

How It Was Done

The guide was intended to grow into a design language for the suite of applications. It was created to reduce duplication of effort from design and development when we would eventually redesign other applications in the suite. 

Confluence offers a powerful WYSIWYG editor that is collaborative, easy to use, and integrates seamlessly with JIRA

Confluence offers a powerful WYSIWYG editor that is collaborative, easy to use, and integrates seamlessly with JIRA

We did research on different types of guides, and to satisfy our needs we combined the powers of Confluence and Atomic Design. We needed to audit the existing design, and establish consistent patterns and paradigms. Confluence was the perfect platform to provide our reasonings and details behind our designs. We broke down the pages of designs into standard components using Atomic Design; these elements would be combined and reused like legos.

 

The Results

Our efforts resulted in a collaborative wiki-styled design language that has successfully negotiated pitfalls that occur with traditional style guides.

 


Carefully Arranged

The Atomic Design methodology of arrangement caters to all members of the organization. It offers different starting points for developers, product, and designers- whether they are familiar or brand new to the project. 

 


Visible and Accessible


The Confluence pages have visibility and accessibility through Jira and other Atlassian products. Related wiki pages are automatically cross-referenced and show up in the Jira tickets. 

 


Up-to-Date and Accurate

One link to rule them all

The pages are up-to-date and accurate. There is only one source link, and the hi-fis sit next to the lo-fi’s and their annotations. We've cut down on outdated comps that are floating around in Jira tickets, PDF’s, email threads & chat logs.

 


Version Control

Confluence’s built-in version control has been invaluable for our agile/scrum environment in which we constantly tweak and iterate our designs. It’s given everyone a reference point for past designs.

 

In Conclusion


The style guide is blossoming into a design language. It’s regularly used and asked for by name by Product, Development, QA and has even been recognized by the C-Suite.