Consistency is key to delivering compelling customer experiences. There needs to be a seamless flow between channels like website, social media, email, SMS and more.
Design consistency is key to creating that seamlessness. According to a LucidPress survey, “Consistent presentation of a brand increases revenue by 23% on average.” And if you’re not consistent, you risk customer disengagement and disconnection. The Oxford College of Marketing found that “when a company’s branding is inconsistent across their communication methods, it breaks the link that the customer makes in their mind with the brand.”
To build customer confidence and brand familiarity, there must be a clear, cohesive design language across style elements like colour, typography and imagery. Follow these 9 steps to build that design language.
1. Create a UI inventory
Brad Frost, author of Atomic Design, describes a UI inventory as “a comprehensive collection of the bits and pieces that make up your interface.” You could compare it to a well-organised cupboard for all the brand’s design elements. You might have different “shelves” for website buttons and fonts, for example.
This inventory gives you an overview of all the elements that need that thread of consistency – and helps you evaluate the current state.
2. Get organisational buy-in
Team members should have complete understanding and confidence in the application of the design language. This means you need interdepartmental input on what the language should be like and how the elements should integrate.
That way you can establish rules that still give the flexibility needed for different business contexts
3. Develop a multi-disciplinary team
To ensure the design language works across channels, creating it should be a collaborative effort.
The team should include brand managers, designers, front-end engineers and dev ops. Roles should be clearly defined, with regular reviews to ensure everything is on track.
4. Build the design system patterns
These patterns relate to how elements interact – and help you create a consistent user interface and user experience across channels. They’re like the scaffolding holding up your designs. They give customers that sense of familiarity, whether they’re on your app, desktop site, mobile site – or, indeed, navigating through a brochure.
A critical step is to test the patterns on all the relevant channels – don’t just run the app and website and stop there. This helps future-proof the design language, because you ensure it’s easier to scale as new channels get introduced.
5. Build the colour palette
Colour palette is essential for customer recognition and engagement. Indeed, a study from the University of Loyola revealed that colour increases brand recognition by up to 80%.
For instance, Starbucks has embedded green, the colour of positivity and nature, in its design language. Hotel Chocolate uses black due to the connotations of confidence and sophistication.
By starting with the colour palette, you can create consensus about how you want the brand to be portrayed in design.
6. Select the right typographies
You’ll want a range of typefaces for different applications, so it’s easy for people without design software to stay on brand – and so you create the right impression based on communication type. But all the acceptable ones should be set out.
For example, if you’re looking for visual clarity and emphasis, you could use Calibri for web and document headings. And you could have Broadway for when you need to convey a sense of sophistication.
And don’t forget the option of developing your own typeface to create more differentiation in design-led applications.
7. Create an icon and image library
This library should incorporate all icons, complete with size and spacing rules. It should be developed over time, always highlighting uses and visual connections.
Logos, in particular, should have rules. And there should be clear guidance on image styles and use. That way it’s easy for everyone across the organisation to use elements consistently.
8. Codify other style elements
Brand guidelines often contain colour palettes, typefaces, logo rules and image guidelines. Where many organisations fall short is in the other design details. These seem small on their own, but they have a big impact on brand consistency.
Set rules for elements like:
- Time and animation
- Shadows
- Corners and edges
- Grid systems
- Responsive breakpoints
- Photography guidelines
9. Roll out the new design language
Now you have the essential design language components tested and codified, it’s time to get everything out to customers.
Using the inventory as a starting point, you can begin updating marketing and communications… and start improving both customer experience and brand engagement.
Get in touch to find out more about how you can deliver a consistent, cross-channel experience for your customers.
