David Hall logo David Hall

Promoting our design vision

C&R Design

Design principles and
resources website

C&R Design is a guide for product and development teams in the company. It's a look into our design philosophy, principles and practice at Compliance & Risks.

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

The need

Promoting our design vision

The product and development team has been growing at a pace, and communicating the design vision became the number one priority for the design team. The question was, how do we promote the design work we do, keep the development team updated with best practice and create a place for reference?

The development team is distributed around the globe and there isn't the luxury to sit down with the developer anymore.

Who is it for?

It started specifically for the development team. Yet we realised there were more people we could reach; the sales team who are interested to know about good writing, the marketing team who need to dip into the components library and product managers looking for UX strategy information.

The goal

Bringing together our design vision

There was 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 the development team to follow, yet this knowledge was never centralised and accessible. And so C&R Design was born. 🎉

There were three main goals

  1. Refine and create design principles, UX strategy and design guidelines
  2. Create a place to bring it all together that is accessible
  3. Promote these principles in daily work by using this website
1. Research

Creating useful design principles

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.

True design principles are simple value statements that frame our design decisions and support consistency in decision making across teams working on the same product or service.

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.

Developing the principles

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 obvious patterns. A candidate list of pithy principles was whittled down, reviewed with the product team, and then showed to the wider team.

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. 😉

Gathering the guidelines

I collected a year's worth of guidelines; annotations left on design files, Jira instructions written for developers and notes I built up in Evernote. This took me a few weeks of effort, editing and revising.

Microcopy guidelines were especially important and sought after. I wanted to solve one of Dev’s big anxieties which was around writing microcopy; the small text that is integral to the UI such as button labels, form labels and hint text.

All the text here is microcopy

The design team makes it their job to write microcopy, but sometimes if a developer is under pressure and needs to quickly write a piece of text. I created a list of all the major patterns in the platform and wrote best practice on how to format and write text for these.

2. Prototyping

Getting inspiration

I took inspiration from many of the foundational design guides, such as IBM Design and Lightening Design. These are overwhelmingly large, so I needed to start small and craft a website that was light enough to manage at the beginning of this initiative.

Early prototypes for Design Principles homepage

The design principles are the heart of our design process. The homepage showcases the principles in a visual and easily digestible way, with handy links for further reading and discovery.

The design goal

The principles are easy to understand by everyone in the company, not being too specific but practical enough to apply to any solution. The principles needed to stand out, be more visual to capture attention.

I came up with a scrolling page layout that is simple to navigate. Small paragraph of text to accompany each principle.

Sketches for homepage and the 'hide complexity' principle icon

Early prototypes for resources pages

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

  • UX strategy: The bigger UX picture
  • Guidelines: How to implement a design for developers
  • Design system: Solving the where the hell are the styles?

The design goal

Simplicity was called for. A simple layout with sub navigation that is always visible was needed. The sections are to be scanned easily and as clear as possible.

Sketches for guideline pages
3. Design solution

Bringing it all together

Design principles homepage

Finally, after months of work, getting the content completed, the principles approved by the team; it was time to work on the High fidelity designs which were then coded up by me with another developer.

I had changed many of the design details from the early prototypes, giving imagery more space and using subtle animation of the background in the principles homepage to add some visual interest.

Visual elements

I decided on a one page scrolling page layout that is simple to navigate. Small paragraphs of text accompany each principle.

Each principle is supported by two pieces of imagery. I didn't want to choose imagery that was too on the nose, steering away from stockish images to more interesting and abstract types.

In later versions, I added vector icons for each principle to capture the concept in a clean style.

Resources pages

Visual elements

I decided on a muted colour scheme using our product palette, with simple typography giving weight to the text. I used Open Sans for the typography through out, as it is use in the platform and just such a flexible typeface. I used Rubik in the headings, for it similarity to Open Sans' x-height and also it has a distinctive character (pardon the pun).

4. Outcome

In use

We hit on the simple, but excellent idea to include each principle and guideline that applies to any project in every Jira ticket. It now becomes a part of a ticket, much like 'gherkins', 'user stories' and 't-shirt sizing'. They are now in easy reach of the dev team.

Chilled dev team 😎

Ultimately, C&R Design has become an integral part of the development process within the company. It is used regularly as a reference and has been shared across the teams. It has also become an invaluable tool for onboarding new team members both in product and development.