Creating a Forms design pattern
If like me, you have come close to launching your laptop or mobile phone out of the nearest window when filling out a form, you’ll understand why making forms clear and easy to fill out is so important.
This isn’t a new problem, I have clear (traumatic) childhood memories of my dad, shouting and cursing while throwing a pen down on the dining room table, all because he’d put his first name in the surname box when filling out a form.
We thought the internet would solve the problem. It didn’t. How many times have you gone through a form, selected submit, seen a big generic error at the bottom of the page and then had to go on a wild goose chase, searching for where you made the mistake?
Or at the point of deciding that you want to sign up for something simple like a newsletter, been asked everything from your name, your gender and the name of your imaginary friend.
Even after forms being digitalised for several decades, there are still issues, anyone who filled out a passenger locator form during the pandemic will know my pain.
Creating a design pattern can help to introduce best practices, reduce errors and lower blood pressure.
Why we created a Forms Design Pattern
As a design discipline within our organisation, we increasingly look to squeeze more value out of our work. So over the last three years, we have developed the Newskit design system. The reusable guidance and UI components save us time and give consistency across our brands.
Similar to the big box of lego in your kid’s (or your) bedroom, the design system provides the building blocks for constructing products but not the method. So recently, we’ve looked to take a step back when working on a particular user problem and consider how other designers could reuse the research and insights we gather. The resulting design patterns ensure the team and business follow best practices when creating frequently used features. The first of these was an extensive look at forms.
Here are some of the key reasons we decided to create a forms pattern:
- We were in the process of creating a new account feature that all of News UK’s brands would adopt, so extensive research was underway into best practices around forms.
- Customer data is a crucial part of our business, so making the collection of that data as efficient and seamless as possible is essential.
- Form design patterns have been tweaked, tested and improved upon over decades, so there are clear patterns that we can follow to make sure the customer understands the information they need to enter and that the information we collect is accurate.
- Accurate data at a company like News UK is vital to ensure we focus on the right customers and that those customers have the best experience using our website.
How we approached the project
Like all design projects, we started by gathering requirements, researching best practices, collaborating and gathering feedback.
This project was no different, we learned a lot from the design systems community and their execution. For example, The Guardian have a simple but effective best practice page on their Source design system website, Atlassian made the most of illustrations to show best practice clearly and YouGov go into detail on each data entry type to highlight best practice, display their code and link to any research that has contributed to their guidelines.
We wanted to create something that did all the above and had clear integration with our design system.
How the project progressed
As this was a self-starter project, we needed to ensure we could drive it forward alongside other ongoing projects. So we set up biweekly meetings with members of the NewsKit team to ensure we were on track and to flag any issues before progressing too far.
Initially, we set out to produce some best practice guidelines, but as we progressed, we soon realised that we could push it further and that it should tie in with the form components being created for our design system.
Because of this, we decided to document data entry types such as address, date of birth, telephone number etc. in the same way as the YouGov site.
As each data input type is implemented on our products using NewsKit components, we also split this out to give clear guidance when designing with each type of component, such as text field, check boxes etc. This also meant we could link out to specific components within NewsKit for additional context.
By combining all 3 of these document types we now have a detailed and concise document that can be used within the company and externally in the design community.
Collaboration and build
Once we had written the content, there were several rounds of reviews with UX and UI designers from the NewsKit team to check everything, give guidance and feed in further knowledge and research.
Following this, we could move everything into the design and build phase, so we could draw the illustrations, define the IA of the document, and engineers could build the pages within the NewsKit site.
Feedback and research
We’re keen that this is a living document, so we welcome any feedback or research that we can feed in to make it as robust as possible. There are opportunities for feedback on each page.
Please check it out and let us know what you think.
Hopefully, it can help to make forms easier to fill out for your customers, make the data you collect more accurate and help anyone with anger management issues, like my dad.
