Our Work |Unravel

Highly Adaptable Cross-Platform Design System​

Written by Michał Kosztowny | May 10, 2024 10:45:09 AM

 

We collaborated with a leading UK motor insurance company to create a consistent design system for the flawless user experience. The design system was created simultaneously to web & mobile app development. The result was an omnichannel product revolving around three main components.

 

 

 Multiple touchpoints

Web​

Focused on onboarding clients and conversion optimisation​.

 

Mobile app

Providing self-service post-purchase support of the motor policy.

 

Chatbot

Present in both the mobile and web experience, the chatbot was the first line of support for customers.

 

 

Designing for multiple brands

Creating a multi-brand structure in Figma was one of our most complex undertakings. We built the entire Design System from scratch, tokenized colors, typography and components. Tokens in design systems are a set of standardized, reusable values that help maintain consistency and scalability in a design.

 

 

 

Naming

For the web platform, we adopted a two-layered approach to tokenization due to its complexity and multiple colors in use.The first layer consisted of alias colors, while the second layer comprised system tokens, serving as the final tokens employed in the design and all components.