Creating the cxpartners Design Manual

2 years ago, cxpartners had one office and half the number of staff. This meant a designer could have a quick chat with a colleague to describe design systems in person, instead of referring to an official guidelines document.

These days we have staff working all over the UK and travelling around the world, so these informal chats no longer work. This is where official guidelines come in handy.

Most internal style guides, tone of voice documents, and brand guidelines are PDFs. This causes all manner of problems such as knowing where to find the document, which version is the latest, or needing special software if it needs to be updated.

Which is why on a graphic design retreat, we created the cxpartners Design Manual — an online-only document which can be referred to or updated in moments.

The Design Manual lives in GitHub Pages, is open source, and can be edited by anyone in the organisation.

How we created the Design Manual

In August 2014, the graphic design team went to a cottage in Somerset to come up with something that would help the company be more efficient. Within half a day, production of the Design Manual was underway.

We discussed what needed to be included in the manual. We needed to cover the basics: logo, typography, colour, and make associated downloads available to our colleagues at the click of a button.

When we were happy with content outline, we started sketching ideas to develop a hierarchy and layout, took it into Photoshop, and within a few hours we had a basic graphic design framework and a working front-end build.

With a framework in Photoshop and in-browser, half of the team could work on producing content whilst the other laid it out within the context of a browser.

This process was so quick that we managed to include extras such as imagery, document, and email guidelines.

About 12 hours of work let us create a living, breathing document that we are proud to share with our colleagues and the public. The site isn’t complex, but building a useful document that is used widely within the company feels like quite an achievement.

Technology
From a technical perspective, we used Jekyll to build the site and GitHub for our Git repository. The entire site was designed, built, and deployed by cxpartners’ graphic designers.

Jekyll provides us with all the great features of dynamic platforms, easy-to-edit content, and templates, without the complexity of databases or updates. With very little knowledge of front-end development, people can get involved and start adding or modifying content straight away.

Besides the obvious benefits of using Git for this project, hosting the repository with GitHub and using Jekyll meant we could host the site for free with GitHub Pages.
The markup itself is very simple and uses a combination of HTML, Liquid, and LESS.

It’s open source!
We think that businesses should eschew the traditional PDF brand documents and move to a platform that is accessible to all, so we’ve made the Design Manual available open-source.

Download the cxpartners design manual repository.