Webform Optimisation • Case Study | Jennifer Hibdige's Portfolio

Overview

A large client in the automotive industry required the experience of forms across their website to be audited. Needing help in identifying issues that could be improved to align better with their business values and customer needs, and to create innovative suggestions for change.

The Problem

One of the client's core business values was presenting a seamless, cohesive experience to users–but the current state of forms didn't do that. Instead the many forms across their website had been implemented at various points in time with many different teams working across them which resulted in;

💻
Conflicting web page templates
🎨
Misaligned design system styles
🗺️
Unmapped user flows

We set our focus on the 4 most popular forms across the website;

Contact your store
Reserve a test drive
Register your interest
Book a service/WOF

What We did

01.

Identified areas for improvements

Audited existing forms

To understand the current state of the forms and how users currently interacted with them, I documented the different flows across mobile and desktop highlighting;

Categorised problems into usability heuristics

From mapping the flow and identifying problem areas I categorised them into the usability heuristics that they violated. Each of these violations included a ranking of their impact towards a user being able to submit a form.

key issues identified

😕
Requiring a user to enter vehicle information they wouldn’t easily know or have on hand
👓
The font colour of disclaimers didn’t pass accessibility standards
🪪
A form required information that felt too personal compared to the forms main intent
🛟
No clear links to help if a user ran into issues entering information on the form
🔎
Wayfinding of some of the forms proved to be difficult unless you knew where to go already–it was easier to Google the form directly than find it on the website

These initial audit findings were presented back to the client, explaining the key issues and how it affected a user, offering suggestions but not solutions of how to improve them.

02.

Talked to real users to understand how they would interact with the product

Recruiting interviewees

With the knowledge learnt from the forms audit we wanted to gain insights from the two following groups of users;

We wanted to...

Understand their process and approach when purchasing a vehicle

See how they interacted with the client’s website and online forms

Learn which competitors they used and their experience with them

How we found them

We used Askable, an online tool for recruiting participants to find our pool of users. We created a set of screening questions to understand if;

They had recently purchased a new or used vehicle
If they were a private or business vehicle owner
If they recently required servicing or WOF
What age range they belonged to
Their location in New Zealand

From those that meet our requirements, we shortlisted a group of people that varied in age, location, new or used purchases, and if they had a private or business vehicle.

We wanted to...

Understand how they interacted with form submissions

Identify if there’s any outlier issues on their side

Gain a different perspective of how the forms flow through to them

How we found them

We worked with the client to shortlist which stores across New Zealand would be the best to interview, conducting one in-person and one online.

Conducting interviews

Script writing

I created two scripts for each group of participants based on information learnt in earlier research stages to form the narrative of the script, while also expanding on areas that we were lacking perspective in.

Each script was broken down into the following main points;

Customers

Explaining their most recent purchasing experience
What their process is when wanting to buy a vehicle
If they required servicing or WOF and their experience booking that
Conducting tasks for the user to complete to find and use each form we were focusing on
Ranking what aspects e.g. pricing, features, insurance is most important to them when buying a car
What they’d love to have to make buying a car or using a form easier

Store workers

Who they are and what their role is in the store
How form submissions go through to them and the next steps from that
Any common issues they encounter with the forms
Any common issues customers have when contacting them or coming into the store
What they’d love to have to make receiving submissions and interacting with customers easier

Interviews

We ran our customer interviews and one store interview online, with the second store interview in person.

During these interviews I participated in note taking in Miro, colour coding each of the notes to the person and segmenting them based on the main points in the script. Points of interest I noticed in the interview from either comments, expressions, or how they interacted with the website were noted down.

Understanding interview findings

From the interviews we gained new perspectives and insights we would’ve missed otherwise. For example, one user mentioned how their height played a big part for them when researching vehicles, while another simply expressed their complete disdain for online forms–always preferring to call instead.

The vast amount of notes were clustered into common themes, enabling us to easily identify common insights around customer behaviour, preferences and challenges–while also noting anomalies.

The thematic analysis helped in pulling forth the following key issues for both the customers and store workers;

Customer issues

😕
No users were able to find the ‘contact your store’ form
🧩
Users had become used to patterns that had common call-to-actions accessible from any page in the website and were expecting that
🤷🏻‍♀️
Were often confused on how to find a specific form within the website
💵
All users considered price the most important thing when thinking about buying a vehicle

Store worker issues

📍
They often had customers booking for the wrong location due to how the store location data was labelled on the website
💲
They’ve noted the pricing on the website is different from what they actually offer in store

03.

Designed concepts based on top priority

Using the findings learnt from our internal and qualitative research, we moved onto the next phase of creating design concepts addressing the key user experience issues identified.

Sizing the user experience improvements

From our cluster of themes, we had a good chunk of key issues to be improved. But we understood due to development constraints and the impact of a change across the entire platform that we wouldn't be able to tackle all our identified issues.

To fit within the constraints, we ran an internal sizing exercise ranking the issues from small to large based on how much development effort and the effect on the overall website it would be.

Interview notes sized from small to extra large

From this sizing exercise we were able to cut out the larger items we knew would sit outside the project constraints, setting our focus on the small and medium sized items.

These were once again sized in a matrix, identifying the quick wins based on the following points;

Least to most impact for customers

Least to most development time

Created concepts to visualise solutions

With a clear direction on what items were priority I was able to move to Figma to begin designing concepts for these suggested changes.

Getting started on the concepts was quick and easy due to our team having a design system for the client created in another stream of work. I was able to easily pick out page templates and pre-existing components, modifying them to meet the design changes but still using styles that fit within the clients brand.

Key areas we created concepts for

Note: Due to client IP and this project being still in progress, the concepts have been recreated as lo-fi blocks to visualise the designs created.

❌ Problem

Users were often confused on how to find a specific form within the website

✅ Solution

Improving wayfinding of the forms with new IA suggestions in the navigations and suggestions for having links to main forms in the footer

❌ Problem

Users had become used to patterns that had common call-to-actions accessible from any page in the website and were expecting that

✅ Solution

Created concepts of how these common actions could be introduced to the websites navigation

❌ Problem

No users were able to find the ‘contact your store’ form due to no clear next step actions after selecting their store location

✅ Solution

Changing functionality of how to a user would discover the ‘contact your store’ form, instead surfacing it at an earlier level

❌ Problem

Stores informing us that pricing on the website is often wrong and is not a fixed price

✅ Solution

Specifying that pricing was estimated on ‘servicing/WOF’ forms, and improving the overall experience and UI of this form, and providing the user with more helpful information after they’ve submitted the form via the success page and confirmation email

❌ Problem

Stores often had customers booking for the wrong location due to how the data was labelled on the website

✅ Solution

Offering a quick UI fix of swapping the store name and store location names around

Outcomes

At the time of this case study, this project is still currently in flight, with the final outcomes yet to be determined. However, from this project the client now has various artefacts from research to design concepts as starting points for what to develop across the website to meet the clients need of creating a more seamless and cohesive experience for their customers.

Optimising online webforms for a large automotive manufacturer

Customers

Store Workers

Let's Chat!