2024
Embedded Files
UX Form Improvements.
UX Forms for Comparison Service Websites
Project Summary.
Project Summary.
I worked on a series of UX improvements for online forms across various service comparison platforms, including estate agents, solar panels, EV chargers, and heat pumps. The goal was to streamline the user experience, reduce friction in completing forms, and ultimately increase the completion and conversion rates. This involved analysing current form flows, identifying pain points, and implementing design solutions based on usability principles and user feedback.
My Role
My Role
UX Researcher
UX Designer
UX Writer
Key Skills
Key Skills
Prototyping
Components
Information Flow
Tools
Tools
Figma
Miro
Timeline
Timeline
January 2024 - January 2025
Problem Statement.
Problem Statement.
Users often abandon service comparison forms due to their length, complexity, or unclear instructions, leading to lost leads and lower engagement. The challenge was to redesign these forms to make them intuitive, accessible, and efficient, while still capturing all necessary information for accurate service matching.
How might we simplify the form process to reduce user friction and abandonment rates?
How might we simplify the form process to reduce user friction and abandonment rates?
How might we clearly communicate the purpose of each input field to ensure users provide accurate information?
How might we clearly communicate the purpose of each input field to ensure users provide accurate information?
How might we design a flexible form experience that adapts to different services (estate agents, solar panels, EV chargers, heat pumps) while maintaining a consistent, intuitive workflow?
How might we design a flexible form experience that adapts to different services (estate agents, solar panels, EV chargers, heat pumps) while maintaining a consistent, intuitive workflow?
UX Research.
UX Research.
To identify friction in service comparison forms, I tracked user behavior using Microsoft Clarity, analyzing drop-offs and time spent per page, which informed funnel and line charts of form completion. I also gathered qualitative insights through partner surveys and open discussions, uncovering issues like unexpected contact and incorrect submissions. Combining these methods helped pinpoint both where users abandoned forms and why, guiding targeted UX improvements.
Form Abandonment Rate at Each Step
Number of Users Remaining at Each Form Page
The contact details page experiences the highest drop-off at 25%, indicating users are hesitant to provide personal information without clear expectations of what will happen next.
Quote 1. Unaware of being contacted
Quote 1. Unaware of being contacted
"We often hear from users that they didn’t expect to be contacted after filling out the form. They complain about receiving calls or messages without knowing this would happen."
Quote 2. Incorrect form submissions
Quote 2. Incorrect form submissions
"On the Estateagent, people frequently submit forms even though they don’t own a property. This leads to frustration on our side because users are trying to find a rental, which isn’t the service we provide."
Understanding the User Journey.
Understanding the User Journey.
A typical journey starts with users researching their need, finding the site, and reading content before reaching the form, the key step that turns browsing into real offers. Once submitted, users are contacted by partners and eventually review offers.
The form is integral to this flow, but pain points disrupt the experience:
Unclear why personal details are needed
Technical questions users don’t fully understand
Too many sales contacts afterward
Repeating information already given
Options that don’t match their situation
Being contacted at inconvenient times
By mapping these against the journey, it became clear the form is both the bridge and the bottleneck. Fixing its clarity, transparency, and relevance strengthens the entire user experience.
User Journey Map: Comparison Site Tender Service
Ideation.
Ideation.
After completing the research phase, I moved into ideation to translate insights into actionable design directions. The wider team and I brainstormed pain points and mapped solutions, focusing on clearer language and reducing drop-offs. Using card sorting, I reorganized questions into logical groups, with the goal to use this exercise to find ways to simplify the flow and made forms easier to complete.
Wireframes.
Wireframes.
After the research phase, I created wireframes that outlined the structure of each form, including the text, field IDs, and input types (radio buttons, dropdowns, free text, etc.). The wireframes were then shared with the wider team for feedback, and on occasion reviewed by the UX manager to ensure alignment with best practices and business goals. Once approved, the wireframes were handed over to developers to build into functional forms.
This marked the beginning of an iterative cycle: forms were tested internally and feedback was collected, with improvements made to reduce friction and improve accuracy. Over time, this process ensured that forms were not only functional but also user-friendly, efficient, and aligned with partner needs.
Testing.
Testing.
Once new form designs were finalized, each went through internal testing to ensure the fields worked correctly and that leads entered the partner systems without error. After validation, we ran A/B testing by splitting traffic between the existing form (Version A) and the new design (Version B).
These tests consistently showed that simplified, transparent, and mobile-friendly forms outperformed the original versions, guiding future improvements across estate agent, solar panel, EV charger, and heat pump comparison forms.
In this market, we learned that shorter forms ≠ better user experience.
Flow Chart of Form Development Process
Components.
Components.
Solution.
Solution.
As part of my role, I reviewed and proposed improvements to form flows and wording across several services. While not all suggestions were implemented, each was grounded in UX writing principles: clarity, reducing cognitive load, and ensuring users provide accurate information.
Estate agent form recommendations
Estate agent form recommendations
The changes improve clarity and user understanding with clearer language and guided options that help users choose correctly, while an ownership check filters ineligible users to enhance lead quality and save partners time.
Solar panel form recommendations
Solar panel form recommendations
The form was redesigned to improve clarity, flow, and user engagement by adding relevant solar-specific questions, financing options, and readiness checks that help both users and partners gauge project stage and funding needs.
Questions were grouped into themed sections for easier navigation, contact time options were made more precise, and BER rating pop-ups were introduced to educate users and prevent ineligible submissions.
Prototype.
Prototype.
Reflection.
Reflection.
What this project taught me
What this project taught me
I learned the importance of using plain English so users clearly understand each step of the process. I also discovered how small design choices, such as using radio buttons instead of checkboxes, can improve clarity and reduce user errors.
Skills I developed
Skills I developed
This project strengthened my Figma prototyping skills, particularly in building reusable components and form flows. I also deepened my knowledge of UX writing for forms, learning how language and structure directly impact usability.
What I would do differently
What I would do differently
If I were to approach this again, I would dedicate more time to researching and validating questions, especially by consulting industry experts. This would ensure that form content is not only user-friendly but also more precise and relevant to specialist contexts.
The End.
The End.
Google Sites
Report abuse