How do you Develop a Global Design System and establish one source of truth for Aviva's 100 designers and 31 million customers?

Our approach

With International product teams in multiple countries, Aviva sought to bring order and consistency to digital and therefore we created the Framework design system. Creating this system of interconnected elements allowed each product team to confidently ideate and prototype much quicker and remain focused on solving the local customer problems. Enabling global teams can design and deliver at pace and save time and money, the Framework has several key foundations built in, eliminating confusion or disparity. 

My team consisted of 6 designers (UX/UI), 5 developers, a business analyst and a product owner, plus hundreds of global stakeholders to deliver a design system to our global customers.

A design system will encourage a business to look at not only the what but also the why. This helps us to define the principles, standards and purpose of any Aviva Digital experience.

So what is a design system?

Your team has just created a new product or service but it took triple the time to go to market. This may be because your design team were too busy creating yet another button style, which in turn meant your developers had to take the extra time to write new code for every new component, every single time.

The reality is bespoke design simply doesn't scale. Bespoke design is slow, inconsistent, and increasingly difficult to maintain over time. And this is where a design system comes into its own.

Here are three major benefits of creating a Design System

Single source of truth
A consistent UI library and Front-end CSS / HTML codebase that is designed to provide scalable solutions and enhanced usability.

More time to innovate
With product teams aligned behind the same focus, more time can be spent tackling the customer problem with better solutions. 

Faster to market
Build products and experiences faster by utilising reusable items, that when assembled together can build any number of applications.

Consistency across global markets

Aviva's design system is global, the Framework powers all digital experiences across Aviva’s global markets, and the Framework has become an integral part of creating a consistent global design language for success and to move at pace.

The mission and approach

Creating this system of interconnected atomic components has allowed each product team in any country to confidently ideate and prototype much quicker and remain focused on solving customer problems. This ensure teams can design and deliver at pace, the Framework has several key foundations built in, eliminating confusion or disparity.

Aviva’s UX, design and front-end atomic element library, consist of HTML, CSS and javascript code that creates Aviva’s digital customer experiences (public websites, MyAviva, Quote and Buy journeys, specialist websites (Advisors, Brokers, microsites

Below are the cornerstones of the Aviva Framework design system:

Global experience principles
Covering everything from digital and customer experience principles, style guides, SEO, responsive design and more.

Development standards
From performance, optimisation, progressive enhancement and adaptive content through to JavaScript, security, CSS, ARIA and JSON

Accessibility standards
A critical focus for any design system including detail for screen readers, keyboard controls, legibility, and error handling, to name a few.

UI Component library
As robust and thorough as they come. Containing forms, layout, navigation, page elements, media players and utilities.

Documentation & guides
Onboarding and providing support for all teams is of paramount importance. Including guides for product designers and developers.

Templates & page structures
Consistent starting points for teams to use when creating common experiences and ideating at speed.

Key business benefits of a design system to Aviva

Design at scale whilst saving time and money.
Aviva has invested in design as they recognise that the customer experience of their products offers a competitive advantage & attracts/retains customers. 

Whilst the design system needed an initial influx of time and money to create, the business started to experience the benefits of reusability rapidly as the creation phase levelled off and the return on investment started to show. 

At this point, product teams were able to concentrate on fine-tuning existing products, adding delight to experiences, and delivering value.

Cost-saving
Reduction in time required to create solutions to customer problems and go to market.

Embedded brand
Ensures all digital experiences bear the hallmarks of the Aviva brand and its aesthetics.

Time-saving
Reduced quality assurance and testing time needed per delivery as this is built in to the system.

Platform agnostic
Allowing for maximum code reuse therefore reducing delivery time and maintenance.

Accessibility
Breeding WCAG compliance and standards to ensure all users can use Aviva products.

Reduced tech debt
Reduced need to create one off solutions outside of the design system that can’t be reused.

Performance
Improved site speed, usability and performance through a lean and efficient code base.

Satisfaction
Supports customer engagement and satisfaction therefore driving loyalty and retention.

A comprehensive design system 

The Aviva Framework design system is very in-depth and mature. Providing the business confidence through consistency and detail. It is inclusive, educational and empowering.

An engaged community

Aviva recognised that having a mature design system was more than just a robust UI library. To drive visibility, advocacy and a shared sense of pride, several broader pillars have been put in place.

• Monthly newsletter
• Quarterly user survey
• Weekly open clinics
• Release roadmap
  
  
  

Highlights of the Aviva Framework design system

• £4 million development cost savings (UK)
• £80k average saving*
  *Based on product and feature deliveries with an attributed budget of £150k - 200k 
• 31% quicker to market*
  *Average delivery reduced to 190 hours per person down from 277 hours per person 
• 230+ UI components
  Reusable items that can be assembled together to build any number of applications.
• x9 global markets
  Powering experiences in the UK, Canada, Ireland, Singapore, Poland, France and more.
• Full atomic component design system
• The FW system could be white-labelled so that Aviva could use it with HSBC and some other global brands
• Ongoing integration into AEM deployments

You can visit the site Aviva Framework