Increasing the impact of Form design
Written by Rhys, Lead Product Designer at GetGround
GetGround’s mission is to make assets more transparent, trustworthy and accessible. We are doing this by bringing the world’s assets online, starting with residential property. We believe increased access to asset ownership will enable a fairer, more productive world.
This is the story of how we reshaped our understanding of forms, and how our customers interact with forms in our product. A great deal of our product involves using forms so it was one of the most crucial design patterns for us to establish — having a structured form pattern has also helped us develop faster, delivering more value to our customers more frequently.
Our starting point
The early days of GetGround were more developer-led which meant the interface was built with functionality being the primary concern, rather than usability or aesthetic. This was a great approach for a small team to have as it allowed them to build fast and make the product exist! There comes a point in the early life stages of every product where this will no longer cut it. Here is where our forms begin their story — with a functional page that collects inputs from a user. Nothing more, nothing less.
This form captured data from customers — it did not;
- have clear validation
- explain what is required or optional
- clearly signal what the user should do
- look nice
- have accessibility in mind
On top of these, it wasn’t easy for the developers to re-use due to lack of defined structure.
Understanding forms
Knowing where to look for inspiration or guidance on forms can be a quagmire — on one hand it’s not usually considered the sexiest area of design, so you can’t look somewhere like Dribbble to find great form design. We found ourselves thinking about products or services that used forms in abundance. What I ended up finding was the treasure trove that is gov.uk design system.
One of the superstar designers from the gov.uk team, Adam Silver, has also written a book called “Form Design Patterns” which I consider the bible for form design.
Key insights
To improve our forms it was important to consult our users and study their problems so we might understand their needs. We were heavily using a tool called LogRocket for this, which allows us to watch precisely how our customers interacted with our application — and here we could see common problems they were having, like;
- Incorrect address input
- Misspelling names
- Missing required field, and being unable to recover from this error
- Use correct formats for dates, addresses and names
Additional context was added by speaking with customers and collecting qualitative data on top of what we already had — a big help came in the form of our Business Development and Operations teams who were also able to contextualise a lot of the problems through their daily interactions with these customers.
Three key insights I found most helpful when researching form patterns and usability were;
Question protocol
Know why you are asking each question. If you don’t actually NEED the information right now then don’t make your customer answer a longer form than necessary. Building out a question protocol will help you challenge unnecessary questions and have them removed from the form.
One thing per page
Stick with ONE question the user has to answer per page — this helps the user understand what you are asking them, focus on that question, and answer it easily while being able to recover from any errors they might make, even when on mobile devices. An additional benefit is that you can progressively save a form as the user moves through the steps — making it possible to drop out of a form and come back later to complete it.
Include a review step
Having a review step at the end of a form that has a clear layout can help a user review all of their answers efficiently, and allows them to correct any mistakes before they submit.
Our current form system
After reading through a lot of guidance in the Form Design Patterns book, and studying live forms on the gov.uk website, along with myriad other website forms, we have produced a standardised way of presenting our forms in different areas of our product.
Here are a few of the major benefits we’ve seen from this change;
- Our validation is improving
- Customers are making less mistakes
- Our forms are more accessible
- Time to design has significantly reduced
- Engineering effort to build forms has significantly reduced
- Customers are familiar with every form we show them
On top of our standardised form patterns, we are now utilising dev components for all of the atomic pieces of each form, so our forms will be like lego building blocks, with rigorously documented instructions on how to build them.
Concluding remarks
Our story started here, but it’s far from over. We are continually making improvements on standardising our design patterns, this is done by staying in touch with customers, and collaborating with our engineering team who constantly advise us, push us, and compliment us. If you think you might enjoy being part of a team like ours, connect with me on LinkedIn.
