Tools
-
​​XD
-
Axure
-
HTML/CSS/javascript/ nunjucks
Team
-
​4 .Net Developers
-
2 Testers
-
1 Business Analyst
-
Scrum Master
-
UX Designer (Me)
My Role
My role is to create a high converting form that can adapt to different legal types such as conveyancing and Claim management that can be white labelled for multiple businesses .
Timeline
4 months
Core colours
#4B555E
#cfedfc
#337878
#EAE9E9
Fonts
Arial
Accessibility
WCAG 2.1 AA
Problem
The current form is struggling to convert and from an accessibility audit is struggling in key ares, therefore we have been asked to refresh and white-label a personal injury and conveyancing form.
Solution
The business has decided to change its web tech stack and in doing so began the process of updating all its existing software.
My Design Process
Question the brief
We noticed the brief is directly from the business and no customer problems or enhancements have been highlighted. Although tempting to start from scratch at this point and listen to internal feedback we will follow a user-centred approach as follows.
DEFINE RESEARCH
We began by setting a 6-week initial plan that will cover three sprints. The plan will include primary and secondary research including colleague and customer interviews and a usability study on the existing form.
As primary research will most likely take time to setup we will start secondary research right away and reviewing analytics, session cam footage, AB test reports and competitor analysis.
​
By setting out a plan and expectations early on through a clear roadmap we can begin to set up venues and arrange times for our customer research, book time with colleagues and give stakeholders the information they need to communicate with the wider business.
SECONDARY RESEARCH
From our secondary research, we gained the following feedback
-
Customers are spending a long time completing the form
-
High dropout rate
-
Many customers didn't know what to do when receiving an error message and would try to fix the problem before ultimately dropping out
-
Analytics could be improved to improve insight
-
Customer demographics of claims and conveyancing customers were reviewed
-
Competitors have fewer fields and don't use internal jargon
-
Competitor's forms take an average of 58+ seconds to complete
-
Most Competitors gain leads from capturing email addresses before giving a quote
​
We also reviewed the current accessibility level of the form and highlighted multiple potential issues
Primary Research
From our primary research, we gained the following feedback
​​
From colleague interviews
​
-
Many customers had tried completing the form before calling
-
Customers who filled out the form and received a call back from the wrong team would then be put on hold until a member of staff in the relevant team was available
-
Customers were mostly happy to receive a callback from the team within the hour in contrast to a few hours where customers had most likely spoken to another company
-
Personal injury customers want to tell their story and often fill the form out in large detail, however, due to company policy an advisor needs to complete the form again whilst talking to the user​
Customer interviews
-
Customers like to use the conveyancing calculator to find out about fees
-
Conveyancing customers submit multiple enquires with different companies and prefer not to give away too much information
-
Customers prefer to speak to someone regardless of the amount of information on the website
-
Ultimately fees are important and are willing to persevere for a good price
-
Speed of process is important
-
Personal injury customers don't want anyone to get in trouble but want to improve the process
Current form usability study
-
Usability testing current formCustomers were set a brief task to complete a conveyancing form and would unknowingly invoke an error
-
The majority of customers filled out the general inquiry form meaning they would be put on hold when receiving a callback
-
Error messages confused customers and gave little direction as to where the error was and relied on the customer reading each field until they found the problem
-
Requesting unnecessary information
-
No postcode lookup, feels tiresome
-
The tab order was incorrect and skipped fields
-
Not branded
Proto persona workshop
After collecting themes and insight the next stage of our action plan was to create a new web form that focussed on alleviating discovered pain point from both the customer and the business. We felt like we had enough information in the problem stage and decided to move in to the solution phase of the double diamond.
Shona
Age 32-45
Conveyancing Customer
-
Latest tech (iPhone 6+)
-
On the property ladder
-
Thoroughly understands the conveyancing process
-
No loyalty (happy to go with whoever provides the fastest service and is the cheapest)
-
Short on time
-
Tech savvy (4)
Example persona
Mary
Age 60-75
Claim
Customer
-
Hand me down technology (laptop - windows 7)
-
Gathering information and not wanting to commit to anything
-
Wanting to understand more about the general claims process
-
Not sure if she can claim
-
Doesn't want to get in anyone in trouble
-
Tech savvy (1)
Example persona
How Might We and crazy 8's workshop
A variety of features were presented to be labelled and grouped together. it was found that not one combination suited everyone but strong patterns were identified.
Key take aways from the workshop
-
The form is large and feels better when broken up using progressive disclosure
-
Removing unnecessary fields.
-
Adding a postcode look-up will remove the need for several customer inputs
-
Switching the form around to give the customer the information they want first
-
Moving the form higher up on the page and placing the background image behind it gives it more exposure and allows the page to flow
-
Changing the background images that relate to what dropdown you have selected gives a more targeted feel to the page
-
Single column view and keeping dimensions of form fields proportional helps readability and user input
-
Use placeholder text to help suggest content we want from the user
-
The submit button should describe exactly what the customer is doing
-
Give positive feedback that the form has been successfully submitted to avoid customers from submitting it again
-
Preferred call-back times
Agree approach
A variety of wireframes and designs were created in alignment with the research and workshops and presented back to the team and stockholders and an approach was agreed.
Prototype, test and analyse
We created a responsive high-fidelity prototype using HTML, CSS and jquery and the internal frontend framework.
-
Adding a call-back time slot would be prefered
-
adding manual address fields for customers that can't be found by postcode lookup
-
Some customers felt the steps were broken up and would prefer all the form fields to be on one page however we didn't observe problems completing this form
-
Open questions caused confusion, and radio or checklist prefered
-
Accessibility review noticed key issues such as the form not using labels
-
The form should be tailored to each page, and we shouldn't need to select which service is required "If I'm looking at conveyancing, why do I need to tell you I'm submitting a conveyancing enquiry and not a personal injury enquiry"
Early wireframes and user flows
Iterate
Next step we'll be looking to address the pain points identified in our usability study, ideating further solutions with the team and arranging further usability study.