John Lewis | RSA Insurance Group

UI Design | Responsive Design | Branding | Prototyping

Tools: Figma

Simplifying Pet Insurance: MY ROLE AS UI DESIGNER

John Lewis pet insurance was all about creating a user-friendly experience for getting quotes and buying policies online. We took a user-centred approach, which means we focused on what pet owners actually needed and wanted.

As the new UI designer on the team, I hit the ground running, contributing to the visual foundation of a revamped user experience. My focus was on creating a user-friendly and consistent platform.

Quote summary page example

MAIN design learnings

Being new to the team presented a challenge: integrating myself into the team dynamic while simultaneously learning their workflow, brand identity, and project goals. However, I actively tackled this challenge. Through rapid assimilation, I was able to find my place within the team and make a valuable contribution to the project's success.

The goal: is to design a clear and engaging solution that helps users understand the functionality of specific product features. By focusing on these elements, I helped create a platform that feels seamless and consistent, making it easier for John Lewis customers to find the perfect pet insurance plan.

Design systemS

We formed a new multi-disciplinary design system working group, which included UI/UX and content designers, design system leads, a product lead and developers who worked on the project specified.

We needed to pursue two work streams simultaneously, the Design system integration and the component design for the specific project:

Design System Integration.

We presented the proposed component to the design system team, aiming for its broader integration across various RSA products like Home, Motor, and Claims.

Component Design

We focused on designing the new component, ensuring it is seamlessly integrated with the project's needs without slowing down development cycles.

 
 

New component design

 

User-Friendly Co-Payment

The UI and UX redesigned the co-payment section based on user feedback. Here's the winning formula:

This user-focused design makes the co-payment section clear and informative for all pet owners.

  • Minimises confusion and simplifies information.

  • A straightforward title sets clear expectations.

  • Empower users with knowledge about vet bills.

  • One scenario ensures easy understanding on mobile devices.

  • Sets clear expectations about future co-payments.

 
 

Finding the Perfect Balance: Excess Calculation Illustrations

We worked with the client to finalise the shade of grey for the bars in the new Excess Calculation Illustrations component.

  • Simplifying Excess Calculations for Insurance Users

    Our goal was to make excess calculations in the pet insurance product easier for users to understand.

    The initial grey was too light, but the client's proposed darker options were a bit too much. We needed a balance.

  • We achieved this by replacing a potentially confusing process with a clear equation:

    Your Chosen Excess + User-Selected Percentage Discount = Total Excess Amount

    This simplified formula, presented within the "Excess Calculation Illustrations" component, was well-received during user testing.

    By replacing a complex process with a straightforward equation, we successfully demystified excess calculations, a common pain point for insurance users.

    The grey bar concluded with the lighter grey.

    • A lighter grey ensures the bars don't appear "filled" with grey.

    • A darker grey risks confusing users and undermining the component's purpose.

    Following positive user feedback, the component was fully integrated into the RSA design system, ensuring its continued use across future pet insurance products.

 

Versatile Button with Icon Design

The buttons come in both vertical and horizontal layouts, making them adaptable for various RSA products and the overall design system. This enhances usability and maintains a consistent user experience.

Key Benefits:

  • Icons and text work together for clear communication.

  • Vertical and horizontal layouts offer flexibility across different use cases.

  • Icons improve clarity and user interaction.

  • Consistent design strengthens the RSA design system.

problems that I over came

John Lewis customers deserve a smooth and easy experience when it comes to finding the right pet insurance. That's why we focused on making the online quote and purchase process clear, user-friendly, and informative.

We simplified the explanation of different insurance plans, making it easier for customers to understand exactly what their furry friends are covered for. No more confusion, just clear and concise information.

We designed a user-friendly online platform that gives customers easy access to transparent information about various cover levels. Think of it as a helpful guide that puts all the details at their fingertips.

Integrating Google Analytics gave us valuable insights into customer behaviour during the quote and purchase journey. This data helps us make informed decisions about pricing and underwriting strategies, ensuring we continue to offer the best possible experience for John Lewis customers.

  • Our initial designs were put to the test, and the results weren't quite what we'd hoped for. Both desktop and mobile versions had areas that needed improvement. This feedback was crucial! It allowed us to refine our designs and make them more impactful.

  • The UX/UI/Content design team worked together to understand the feedback and make adjustments. We wanted to ensure our designs not only looked good but also resonated with the needs of pet owners (the "pet tribe"!).

  • We believe design is a journey, not a destination. Once the UI design for the entire quote and purchase process was complete, we planned further moderated testing sessions. This commitment to ongoing testing helps us identify and fix any remaining issues.

  • We created targeted scenarios to focus on specific areas that needed improvement, particularly the co-payment section. By dissecting these challenges, we could develop solutions that make user interactions smoother and more intuitive.

 

Final designs

For more information on the ux and research of the project.