Aleksander
UX Strategists
Made with

Mitie Design System

Establishing & scaling design practices in a corporate environment to enable
faster development and consistency

Brief

Mitie entered the Digital Transformation program to focus on creating inspiring digital solutions and helping their clients move beyond Facility Management... to a connected workspace.

I created the Mitie Design System in order to reduce code redundancy and free up teams to focus on user experience, problem-solving, and building meaningful features and solutions.

This set of style guides has been made from brand guidelines, patterns, and components, as well as voice and tone guidelines and coding standards. It empowers Mitie employees to create robust, experience led digital products.

Problem

Historically, Mitie lacked centralised design system which would consolidate all the style guides in one place and work as a north star for all our departments. With no single point of reference and a need to make isolated decisions, inconsistencies and inefficiencies were arising as these decisions were being changed numerous times. This also led to a high rate of code redundancy where the same elements were developed multiple times for different applications.

Solution

In order to deliver a great customer experience, the design, marketing and engineering elements had to be able to speak the same language, in one place. Creation of the component-based toolkit which is accessible in one place has allowed for more agile processes and has sped up releases without compromising on quality. The reusable components build upon each other, creating a consistent look, feel, and behaviour to the product.

Design exploration

Simple, clear and clean

Our primary tool is a data-heavy business intelligence, web-based product. Simplicity, readability and load time are all paramount. We knew early on that we were striving for a clear and clean aesthetic.

Mitie Design System
Mitie Design System

Colour theory

The system is predominantly white, grey and light blue. It’s important that the design doesn’t distract from the content, so subtlety is key.

We've decided to use colour in three different ways to create a clear and consistent look and feel to the brand, product and user interface.

  • Theme - these colours are used for product icons, typography and dominant elements such as buttons.
  • User Interface - these ones are used for backgrounds, surfaces, and shadows.
  • Data and Validations - these colours apply to charts and error messages.

Mitie Design System

A typeface to match

For the typeface, we've chosen to use system fonts. This is important as no third party scripts are needed to load the font, meaning faster page load times.

Patterns and components

Atomic Design

Our system was already partially built so the task now was to work backwards and identify all the elements which were constantly repeated throughout the application. This extensive suite of patterns and components had to be designed to showcase all states and scenarios . Essentially, we had to create a comprehensive UI kit for our team to use in order to develop the functionality of our system further.

I decided to follow the atomic design principles coined by Brad Frost. This methodology involves breaking a design down into atoms, molecules, organisms, templates, and pages which concurrently work together to create an effective interface design system.

Mitie Design System
Mitie Design System

Patterns

Patterns refer to recurring or ever-present elements or practices which feature in a product. Examples include navigation, cards, tables, empty or loading states, notifications, alerts and modals.  Patterns are versatile, can contain components, and be paired together to make up a template.

Mitie Design System

Components

Components refer to distinctive UI elements that are used over and over within a product—normally actionable, sometimes to convey meaning. A few examples include buttons, inputs, selects, toggles, avatars and tooltips.

Tools & Solutions

Mitie Design System

Sketch

Our tool of choice for UI design is Sketch. The features that make Sketch great for product design also make it especially powerful for system design. When we had to create hundreds of editable symbols and easily applicable text styles, Sketch’s simplicity was crucial.

Mitie Design System

Abstract

To avoid hunting through shared folders for design files and stop relying on creative file-naming conventions, I introduced Abstract Design Repository as a single place to version, manage, and collaborate on all our Sketch files.

Documenting a design system

Living style guides

Whilst investigating the best options for documenting our design system, I was particularly interested in the solution which would guarantee the creation of a living document. Updating pictures manually within the document every time we wanted to update our components would create unnecessary hassle. As a result, I had to come up with a more scalable solution.

After about a week of reading through articles all over the internet, I chose Zeroheight. This web-based application creates a design system from our components designed by Sketch, keeps them in sync, keeps the version history as well as allowing us to integrate interactive HTML previews from a Storybook. 

Mitie Design System
Mitie Design System
Mitie Design System
Mitie Design System
Mitie Design System

GRATITUDE & CREDIT

Thank you...

  • Owen Lewis - for developing the Mitie Color System and creating all the UI components using Sketch nested symbols.
  • Christopher Deane - for releasing inspiring tutorials and sharing his knowledge that enabled us to develop Mitie Design System, faster.
  • Jacek Dąbkiewicz - for hours of discussions helping to validate my approach.
  • Brad Frost - for creating foundations on which the concept of the components was built. 
  • Jerome de Lafargue - for sharing the best practices in documenting a design system.