COMPANY

M&G Prudential

Contract

12 Months

POSITION

Senior UX Engineer

Overview

With over six million clients across 29 markets and £321 billion in assets under management, M&G Prudential’s vision is a business built for the customer which is simple, efficient, digitally enabled, capital-light, fast-growing and, above all, focused on delivery. They needed a design system and framework that reflected these values and would allow the digital products to fulfil the wider company ambitions. / match these goals.

The challenge

Atomic Design, first introduced by Brad Frost, brought in a new approach to how companies design digital products. The adoption of design systems by companies like Google, Airbnb, and IBM show that it’s being used successfully across multiple industries and provide companies with a more flexible and forward-thinking strategy for developing digital products.

Prudential started building out their design system ‘Arrow’ at the start of 2018. I joined the team in April while it was still in its infancy. During the next year, I worked alongside the Product Owner, UX Engineers and front and back end developers to build out a design system that set the UX and UI guidelines for M&G Prudential and served over 20 different products.

Output

One of the first things we established was the design tokens, the building blocks of any design system, including elements such as grids, colours, fonts and elevation. Components were developed using the design tokens and added to the UI kit. Having these tokens and components in a UI Kit saved designers time and kept designs consistent. I lead the creation of the UI Kit and myself, and the Arrow team encouraged the broader design community to adopt this way of working. We also developed a process for other design teams to feed into the design system, and managed which components to add, ensuring they met our UX and UI standards.

Below is some components specs created by the Arrow design team. UX and UI designers led the creation of the design specs, but developers were very much involved in the early stages and were vital in building components that worked together cohesively.

My Role

As well as providing UX and UI guidance and designs. Design systems and atomic design was a relatively new concept too many people within the company. It was therefor part of Arrows role to integrate the design system into the design community and encourage product owners, stakeholders and designers to adopt this new way of designing. This was achieved by inviting teams to weekly workshops to discuss designs in progress and help them understand how they could approach their ‘page level’ designs and break them down into smaller components that could serve a broader design system.

As well as workshops we presented to UX and UI designers and stakeholders across the business to evangelise the benefits of the design system and highlight success stories from other companies.

During my time creating the Arrow Designs System, I was fortunate enough to take part in workshops that helped me gain a better understanding of how best to develop components. Including attending an Invision workshop with Brad Frost in London. We also had time with DAC Accessibility, who is one of the leading providers of web accessibility services who discussed and demonstrated how people with sight impairment use our products. We also had a great relationship with Invision, who helped us integrate Invision DSM into our workflow and held several workshops with us.