Developing effective online forms is something lots of companies struggle with; while it’s a great opportunity for engagement, it also leads to plenty of customer problems. In a recent InVision DesignTalk, Capital One designer Sara Walsh came in to explain how companies can utilize forms to create conversation and solve user issues.
Sara taught us that when designing customer interactions via a form, designers have to ask themselves a few basic questions:
- What is the customer trying to do?
- How does this experience fit into the user’s world?
- Does the language feel human and real?
These are real-life excerpts from Sara’s team’s process for online form design. Read on for more about the step-by-step approach to forms that has helped her team figure out customer needs and develop their messaging strategy.
Step 1: Figure out the conversation
Sara’s team gets started by nailing down the kind of conversation they want to have with their customers, starting with a simple task like opening a new account. From here, the team is able to put together some scenarios, like a customer talking to a bank representative, that give them an idea of what actual client interactions sound like—thought bubbles and all.
for your form design project.”
Once they’ve done this, team members can review what they wrote and come up with an action plan for their new form designs. It’s not just helpful for identifying knowledge gaps and coming up with new ideas: this process helps the designers create copy in their users’ language. This isn’t about the “fanciest” way to design a form: it’s about figuring out the conversations you need to have with your customers, and using that as the foundation for your form design project.
Step 2: Identify the problems
The second step in this process is identifying the problems you’ll be addressing in the new form.
Let’s use the team’s example of opening a new bank account. The main problem here that Sara’s team was solving was helping small business owners open online checking accounts with Capital One. The instructions on the existing forms weren’t clear so potential customers weren’t providing required information, didn’t have enough context to properly answer questions, and weren’t sure what they needed to do in order to apply. It was so frustrating that only 26% of users ended up actually completing the form.
Sara’s team realized they were addressing customers like they were a risk to the company, which was definitely not what they wanted to convey. To get past this, the team went deep into researching problems with the form using data, customer feedback, and competitor research—and realized their copy didn’t support their story, the progress bar wasn’t helpful, and the tooltips were hiding important information. Yikes.
Step 3: Write the conversation
Once your team is clear on the problems, you can start writing conversations. This step is crucial to developing an outline for the new forms: something Sara describes as similar to a game of Mad Libs, as they give the customer a framework to complete their story.
“Once your team is clear on the problems, you can start writing conversations.”
By writing a conversation based on what your customer is trying to accomplish, your team can discover your product’s natural information hierarchy—something that will help your team understand the most effective way to organize the form. For example, in Capital One’s case, the conversation revolved around signing up for an online business account—so it needed to include a greeting, a CTA, some questions about the process, and options to review and submit the application.
Step 4: Develop a form field strategy
The next step is to develop a form field strategy based on the conversations your team wrote. It’s important to remember that every field has a purpose: each space needs a reason to being on the form, and forms should follow the flow of an actual conversation.
Sara also provided some insight into what goes into the different form fields and how to get the most mileage out of them. You can see above that the field label lets you know what goes into the box—think name, street address—and whether or not it’s required. Anything else can be added or changed based on your company’s specific needs: something like field captions or hint texts.
Design teams should be aware that designing forms isn’t always a one-team show, and there’s a chance they’ll find themselves collaborating with developers.
Step 5: Create error messages that move customers forward
Even the most exceptional form design has to come with some error messages (that will help you solve problems and keep customers moving). Sara explained that natural, down-to-earth language is a great way to hit these goals, as well as presenting customers with options and identifying with their emotions. Helpfulness and empathy are key here: no one likes an error page, but by addressing customer frustration you can hopefully win them back and motivate them to keep going forward.
“Helpfulness and empathy are key here: no one likes an error page.”
This new process helped Sara’s term develop a hyper-effective online application form, with 92% of users finishing the application (up from 26%!) and a major decrease in calls to customer support. Users were able to complete entire pages in 3-4 minutes—which used to be enough time for them to finish one question.
Don’t get too excited, though: Sara’s team spent almost three months developing this process! This kind of research isn’t quick or simple, and you’ll see there’s going to be lots of design iterations along the way. With that being said, Sara believes that by following these steps and being persistent, design teams everywhere can create exceptional and successful online forms.
Watch the recording of Sara’s DesignTalk
If you weren’t able to attend the event, no sweat—you can watch the recording here, along with the other three webinars that were a part of this series on UX copy.
Did you like this? Then you’ll like these too:
from InVision Blog https://www.invisionapp.com/blog/designing-online-forms/
