Aviva Framework design system
How do you gain the edge over the competition and attract and retain customers by creating consistent experiences?
Business growth through design thinking
You may be wondering, does a business need a design system and why go to the bother of creating a UI library?
Simply put, a design system will encourage a business to look at not only the what but also the why. This helps to define the principles, standards and purpose of any experience.
The guardrails to success.
What is a design system?
So you have just created a new product or service but took triple the time to go to market. Were your product design team busy creating yet another button style or did the engineers take extra time in writing code from scratch?
Either way, 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.
With this in mind, here are three major benefits of 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 has reaped the rewards of creating its design system, the Framework. Powering all digital experiences across Aviva’s global markets, the Framework has become an integral catalyst to success and moving at pace.
Let me explain how.
The mission and approach
With product design teams spanning the globe, Aviva sought to bring order to chaos and therefore created the Framework design system.
Creating this system of interconnected elements has allowed each product team to confidently ideate and prototype much quicker and remain focused on solving customer problems. To ensure teams can design and deliver at pace, the Framework has several key foundations built-in, eliminating confusion or disparity.
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, error handling, to name a few.
UI 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.
Accessibility
Breeding WCAG compliance and standards to ensure all users can use Aviva products.
Embedded brand
Ensures all digital experiences bear the hallmarks of the Aviva brand and its aesthetics.
Reduced tech debt
Reduced need to create one off solutions outside of the design system that can’t be reused.
Time-saving
Reduced quality assurance and testing time needed per delivery as this is built in to the system.
Performance
Improved site speed, usability and performance through a lean and efficient code base.
Platform agnostic
Allowing for maximum code reuse therefore reducing delivery time and maintenance.
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.
Below is an overview of the Aviva Framework design system detail.
Fundamental design detail including brand colours, typography sets, grid structures, buttons, system icons and more.
Consistent starting points for all in the form of templates and page structures.
Layout components comprising cards, notifications, data groups, hero banner, tables, modals, promotional cards and more.
Global navigation patterns including cookie policy, country selector, footer, site switcher, masthead, pagination, progress bar, secondary navigation, tabs, sticky bar and breadcrumb.
Full suite of form UI covering form fields, check box selection, date pickers, drop down menus, form row help, filters, file upload, multi card select, predictive search, payments, radio buttons, sliders, text fields and toggles.
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.
Here are some of the key items.
Monthly newsletter
Quarterly user survey
Weekly open clinics
Release roadmap
Greater possibilities
Open source development and a federated approach. Ultimate autonomy.
With an established design system, Aviva took the decision to focus on reducing the dependency on the core design system team and alleviate any bottlenecks in production.
The result was to create the opportunity for all product teams to design and develop new or refined solutions to customer problems at their pace and timeframes through open source development.
Essentially, the number of in and out roads of the design system multiplies as each team contribute and share responsibility. This saves money and democratises delivery whilst continuing to breed best practice design, code and accessibility standards.
Key benefits of an open source federative model
Shared design and development principles
Increased advocacy and spread of knowledge
Reinforced collaboration and cost saving
Increased relevance to multi-disciplinary teams
Greater ability for teams to self serve based on their needs
No barrier to entry, reducing single points of failure
Highlights of the Aviva Framework design system
£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.
Want to view the Aviva Framework design system?
