UX / UI

Close Brothers Design System

Providing a more structured and guided way to build digital products.

Overview

Close Brothers is the leading UK merchant banking group providing lending, deposit taking, wealth management services, and securities trading. As a group of 16 different businesses, they provide a wide variety of services through many different, siloed systems and platforms. This presented problems for Close Brothers, they were unable to maintain their brand consistency across their digital landscape and also found themselves repeating work during the development of new digital products and services.

Team

Me – User Experience Designer

Dan Bell – User Experience Lead

Asger Jakobson – Visual Designer

Linden Dance – Visual Designer

The idea

In order to provide more structure to how digital products and services were built our newly formed in house design team set out to create a The Close Brothers Digital Design System. The Close Brothers Design System reflects the patterns and components that underpin Close Brothers Digital products. These patterns and components would provide a unified language and consistent look and feel for customers, partners and employees.

Define our objectives

The first step was to define our objectives for the system. These were created with key business stake holders to ensure that system not only served the needs of designers, developers and customers but also aligned with the business goals.

  1. Provide a base level experience that can be tailored to the unique nature of the business they are serving.
  2. Reusable components accelerating the design process.
  3. Tried and tested with each application, allowing us to leverage the knowledge gained as they evolve.
  4. Provide a consistent experience across the Close Brothers online domain.
  5. Align services to the bank-wide digital design direction.

Outline our principles

Our principles are at the heart of how we approach design and development. These core principles should always be kept in mind when building digital products.

Clarity

Eliminate ambiguity. Enable people to see, understand, and act with confidence.

Efficiency

Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.

Consistency

Create familiarity and strengthen intuition by applying the same solution to the same problem.

Beauty

Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

The foundation

We first started by creating our base styles Grid specification, typography, color, spacing and iconography. This laid the foundation to create our components.

Grid specification, typography, color, spacing and iconography

Components

Components refer to distinctive UI elements that are used over and over throughout a product—normally actionable, sometimes to convey meaning. A few examples include buttons, inputs, selects, and toggles. Initial designs for these were created in isolation from project work. Once a coherent system of components had been created we began to introduce them into live project work to test their scalability. Several rounds of iteration on the components were carried out as they were used and tested in project work.

Component specifications

Patterns

Patterns refer to recurring or ever-present elements or practices throughout 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. Majority of patterns were created through live project work. As designs for different digital projects were created, we carried out an assessment of the components and patterns to establish which would be brought into the Design System and which would remain a product-specific pattern.

Pattern specifications

Designers’ toolkit

We used Sketch Libraries to create a shared library of styles and components that both in house and third party designers could drag and drop in place. Having this preset library of styles and components allowed us to create prototypes faster to test with users earlier in the process. This also meant we could spend more time focusing on the creation of new designs rather than recreating existing components.

Building the system

The next step was to begin building the system beyond our design files. We had two workstreams and methods in which developers would use the system.

Linked Infrastructure and workflow

With a majority of Close Brothers’ external websites being built on the same platform, we were able to link these sites with a master file system. The infrastructure allows the Design System to be shared by all the individual business website on Drupal DX8. By creating this link we enabled automated releases to be pushed to the websites as iterations to existing components were made and new components were added to the Design System.

Collection of child Drupal websites connected to master repository

Front-end framework

The Close Brothers’ Front End Framework and component code allowed us to have reusable foundation styles and components across platforms. The styles were split into three CSS style sheets and their respective javascript files:

Front-end framework

Developers were able to download these stylesheets and then simply copy and paste the markup HTML code for the individual components. This accelerated their design process and ensured consistency and standards of code.

Result

The Design System now is being used on seven non-transactional websites and five transactional services, as well as by five internal and external teams while continuously evolving as new digital products are designed and tested.

Introduction of new patterns across multiple websites to deliver business benefits

With increase in customers the Premium Finance business saw customer support call volumes rise, it highlighted pitfalls in the websites ability to direct customers to self-serve.

As part of this project a new help and support pattens was created which aimed to surface the key help topics and allow easier navigation between related questions. The changes resulted in;

Up to 8% reduction in call volumes from customers, savings approx 2.5 FTE.

A 10% reduction in customers ‘dropping off’, leaving the website prematurely, c. 8000 customers a month. 

Due to the success of this project we added the pattern into the design system and has now been used across 4 other websites which have seen similar results.

Premium website – Call reduction

Improved the efficiency of website development and third party collaboration

The new Asset Finance website was designed and built by our external development partner. The website was built using tried and tested reusable components and the shared code base. The changes resulted in;

The time required to design and build the website was reduced by c. 30% (£10,000-£12,000)

This saved the team over 8 weeks of work, and allowed them to focus more time on higher value aspects of the website that generate customer leads and asset sales. 

Asset Finance website redesign

Enable faster ideation and concept creation

The introduction of Google Sprint methodology at Close Brothers has seen teams looking to find solutions to problems faster and test them with users in a more agile way.

The Design System and “Designer’s Toolkit” has allowed us to create a fully interactive design prototypes in less than a day, by having the foundational elements and components to hand allowing team to focus on solving the problem.

Prototype for Google Sprint built in one day