Back to My Work

Website & Insurance Quote Engine

A responsive website and dynamic quote engine designed for Countrywide Legal Indemnities, helping solicitors and conveyancers quickly source accurate policy quotations.

Role UX/UI Designer & Front-End Developer
Type Web Design & Quote Engine Interface
Client Countrywide Legal Indemnities

Project Overview

Countrywide Legal Indemnities needed a modern, easy-to-use website and quote engine that would allow solicitors to quickly find the right indemnity policy using a streamlined, professional interface. The previous system was slow and unclear, leading to unnecessary phone and email queries that created friction for both users and the support team.

This project encompassed UX design, UI design, and front-end implementation, with the goal of reducing friction, cutting down manual queries, and dramatically improving clarity. The system was built to help legal professionals get accurate quotes faster, with confidence in the results.

Context & Audience

The primary audience consisted of solicitors, conveyancers, and legal professionals seeking indemnity policy quotes during property transactions. In this context, quotes require absolute clarity, accuracy, and speed—delays or confusion can hold up entire transactions and create significant professional stress.

The previous system was frustrating for users: unclear question flows led to incorrect policy selections, forcing users to call or email for clarification. This not only slowed down their work but also increased support burden. The new website needed to feel trustworthy and reflect Countrywide Legal Indemnities' reputation for expertise while making the quoting process genuinely effortless.

My Role & Responsibilities

Objectives

  • Build a fast, intuitive and legally accurate quoting tool
  • Reduce the cognitive load for users by simplifying question flows
  • Ensure the interface is accessible and responsive
  • Communicate trust and professionalism through design
  • Reduce support queries by improving clarity

Challenges

  • Converting complex insurance policy rules into user-friendly flows
  • Designing UI that stays clean despite dense information
  • Ensuring conditional question logic works smoothly
  • Balancing speed with accuracy
  • Maintaining consistent appearance across different browsers/devices

Process

1. Discovery & Mapping the Policy Logic

I began by analyzing the different indemnity policy types and their specific conditions and requirements. This involved mapping complex question trees and dependencies to understand how different user inputs should trigger different follow-up questions. I identified the most common user journeys and prioritized optimizing those paths while ensuring edge cases were still handled correctly.

2. UX Design & Wireframing

With the logic mapped, I designed a simplified step-by-step flow for the quote engine that broke complex processes into digestible chunks. Wireframes focused on clarity, appropriate input spacing, and readability, with careful attention to error states, contextual help text, and progressive disclosure—showing users only what they needed at each step to avoid overwhelming them with information.

3. Visual Design & Prototyping

I created a clean, professional interface that reflected the seriousness and trustworthiness expected in the legal sector. This involved developing a consistent design system covering typography, button styles, form elements and iconography. Interactive prototypes were produced for internal review, allowing stakeholders to experience the flow and provide feedback before development began.

4. Front-End Development

The implementation phase involved building responsive layouts in HTML and CSS, then developing the dynamic behaviour using JavaScript and jQuery. I implemented logic-driven form steps that adapt based on user inputs, showing or hiding fields contextually. The front-end structures were prepared with clear hooks and documentation for later backend integration, ensuring smooth handoff to the development team.

Key Features of the Quote Engine

Dynamic form fields that adapt based on user answers

Multi-step, guided quoting process

Clear progress indicators

Intuitive policy selection results

Accessible form components

Logical grouping of related questions

Error validation and inline guidance

Responsive layouts for tablet and desktop

Clean and legally appropriate visual language

Deliverables

Outcomes & Impact

The new quote engine significantly reduced user confusion and support queries, with solicitors able to navigate the system confidently without needing to call for clarification. Faster quoting improved the experience for busy legal professionals working under tight transaction deadlines, while responsive layouts ensured consistent usability across devices—critical for professionals working from various locations.

Clear visual hierarchy and improved form design reduced abandonment rates, with more users completing quotes successfully on their first attempt. Countrywide Legal Indemnities received consistently positive feedback on the professionalism and ease of use of the new system, strengthening their competitive position in the market.

Gallery / Visual Highlights

Homepage design for Countrywide Legal Indemnities
Quote engine flow — step-by-step interface
Back to My Work