Tasked with creating a mobile signup and checkout flow for a vegetable subscription service, I began with researching best practices. I identified six of the most important to inform the design:
Keep it Short
Use Logical Sequencing & Grouping
Use a Single Column Layout
Order fields from easiest to hardest (least to most personal)
Communicate Errors Clearly
Distinguish Optional and Required Fields
Click through this interactive prototype to see the checkout flow.
This user flow starts with the easiest, least personal, question (choose a box size) and ends with the hardest, most personal, question (credit card information). It is kept to as few screens as possible while avoiding unnecessarily long forms on a single screen.
Adding a screen to check the user’s zip code lengthens the user flow, but it reduces the frustration of users who are outside of the delivery area (and are potential future customers). The time spent on this screen can be offset by using the zip code to auto-fill several fields on the delivery details screen.
The colors and graphics remind the user why they are filling out the forms (to have vegetables delivered to their home) while emphasizing the healthy, eco-friendly brand. The vegetable “loading bar” at the top with the delivery truck icon indicates the user’s progress.