Project Overview
I was the lead designer on this project, which focused on taking the learnings from the Staysure 1.1 project and building them directly into Avanti's Quote and Buy journey. The goal was to replicate the conversion uplift and immediately realise business benefit. My design strategy was to go all-in on the ‘candy’ colours, showcasing the brand in a distinct style. Sprinkling brand assets throughout, giving it that extra recognition factor. As with the Staysure journey the focus was on fixing usability issues, addressing all of the accessibility issues while also innovating within the brand guidelines and building out a design system with consistent reusable UI components.
The Challenge
This was a mainly UI focused challenge. Avanti is the second biggest brand as part of Staysure group and shares an almost identical Quote and Buy journey with Staysure. Other than a few product differentiations, Avanti has the same UX. So the task was to reskin the Staysure journey with the Avanti brand.

The Avanti quote and buy journey faced usability issues such as accessibility challenges for the 60+ age group and UI inconsistencies in fonts, colours, and styles. This caused confusion in form fields and CTAs, undermining trust and highlighting the need for cohesive branding for identity and loyalty.
🔍 Problems
Brand consistency and representation. The brand has been poorly applied providing inconsistency, weakening recognition.
The visual hierarchy was poorly defined causing user frustration and difficulty finding essential information.
Accessibility issues created barriers for users with disabilities. Particularly around colour and readability.
Poor mobile UX the majority of users access the journey through mobile devices, but the mobile site's usability was notably poor and challenging to navigate.
🎯 Goals
Replicate the conversion rate increase by applying all the same UX improvements form Staysure 1.1
Build a design system for Avanti that fixes inconsistency issues and improves design and developer hand offs
Provide a better brand experience by introducing a contemporary aesthetic
Evolve the brand by exploring colour combinations and trying out new UI styles
The
Process
UI
Audit
I conducted a UI audit of the Avanti website to identify areas for improvement. Issues include poor navigation, layout, and branding, as well as accessibility challenges and inconsistencies in colours, fonts, and interactive elements. My recommendations aim to enhance user experience and strengthen brand identity.
1.
Navigation and Progress Indicator:
Navigation between screens is challenging due to the absence of back buttons and an interactive progress indicator. The unclear names for each step add to the confusion.
2.
Accessibility:
The Avanti website's accessibility is subpar, primarily due to inadequate colour contrast. Many brand colours are paired with white text, which hinder readability.
3.
Inconsistent UI Design:
A variety of colours, fonts, buttons, dropdown fields, and text fields, with no end to the disparities. A lack of a standardised component library in the codebase contributes to this lack of consistency.
4.
Layout and Design:
The journey suffers from poor visual hierarchy, making it challenging for users to focus on key elements. The pages are cluttered with excessive choices, violating Hick's Law and overwhelming users with too many options.
5.
Forms and Interactions:
Many form elements have inconsistent hover states and a lack of clear focus states. The use of radio buttons in inappropriate places causes confusion, while variations in size, colour, and font weights create a disjointed appearance.
6.
Brand Consistency:
Lack of brand consistency, including the use of some staysure fonts in some areas. Which is likely a result of oversights by previous designers/developers. But highlights the lack of attention to detail.
Colour 
Exploration
Following the UI audit and while working on a different project, I developed a few colour options that align with the brand guidelines and aim to evolve them further. I tested these options on a new homepage design to assess their effectiveness across different areas of the site. Using an APCA contrast checker, I provided tangible data to support the comparison.
Visual
Design Style
After experimenting with various colour options on the homepage, I incorporated more iterations in the quote journey while maintaining the brand's established visual style. This led me to create a new visual design approach that embraced a skeuomorphic aesthetic, highlighting the brand's 3D elements.
Concept 1
This concept embraced a flat design approach, enhancing the existing brand colours. It incorporated a deeper blue as a secondary CTA colour, making it accessible and also using it in gradients for a better visual experience.
Concept 2
This concept employed a skeuomorphic design approach, leveraging the brand's existing colour palette. Also, altering it like concept 1, to create a rich, tactile experience. By incorporating realistic textures and 3D elements, the design offered depth dimensionality while retaining the recognisable colour scheme.
Final UI
Concept 2 was the final direction of the UI that was chosen. It focused on blending the blue gradient with fresh colours and large, 100% smooth rounded corners. This combination created a polished appearance, adding depth and dimension while enhancing the overall user experience. The new aesthetic brought a modern touch to the brand's identity, striking the perfect balance between innovation and sophistication.
Prototyping
Avanti 1.1
Design System
Using the Staysure 1.1 Design System as a foundation, I created a duplicate file and began updating it with a fresh visual style while also identifying potential areas for improvement. Although I introduced a new icon set and incorporated updated colour palettes, the fundamental aspects of the atomic design system including typography, spacing rules, and layout remained consistent.
Key Focus Areas
🎨 Brand Evolution
💊 Skeuomorphic Style
♿ Accessibility
⚡ Efficiency and Speed
📈 Scalability
Translating the Brand Guidelines
Using the principles of atomic design, I systematically organised and structured design elements to ensure consistency and scalability across various the various applications while staying true to the brand's identity. I used advanced techniques such as the new APCA contrast checker, which is expected to be used in WCAG 3.0 to ensure readability and usability for all users.

See More On Design Systems

See More
TRustpilot
Reviews  
TrustPilot reviews offer invaluable insights into customer satisfaction and usability. In this case the the reviews consistently highlighted the ease of use which reinforces the notion that the platform prioritises customer outcomes and accessibility, enhancing the overall user experience and building trust in the brand.
Project
outcomes
Given Avanti's status as the group's second-largest brand, this project was crucial. The design phase took only a few weeks, focusing primarily on enhancing both the user interface and the brand itself. As a result, the project significantly boosted the brand's appeal and user experience, leading to increased customer satisfaction and engagement.
✅ Conversion
The project led to a significant increase in conversion rates, attributed to the improved user journey. This uplift in conversions translated directly into higher sales and customer retention.
Brand Evolution
A key part of this project that I am particularly proud of is, Avanti's brand evolution. The new UI look is modern, fresh, and visually attractive, making the journey more appealing to both existing and potential users.
✅ Usability and UX
Although, the main focus was on UI by following the same UX principles as Staysure it resulted in a more intuitive and enjoyable customer journey. Enhanced accessibility and usability which improved customer satisfaction, ensuring a seamless interaction with the brand.
View more Projects