Could forms ever be loved? A content designer’s mission to find out (part 1)
Hands up, who hates filling out online forms? Anyone indifferent? How about anyone who’s ever enjoyed it? Odds are, most of you will belong to those first two tribes.
The truth is, forms are a necessary part of life. They’re a bit of a drudge, and most of us blast through them as quickly as possible so we never have to think about them again. Perhaps they’re never meant to be loved, but there’s no reason why they can’t be a little more engaging, a little easier and, who knows, maybe even slightly enjoyable — with the right magic touches.
So we’ve embarked on a mission to revamp online forms at Auto Trader, and to hopefully add those magic touches that will make all the difference.
Combining the skills of product designers, developers and a content designer (that’s me!), we’ve already started pulling apart the traditional forms experience and exploring exciting new concepts. In this article we’ll share some of our thinking, experimentation and learnings so far.
Form design: A brief overview
As excited as we are to revamp the unlovable form as we know it, we cannot forget that its base function is, first and foremost, a very practical one — to collect important information.
It’s no surprise that a poorly-designed form leads to high abandonment rates, low conversion rates and a high level of user frustration, while a well-designed form does the exact opposite.
But our project isn’t just about making traditional forms better, and nor is it just about conversions and performance. It’s about designing an experience that sets us apart from the rest of the industry.
Through good content design, we aim to support and educate our customers as they go, by creating an inclusive and human-centred experience. We’ll be designing for everybody, no matter if they’re 17 or 70.
The thing about traditional online forms is …usually, the only ‘good part’ comes at the end.
“Fill in this form and you can buy that shiny new thing.” “Fill in this form and we’ll sign you up for that exciting new service.”
But, what if the ‘good part’ wasn’t just at the end? What if the entire process could feel good?
That’s the task we set ourselves.
So, where does content design fit in?
Content design and UX writing, although still relatively new additions to traditional design and product teams, is a key element of good form design. Content design is about giving users the information they need to successfully complete a task, and giving them that information in the best (and most relevant) way possible. (Check out this post on a day in the life of a content designer at Auto Trader for a closer look at what we get up to on a daily basis).
Contrary to popular belief, content design isn’t just about writing words, it’s about designing the very best experiences to go with those words. And because we’re going to be re-creating our forms from scratch, we have the creative freedom to completely change the way we communicate absolutely everything, from essential information, reassurance and task guidance to the Auto Trader brand voice and personality.
To do this properly, content design needs to be involved from the very beginning, as the way we display and communicate the best possible content is going to directly inform the overall design and development build, and vice-versa.
This is why content design has a seat at this table at such an early stage, and I couldn’t be happier about that.
Building brand experience into form design
Most of us have found ourselves on a website for a brand we love and discovered it to be packed full of personality. We smile as we click through the various journey points until … oh, the form.
All too often, a brand’s personality and voice — the essential building blocks for creating an overall brand experience — doesn’t quite extend to the typically ‘peripheral’ elements of the website such as contact pages, FAQs and, of course, forms. Sometimes they’re so different you think, “Am I even on the same website?”.
At this point we have to raise a little ‘guilty’ hand. But this is OK. This is exactly why we’re working on the project in the first place.
Newer brands to the general market have already built brand experience into every element of their online products, forms included. Bulb is a great example of this, with its incredibly simple forms which barely even look or feel like forms.
One of Bulb’s key design principles is to put simplicity before flexibility — something incredibly important with a service as potentially complex as energy tariffs. As a result, the brand’s energy quotes ‘form’ features a super simplistic step-by-step series of simple questions, often with binary choices. They acknowledge that this means more clicks for the user (a potential downside), but it also means much easier, faster, clearer choices that every user can understand.
This approach makes the usually dull and often confusing process of getting a domestic energy quote feel effortless and quick, more like a conversation than a chore.
The brand also bakes little nuggets of delight into its forms that reinforces the brand’s friendly, bold and ‘human’ personality. Look at what happens when I increase the number of bedrooms in my house, for example:
Nice touch.
It’s these little ‘oooh’ moments that can make all the difference for customers, particularly when they’re navigating a potentially difficult or complex task outside of their comfort zone. Break down a big, ‘scary’ task into manageable chunks of friendly, easy questions and — all of a sudden — it’s not so scary anymore. It’s natural. It’s just a conversation, and an enjoyable one at that.
So, what about Auto Trader?
The Auto Trader brand experience
We all have that one person in our lives, the one we always turn to for help with ‘the big stuff’. Buying a car, buying a house, getting a new job — and we turn to them because we trust that person. We know that person has been there before and experienced it for themselves, or we simply know that they’ll give us good advice no matter what.
Auto Trader is that ‘person’.
Auto Trader is pioneering, insightful and relatable — our three brand character traits. They encompass a whole load of great things that would fill a whole other blog post, but in this context they’re there to shape how we bring the AT brand experience into our revamped forms.
We’ve been obsessed about all things automotive for the past 40 years. We’ve spent all this time making sure we’re the experts, so that our users don’t need to be.
We’ll try new things and push the boundaries, never afraid to test out a new feature that might help create a memorable moment of delight for the customer. We’ll never be biased, but always transparent. There will be trustworthy insights at every step, with plenty of reassurance and helpful tips along the way. It will feel warm, friendly and, most importantly, human.
It’s our job to make sure we don’t presume that everyone speaks our language and knows as much about the automotive world as we do. We must make it easy for everyone to understand.
But how do we build all these things into a form experience?
The project starts here
Our first port of call was to run a teardown of all the forms we have across the website and app right now.
We asked ourselves a bunch of questions on why they look the way they do, whether we’re asking for the right things at the right time, and in the right way. All of this was important for context — we needed to ensure that whatever wonderful thing we build next will work across the entire experience, not just in one isolated area.
Next we needed a ‘guinea pig’ subject area to focus on for this initial exploration stage. We chose to look at something complex like how applying for finance could work, because we knew this extra level of complexity would make it the ideal testing ground for all our most creative ideas.
From there, we launched a research survey to 100 participants to give us some initial guidance and direction. We asked them general questions about their experiences of online forms, with a mix of multiple choice, open-ended and pictorial comparison questions to answer. This gave us guidance on everything from current levels of trust in online forms to preferences on features and thoughts on layouts.
Our key findings:
- People like clarity and help through conversational design and clear instruction. They don’t want to feel overwhelmed; they want to concentrate on a single task at a time
- People value trust and security when handing over personal information. They need someone they can rely on to give them the best experience and outcome
- People have busy lives and time is precious. They value simplicity and performance, as form filling can be tiresome.
Armed with these insights we began early experimentation with layouts and concepts, eventually creating an initial flow of prototype screens that would take users through the first part of the finance process — getting a quote estimation.
Design-wise, we focused on creating a very minimal, step-by-step format with just one simple question at each step. We ensured there was plenty of help where it may be needed (e.g. when selecting the type of finance — HP or PCP — do they know the difference?).
We then spent time making sure the copy’s tone of voice reflected our brand characteristics on every screen. Taking additional direction from the survey feedback, we focused mainly on creating copy that would be both ‘insightful’ and ‘relatable’ — keeping those brand characteristics in there — as well as jargon-free and easy to understand. We’re not in the business of making our customers feel stupid or overwhelmed, so we focused on speaking to them in good old-fashioned conversational English (something we’ll come back to in more detail later on.)
Overall we wanted to instil that sense of trustworthiness that was so important to our users, as well as conveying empathy and plenty of positivity. This was incredibly important, given that a finance application can be a difficult and sometimes worrisome process for many people.
Preparing for testing
We started off in wireframe mode. This was because we wanted our testers to focus purely on the functionality and wording to begin with, rather than getting caught up in aesthetics and design. We began with desktop-only, with a view to applying any learnings to the second round of testing in a mobile format.
Here’s the earliest version of the prototype landing page:
As you can see, we dive straight in with the reassuring tone. “It’ll only take a couple of minutes, and we’re there to help if you need us.” We’ve also experimented with some confidence-boosters beneath the main call to action, leveraging what sets us apart from our competitors and new arrivals to the market. Our experience and longevity in the industry is one of the key aspects that identifies Auto Trader as that awesome ‘person’ we turn to for help with all the big, scary stuff in life.
We decided to test two versions of this journey for this first round of user testing. One version allowed the user to choose upfront whether they wanted to see quotes for HP or PCP finance terms only.
By asking this question upfront we would only need to present the user with one type of finance quote at the end, removing the need for the user to compare two sets of figures. According to research by charity, National Numeracy, around half of working age adults have the everyday maths skills that we expect of primary school children, so we felt it would be worthwhile to test a version that put less strain on numerical problem solving skills.
The second version did not ask this question upfront, but instead showed a mix of both HP and PCP quotes to the user at the end, for comparison.
This would allow us to learn whether our customers prefer to be given this higher level of control early on (as well as less comparing to do at the end), or whether they would rather see all the options together at the end and make a decision from there.
The screenshot above shows step 1 of the process, choosing the type of finance (HP or PCP). The copy was written to be conversational, aiming for a friendly, helpful tone.
Content design note: Initially the two sections of explanatory bullet points were in paragraph format, but this was changed to bullet points to help make the content easier to scan, digest and understand.
Notice the ‘I need some help’ link at the bottom? Links like these were added to several stages of the application process to provide additional support.
In the case of choosing a finance type, the link triggers an overlay with explanatory diagrams, which you can see below on the left. On the right is a help screen for the stage of the journey which asks users for an estimation of their yearly mileage.
This was our initial experimentation with content design beyond the written word. When trying to educate customers or help them make a decision, we looked at ways to make this type of content more easily digestible and relatable to everyday life. So, rather than blocks of explanatory text, we looked at simple diagrams and life-like comparisons like the above.
Moving further along in the journey, the below screenshots show the two versions of the ‘finance estimate’ screens — the final stage in this process.
The version on the left is what the user would see if they were given the choice between HP and PCP finance at the start of the journey — they only see one estimate specifically for the type of finance they chose.
The right-hand version compares the best estimate for each type of finance, so the user can directly compare the differences in cost.
How did we test it?
We used our remote user testing tool, UserZoom, to set up a round of unmoderated user testing for these two early concepts. This would allow us to present users with a low-fi prototype of our design flows to work through, while recording their screen and their voice.
Here’s a quick summary of the testing parameters we used:
- 2 prototype variations (choice of finance type vs. no choice of finance type)
- 20 participants (10 per variation)
- People looking to buy or recently purchased a car
- People looking to buy with or previously bought with finance
Once we launched the test and the results were in, it was a case of watching through the user videos and making notes on comments, interactions and anything else that stood out to us as actionable feedback.
Here’s what happened:
Feedback and iterations
This first round of prototype testing provided us with a wealth of insights. So many, in fact, it took a few of us to organise it into something digestible.
We used our project team’s interactive Miro board (a remote whiteboarding tool we’ve been using since the first COVID-19 lockdown began) to lay everything out.
Here’s what we discovered:
- Not everyone understood all financial terms such as ‘lump sum’. We needed to explore better way to word some of these
- Not all users understood why they were being asked to give their mileage. We needed to explain this
- Users really liked the PCP/HP explainer diagrams — they made it clear and easy to understand the difference between the two finance types
- The help illustrations added context and helped users answer questions while also adding moments of delight and higher levels of emotional engagement
- More exploration was required to help us understand whether users want to choose their finance type first or compare at the end
- Users found the process simple and quick, it didn’t feel like filling in a form (high five!)
Design, round two (ding ding!)
Having already created and tested the bare bones of a working user journey, it was a relatively straightforward job to work through, screen by screen, implementing key changes based on the feedback.
Note: for the second round of iterations we applied our learnings from the desktop prototype to a mobile format.
From a content design perspective, we needed to address the following areas of improvement:
- Improve the instructional and educational copy, using plain English
Though we already worked hard to ensure we were using plain, conversational English in the first iteration, this round of testing highlighted a need for more.
The key example raised by our testers was the term ‘lump sum’ used in the PCP/HP educational content, which was raised as a difficult term to understand. Do people use this in everyday conversation when talking about their finances? Probably not.
So we changed it.
A note on using plain English: A common trap to fall into with ‘technical’ processes such as finance is deliberately using complex terminology to sound professional or knowledgeable.
We’ve talked a lot about trustworthiness, but would using the term “pay a final lump sum” instead of “pay what’s left of the car’s value” make Auto Trader appear more trustworthy or knowledgeable about finance? Not really.
It’s important for us to remember that using plain English is not ‘dumbing things down,’ but rather making sure that the language we use is understandable by as many people as possible.
2. Add more relatable copy and reassurance at key friction points
Some of our testers expressed a wish to feel better informed and more reassured along the journey. A good example of this is people wanting to know whether completing this process would affect their credit score. Another example is wanting to know if the information they entered was ‘set in stone’, or whether they would be able to change their mind later (e.g., choosing the length of the finance agreement).
With this feedback in mind, we worked back through the screens with a more empathetic lens.
We asked ourselves how we could better manage people’s expectations (What happens next? Can I go back? Can I change this later?). We also used our feedback to address the key worries, concerns and friction points raised with relatable, reassuring snippets of copy.
Here’s the finance term screen as an example. The original version (left) explains how the finance term length can affect monthly payment size, however some users said they weren’t sure at this point how long would suit them and would want to know if they could change it later. They absolutely can, so we added some copy in the new version (right) to make that clear and ease concerns.
The examples below are taken from the very first landing page of the finance journey. Based on the feedback from some users wondering if this kind of process would affect their credit score, we added that information right at the very beginning to ease concerns and instil a touch more confidence in using the service.
And here’s one final example. Following on from the last point about transparency, and in the spirit of managing expectations, we added some additional copy to the final stage in this section of the journey — the finance estimate screen.
Previously, the call to action was simply ‘select’, which does very little to tell the user what would happen next if they were to click that button.
Comments from the user testing implied users thought this was the final stage of the process, rather than a rough estimate to be refined with more information.
With this in mind, we changed the call to action from ‘select’ to something more active — ‘Personalise this quote’. This partly addressed the issue of users not understanding there was more to come, but we also added some supporting copy beneath to further inform on what would happen next and why.
3. Develop and improve the ‘help’ resources
Overall the feedback on our help screens (such as the difference between HP and PCP car diagrams and the mileage estimator) was very positive. Many users were pleasantly surprised by this unexpected assistance and the format it was presented in, which is encouraging.
However, some did feel there was a lack of ability for them to control or personalise the examples, which they felt would have helped them understand certain elements a bit more, and would also help them relate more closely to the experience.
So, taking the mileage screen as an example, we developed the concept to make it interactive. Instead of using a one-off example of 8000 miles and expecting users to be OK with working it out for themselves from there, we allowed them to change the mileage amount to whatever they liked, which would auto-update the ‘hours per day’ estimate below it.
A note on accessibility: This screen went through several design variations to ensure maximum accessibility compliance. The screen allows users three ways to alter the amount, through free-typing into the number field, using the car slider bar and tapping the plus and minus buttons.
So, what happens next? We test again, of course.
Keep an eye out for part two of this project post to find out how these revisions (and the many, many others not mentioned) went down with our second group of testers, and to see what happens when we add a bit more ‘love’ — the colour, branding and imagery — we’re very excited for that part!
Calling all senior content designers! Fancy joining us on this project?
We’re on the hunt for a senior content designer to expand the content design team and help us transform even more of the Auto Trader digital experience with some truly amazing content. If you’re a content designer or UX writer looking for a new challenge and some exciting projects to get your teeth into, this is the perfect opportunity to find both.
Check out the full job description and apply here.
