The value of consistency in design

At Sopra Steria, the core of my role is to make everything that’s designed more consistent.

All our outputs are designed in some way, whether it’s research, documentation, bids, UI designs, diagrams, presentations or social media. Everything that’s seen by other people is part of our brand, all holding a consistent type of messaging (written or otherwise). This is especially important to consider when we are presenting to a large audience, within key sales or when we’re working with our client’s brands.

Why is design consistency important?

Recently I attended UX Scotland, where I enjoyed a talk by Andrew Purnell, a designer from the London and Glasgow based agency Snook. He shared my view that often on projects, following a consistent brand can be forgotten, with information and styles that do not look or sound like they come from the same company. This can lead to a confusing journey for whoever happens to be using the service, as screens that look and behave differently are not easy to use and do not feel connected.

This can also apply to other media or documentation. Think of two pitches that are from similar companies with a similar approach. One is written by several different authors all with a different style, and with diagrams scanned from several external sources. The other has been designed to have any image or diagram with the same branding, for the messaging to sound consistent though the authors are different. Which is more likely to hit the mark?

Design consistency reduces this confusion and creates a feeling of familiarity, providing reassurance and building trust.

Designing a consistent service

When we’re working on projects, we can think about the wide range of outputs that will come into contact with people as they use the site or system. Service design considers customer journeys from the first to the last point of contact, and takes into account all touchpoints that they may interact with, such as websites, call centres, emails, letters, social media or downloads. Will the service look and feel the same on the homepage, sign-up or email they receive?

Designing systematically

One way to increase consistency throughout each output is to implement a Design System that covers the guidelines for as many of the areas that people will see as possible, combining branding, content strategy, marketing and digital design. For a company, they can provide consistency across an entire range of touchpoints including branding, blog posts, Twitter messaging, business cards, iPhone apps, websites and email signatures. They can also include all the specific detail that makes up the site or system, such as tone of voice, imagery, colour palettes, type styles and (coded) component parts.

“Be consistent, not uniform” – Gov.uk design principles

As well as including everything that makes up the product or service, Design Systems are adaptable and easy to change, which makes them very effective across teams, and throughout a project lifecycle. They can be constantly updated and linked to the latest version of each output, so the project and ultimately the customers are always kept up to date.

To find out how we can help you to design your service consistently, please leave a reply below, or contact me by email.

___

Some excellent examples of design systems:

IBM’s Carbon Design System – http://carbondesignsystem.com/

Atlassian’s Design System – https://atlassian.design/

Achieving consistency with style guides

Recently, I worked on a project where the client was looking to set up a style guide. In this case, they hadn’t yet set up their own branding beyond a logo, so it was a way to begin to explore typography, colour palettes and creating some elements they could carry forward to define their digital guidelines.

This took the form of a PDF with notes for developers, though could also have been developed into an online style guide, linked closely to a pattern library of elements that are common throughout their digital applications.

Defining styles creates consistency within the brand. When style guides are lacking, the application may end up combining a patchwork of styles. If several applications for the same company all have a very different look and feel, it creates confusion for the user, a lack of trust and identity in the brand and an impression of an incomplete or inconsidered final product.

Who are they for?

In terms of our practical applications, those scoping at the start of the project should be aware of the overall brand values. Style guides can be set up referencing existing brand guidelines, and used by UX and visual designers to define the look and feel of the application and developers to ensure elements are correctly fitting to the overall brand. The client can be reminded at any stage of how their values have been considered.

What can be included?

Style guides can begin in a Lean way – a pared down version with the minimum required. Some elements could include:

Logo use – application of the logo throughout different situations. Considerations may be the size, colour or position.
Tone of Voice – personality of the content. How is the copy written? Will it have a naturalistic language, or be full of specific technical speech?
Typography – the primary (or secondary) typefaces. This can be listed in terms of headings, body or other styles.
Colour palette – RGB/hex values showing primary and secondary palettes. Colours that are used throughout a system.
Imagery – photography or illustration style. This could be anything from dramatic black and white photography to complex vector background illustrations. All imagery should fit with the tone of voice.
Iconography – style and application of icons. These may be from an existing set, or specific to the product/system.
Animation – styles for the animations of different elements. For example, the way menus open/close on click, or hover effects on buttons appear. This should fit with the tone of voice, be it subtle transitions or playful background animations.

Similarly, pattern libraries, which define elements with snippets of code, can be set up to run in tandem with the style guide. A good example is Lightning Design’s system or the excellent guidance provided by GDS.

GDS Design Principles

When to use them

Style guides are best implemented early on, to reduce the amount of time required to make changes much later in the project. They don’t end, but rather organically grow, as the project expands. Keeping the style guide (and pattern library) up to date throughout the project gives consistency and consideration to the final product.

See also:

Excellent examples

Do you have any experiences of creating style guides? Leave a reply below or contact me by email.