Logo of David Hall

Promoting design principles and guidelines beyond the design team

C2P Design Home

for C&R

The Design Home is a look into our design philosophy, principles, practice, and a helpful guide for product and development teams.

It showcases our design principles, writing for interface elements, and even file naming conventions. It should also be interesting to the non designers in the company that have an interest in what goes on behind the scenes in the design team.



The goal

A place for easy reference

I created the site out of a need to focus the design vision and promote the hard work the design team does. There are of course internalised principles we use and basic guidelines for development team to follow, yet this knowledge was never centralised and accessible. And so Design Home was born. 🎉

Principles

Creating practical principles that aren't wooly

Design principles can be vague and aspirational, sounding lovely in theory, but useless when used as a guiding light for design. They just seem to evaporate during the process, having as much heft as gym instructors on Insta. Slogans like 'design amazing every day', 'good design makes the world more awesome' or 'connect your brand with your essence' are fantastic, really, well done, but? It gives designers a bad name.

Many of the ideas for the principles came from user feedback and are grounded in genuine needs and concerns. Principles are a pre-emptive solution to potential issues.

Verifying with users

Instead of picking principles at random, potential versions were verified against user feedback, which was found in our ‘Voice of the User’ system. There were some clear patterns. A candidate list of pithy principles was whittled down, reviewed with the product team, and then showed to the wider team.

Obviously, I took inspiration from many of foundational design guides, such as IBM Design and Material Design, but I needed to start small and craft a set of principles that were easy to understand and realistic.

It is satisfying to discover that these principles are not just specific to our product, but I think apply to any product and situation. They also come in handy if you are planning the Christmas dinner, going on holiday or putting on a children’s party. 😉

Design principles homepage

The homepage showcases the principles in a visual and easily digestible way, with handy links for further reading and discovery.

Guidelines

From microcopy to components

I collected a year's worth of guidelines, from annotations to notes all written for developers. Microcopy guidelines were especially important and sought after.

Our component library is linked directly to our Figma library, making it easier to grab styles and components.

Guideline sections

From talking to developers and the wider product team, I could break these issues down into a few sections, namely

  • Foundations: Issues with knowing how to do something
  • Microcopy: How to write text in UI
  • UI guidelines: How to implement a design for developers
  • Components: Where the hell are the styles?

I designed a simple layout with sub navigation that is always visible. The sections are designed to be searched easily and as clear as possible.