Designing the conversation: Don't forget your form fields
0 likes139 views
This document discusses designing online forms by focusing on the conversation with the customer. It provides an example of redesigning a small business checking account application form at a bank. The original form was 18 pages with confusing language, unclear questions, and tooltips hiding important information. Through user research and testing different designs, the bank was able to create a clearer application process that resulted in a 92% completion rate, compared to the original 26% rate. The document emphasizes designing forms based on mapping out the necessary conversation with the customer and providing just the right context and information needed at each step.
Designing the conversation: Don't forget your form fields
- 1. DESIGNING THE CONVERSATION: DON’T FORGET YOUR ONLINE FORMS
- 2. My background 2 JOURNALISM B2B ASSOCIATION B2C USER EXPERIENCE PRODUCT DESIGN ECOMMERCE PRINT, DIGITAL TRAVEL CHICAGOAN AT HEART … NOW IN SAN FRANCISCO
- 4. ” At Capital One, we say we design conversations that solve customer problems.
- 5. ” We’re on a mission to change banking for good.
- 6. ” We bring simplicity, humanity, and ingenuity to banking by putting the customer first.
- 7. ” We design conversations that are clear and relevant.
- 8. Every conversation is guided by 3 pillars. 8 ” We apply 3 pillars when designing what to say, to whom, when, and how. Natural Language 1 2 3 Use Case Relevant Context
- 9. Now let’s talk forms DESIGNING THE CONVERSATION
- 10. ” What comes to mind when you think of forms?
- 11. ” When do you usually show a customer a form and what happens?
- 19. FAIR WARNING
- 20. ” This isn’t about the fanciest way to design a form.
- 21. This is about: 21 ” • Figuring out the conversations you need to have with customers • Setting your foundation • Using research and data to solve problems • Making sure your forms support the conversation
- 22. ” “Without having a conversation, all I have is a form with some UI tricks. There’s no meaning attached.” — Simon, design partner
- 23. ” When do you plan the content for your forms?
- 24. ” Who works on forms?
- 25. ” How do you figure out what goes into your forms?
- 26. Mini case study DESIGNING THE CONVERSATION (FORMS TOO)
- 27. I’m a small business owner trying to open a checking account online. I need to provide information to open my account, but I can’t because: - The words aren’t clear to me. - I don’t have context to answer questions. - I’m not sure what I need to apply. This makes me feel frustrated. It also wastes my time. CUSTOMER PROBLEM
- 28. ” Small business owners would start an application for a bank account and not be able to finish.
- 29. ” We spoke to them as if they were a risk to us.
- 30. Our numbers sucked. 30 18 pages in target customer flow “Industry Information” 3-4 min. to answer one question “Beneficial Owners?!” 26% completion rate for the user flow for the target customer That’s a lot.
- 31. ” We had to flip the conversation — and the form fields had to get overhauled too.
- 32. ” We dove into figuring out our problems.
- 33. We also wrote the conversation, which gave us an outline for the design.
- 34. Parts of a sign-up conversation 34 ๏ Greeting • What you need to get started • Questions during the process • Maybe need to run to the bathroom? • Forks (“If yes, then …”) • Affirmation you're listening • Conclusion • What’s next
- 35. Form fields allow us to map the information coming from customers to the conversation itself.
- 36. ” The conversation outlined our design. Outlines deliver hierarchy, which forms need. But people don’t speak in outlines.
- 37. We had a lot of things to fix in the project … 37 ๏ Making the content clear, straightforward, understandable, and transparent ๏ Reframing the narrative to “Let’s open an account together” ๏ Fixing sub-flows with major hiccups ๏The most critical pattern: form fields
- 38. But the form was the crux of our experience. ๏ Tooltips hiding important information ๏ Hint text that repeats the label ๏ Optional fields that weren’t optional ๏ Inconsistent patterns ๏ White space—but not enough places for helpful information ๏ A broken narrative that didn’t tell our intended story 13
- 39. Our account application relied on tooltips to communicate any number of things.
- 40. ” Tooltips buried critical information (and it wasn’t obvious you needed to open them).
- 41. ” Imagine having someone walk you through an experience and NOT tell you the information you need to know upfront.
- 42. A major competitor supported customers via tooltips — a whole lot of ’em.
- 43. ” “Let’s open an account together.” “We’ll guide you in the same way a banker would.”
- 46. ” We went through several design iterations to support customers and the conversation.
- 47. Design iterations 47 The onus is on the designer to figure out the informational needs for each form field. ” We took lean UX principles and applied them to comprehension — and overshot. 1 2 3 We applied the #tooltiopseverywhere approach — bothersome We pared it down to the basics — closer but not enough ”
- 49. A SOLUTION!
- 50. ” Only one form field element is required. You have other elements to use if you need to help customers along.
- 51. Elements of a form field & how to use ’em 5127 Field label Identifies information that will go in the box. This is required! Field caption Provides direction and context to help a person decide what to input into the field. This is where maximum character limits go too. This is also optional. Our strategy
- 52. Elements of a form field & how to use ’em, cont. 5227 Our strategy Hint text Show users an example of what or how they would answer (for formatting, for example). Only use it when the example is extremely clear. Optional. Tooltip Background information that’s directly relevant to the information we’re requesting in the field itself. It might explain the “why” behind something or provide more depth to caption information. Use if necessary, but not for information that is critical for a user to complete a field. Also optional.
- 53. ” From a systems perspective, we lacked tools to use form fields effectively.
- 54. ” We needed to work with developers to create components and reusable patterns.
- 55. ” Sara’s favorite form field: A true story.
- 58. ” You will use more words.
- 60. ” You will need to figure out the information customers need.
- 61. ” You will need to set aside time to create error messages that help a person move forward.
- 62. ” We set out to nail it — get the right information to customers so they can hit submit successfully and leave with a good impression of us.
- 63. Outcomes 63 ” The process of marrying visual + content is what creates a truly accessible experience for everyone. Fewer calls to customer support (and more meaningful ones at that) 1 2 3 92% of customers in the “beneficial owners” flow now complete it (versus 26%) People spend 3-4 min. on the longest page versus 3-4 minutes on one troublesome question. ”
- 64. ” We haven’t yet broken the framework. This means we can focus on other foundational things.
- 66. WHAT WOULD A CONVERSATION SOUND LIKE BETWEEN A PERSON WHO WANTS TO VOLUNTEER AT AN ANIMAL SHELTER AND THE STAFF MEMBER COLLECTING INFORMATION? • Pair up. • Write out what the conversation would sound like. Don’t worry about wordsmithing! (That comes later.)
- 67. 10 MINUTES
- 68. ” What did you like?
- 69. ” What didn’t you like?
- 70. ” Did you get any ideas for the customer experience?
- 71. ” Can you identify the questions your forms would need to ask?
- 72. The conversation activity helps you gather: 72 ๏Product experience ideas ๏Actual copy you can use ๏Guidelines ๏The natural order to ask the information ๏Information you need to include —primary, secondary, tertiary ๏Use cases (forks in the conversation — and form)
- 73. ” Questions?
- 74. CONTACT AND FIND ME +1 415-470-3259 sara.walsh@capitalone.com