A new design language for Compliance & Risks
Compliance & Risks Design
Design principles and
resources website
C&R Design is a look into our design philosophy, principles and practice at Compliance & Risks.
It's a showcase for our design principles, guidelines for developers, 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.
1. The need
Promoting our design vision
The product and development team has been growing rapidly, 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 primarily 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.
2. Our 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. The issue at the time was that this knowledge was never centralised and accessible, and so C&R Design was born. 🎉
There were three main goals
- Refine and create design principles, UX strategy and design guidelines
- Create a place to bring it all together that is accessible
- Promote these principles in daily work by using this website
3. 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 was 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 of development's big anxieties was around writing microcopy; the small text that is integral to the UI such as button labels, form labels and hint text.
This is an example of the different microcopy that appear in a regular component, from hints to titles and button labels.
The design team makes it their job to write microcopy, but sometimes if a developer is under pressure and needs to 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.
4. Concepts
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.
Design principles
front page
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
Design resources
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
5. 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. Open Sans is used for the typeface, as it is used in the product. Rubik is used for headings, and shares a similar x-height to Open Sans and has a distinctive character (pardon the pun).
6. 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.