Auditing your flow for content, functionality, and design
Last updated
Last updated
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.
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