Auditing your flow for content, functionality, and design
Along with our pre-launch checklist to ensure your flow is technically ready to go live, we recommend doing an audit of your flow in a staging environment - both on a desktop in different browsers and on different mobile devices.
This can be a solo review, or you can send a deployed variant out to others in your company to test. The more folks you have going through a “live” flow, the easier it will be to catch edge cases — especially if your testing group is on different devices.
Here’s what we look for to ensure a great responder experience:
Instructions | Adding clear instructions on how to complete your flow can help the responder understand what is needed from them, reduce error rates, and increase form completion rates. | |
Redundancy | It is important not to ask for the same information twice. Pre-populating answers with information you already have will lead to a better responder experience. | Article: Passing data into flows |
Sensitive information | Explaining why you are asking for a piece of sensitive information will help increase the likelihood of responders giving you the information you need' | Example: Tomo social security number collection Example: BetterHelp phone number collection |
Question order | Grouping and ordering the questions in a logical sequence will create a better experience for the responder. | |
Personalization | Personalizing the flow based on previous answers may improve overall flow completion rates. | Doc: Templating variables |
Question types | Using the appropriate question types can help improve the responder experience. For example, having a structured address question with different fields for Street, State, Country and Zip Code as opposed to one text question will help the responder save time. | Doc: Content types |
Returning responders | Allowing the returning responders to start from where they left off improves flow conversion rates, especially in longer and more complicated flows. | |
Navigation | Ensuring that clicking the back button and refreshing does not take the responder out of the flow is important for creating a good responder experience. | Doc: Previous button |
Submit/success page | Giving clear visual feedback to the responder that a flow is successfully submitted will help avoid duplicate submissions and improve the responder experience. | Example: Murad results page |
Error messages | Including helpful error messages will improve the quality of the data you will receive and increase flow completion rates. Communicating why a certain input is not valid or indicating clearly when a responder is missing a required field will help improve responder experience. | Coming soon: Custom validators |
Optional fields | Indicating which fields are optional will improve the overall responder experience. Indicate which fields are optional or indicate are required or both | Doc: Optional questions |
Progress bar | Showing responder’s progress will help responder stay motivated to complete the survey and improve completion rates. | Example: BarkBox progress bar |
Single column | Laying out all the information in a single column (as opposed to multiple) will improve the website readability and the responder experience. | Example: Bright flow |
Multi-step flows | Having too much information on a page can be overwhelming for the responder. If possible, consider having fewer questions per page. | Example: Future flow |
Input fields size | Input field sizing can be used to communicate your expectations of how lengthy the responses should be. | Example: StitchFix style field Example: Everybody “Anything else?” field |
Dropdown menus | If there are less than six options, using buttons (instead of dropdown menus) might be a more effective way of communicating the available options to the responder. | |
Responsiveness | Responsive design allows your flow content to be viewed in an optimal manner across all screen solution and sizes, and ensures that it looks great on all devices. This will improve the overall responder experience. | Doc: Dimension variables Doc: Preview window viewport |
Placeholder text | Placeholder text can be used to provide responders with examples of valid answers and can improve responder experience, while reducing errors. | Example: BarkBox dog name Example: Lemonade signup |
Accessibility | Creating accessible flows is crucial for improving the experience of all responders. This includes having appropriate color contrast, screen-reader friendliness, and keyboard navigation, etc. | |
Style | Having a consistent style across your flow and reflecting your brand perfectly through fully customized form elements not only creates a better visual experience but also reinforces trust. | Example: Illustration examples Guide: Create a theme |
Last updated