Providing a more structured and guided way to build digital products.
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.
Me – User Experience Designer
Dan Bell – User Experience Lead
Asger Jakobson – Visual Designer
Linden Dance – Visual Designer
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.
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.
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.
Eliminate ambiguity. Enable people to see, understand, and act with confidence.
Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
Create familiarity and strengthen intuition by applying the same solution to the same problem.
Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.
We first started by creating our base styles Grid specification, typography, color, spacing and iconography. This laid the foundation to create our 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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
