PROJECT
Building a Mobile Design System for Global Markets
Role
Senior Product Designer
Date
August 2019 - July 2020
Collaborators
Product Owners, Developers, Test Engineers, Scrum Masters.
Skills
Systems Thinking, Front-End Development
Project Summary.
In 2020, I led the design and delivery of a Mobile Design System at one of the UK’s largest Insurance and Investment companies. The goal was to unify fragmented design practices, improve delivery speed, and raise the quality of mobile experiences across iOS and Android platforms.
Through a combination of cross-platform component architecture, design tokens, and showcase-driven development, we replaced ad-hoc design and build cycles with a scalable, efficient design system that empowered teams to ship faster with fewer bugs and better consistency for customers.
Working with Product Managers and Designers, this initiative helped shift the organisation from reactive product delivery to a systematic, scalable model that balances speed, quality, and user impact—laying the groundwork for future growth and innovation across digital touchpoints.
Laying the Foundations to Scale
Audit & Preparation
When I joined the mobile team at one of the UK’s largest investment companies, it was clear we were struggling with a familiar enemy: inconsistency and inefficiency. Every new project felt like reinventing the wheel. We were duplicating components across platforms, spending too much time aligning on design and engineering details, and introducing errors that were expensive to fix downstream and creating mountains of technical debt.
“We’d design something one way, then two screens later we’d build the exact same thing again—slightly different.” - Developer
This fragmentation not only slowed us down but undermined the quality and cohesion of our user experience. It also limited how much value we could deliver, and how fast we could deliver it.
Researching Best Practice
The first step was to research and understand how other companies and design teams had created their own design systems - who have all followed themselves in the footsteps of Brad Frost and his Atomic Design methodology.
Above: Researching existing design systems from Google, IBM and Salesforce to understand best practices, naming conventions and component structure.
Creating a Flexible and Scalable System
Structure
Before we began, it was vital to audit the existing components that were being used and understand how the team was currently using them - this was done via an internal survey to the product squads, including front-end developers and test engineers. This survey was periodically rolled out to the squads as a health monitor, to provide feedback on what was working well and what could perhaps be improved, as well as the impact the Design System was having on our workflow.
Embedding Design Tokens
The most basic element of a Design System, is the atom. We used design tokens to create a common visual language between design and code, focusing on elements such as Colour, Font Size, Radius and Scale. This made updates scalable and consistent.
Above: Basic elements, such as colour, typography and iconography were broken down into agnostic design tokens, so we could build components in a manageable and scalable way moving forwards.
Refactoring Components
Once we had these Design Tokens defined, we could begin to re-build and re-factor existing components, working closely with the Engineering teams to translate these into live components and ensure they met the improved design standards we had implemented.
Using variants, we were able to rapidly re-build the most commonly used components and create a clean Figma file with well-organised components, all built on these foundational design tokens.
This enabled instances to be swapped, component structures to be changed without detaching components and text-string changes to be updated to rapidly ideate and prototype screens.
Above: Screenshots from the initial Tigris Design file, showing how elements and components were organised. The system itself was comprised of multiple files, for Designers and Developers to interrogate components and understand their usage guidelines. The final screenshot shows how variants and over-rides were used to create complex components.
Robust Component Documentation
A central repository covered everything from component anatomy and usage rules to accessibility, tone of voice, and design principles. This was hosted on Aviva’s Design Standards site, for reference by internal teams and third parties who are required to build to Aviva’s Design & Development standards.
As well as Component Sheets, for use by Designers, each component was supported by a Component Spec Sheet which included the following: Usage Guidelines, Variants, States, Anatomy, Spec, Placement, Behaviour and Accessibility Specification.
Click here to view the initial component documentation on Aviva’s Digital Standards site.
Above: Some examples of the component documentation created, which included component spec, usage guidelines and behaviours.
Establishing a System of Governance
Operations
Once we had established the initial design system, we needed to think about how we would manage the system moving forward and establish a governance framework to scale and mature the Design System.
Contribution Model
A common criticism of design systems, is that they block designers creativity. To avoid this, and ensure the system was viewed as an enabler, I setup a federated contribution model - so that designers and engineers had a documented process to work within and evolve the design system.
Design Critique & Review
I established weekly Design System meetings for the Design Team and Developers, to regularly communicate and share updates within the design system. Not only did it create a community of excellence for designers, but it gave the Developers an early view of new components and design thinking in order to highlight any concerns or blockers early on.
Monitoring & Feedback Loops
A design system is a living, breathing tool - it’s not a once and done exercise. Through the use of surveys we were able to continuously monitor the teams and understand potential areas for improvement with the Design System. Likewise, monthly newsletters enabled us to share regular updates and release notes, to ensure we kept the wider team engaged and informed. When surveyed, 87% of the mobile team said the design system improved delivery speed and quality.
Measuring Success
Results
The introduction of the Tigris Design system within Aviva’s Mobile team has been transformative. Not only did it deliver immediate results, it helped build connections between team members and created a foundation for future projects to build high-quality products at scale, efficiently.
-95%
After implementation, we saw a dramatic drop in bugs per sprint. Less time fixing, more time shipping.
x2
We doubled our delivery speed. We launched critical features, like the COVID Message Centre in just two weeks.
+30% CSAT
We achieved the highest OES score of any digital channel at the company - showing that scalable systems can drive real user value.
Conclusion
Reflections
This project wasn’t just about creating buttons or templates. It was about changing how we work, from reactive delivery to intentional design. It brought teams together, reduced rework, and let us focus on what matters most—building the right things, in the right way, for our users.
““A design system unites product teams around a common language, reduces design debt, and accelerates the product design process.”
Not only did it create a bridge between Designers & Developers, but it served as a focal point for the team to build a genuine care and passion for the products we build for our customers - serving as the foundations for many projects to come as the Design System evolves.
Other Case Studies…
Embedding Journey Management to unlock £50m Growth
How pro-actively monitoring and optimising existing journeys can drive business growth and highlight potential innovation opportunities within large scale organisations.
Empowering Novice Investors to take control of their finances
The advice gap impacts 19 million people in the UK, leading to poor financial knowledge. How can we make financial advice more attainable and help customers take control of their financial futures?