Reducing Friction on the Product Detail Page
Site: chooseinstead.com
Role: UX Designer
Tools Used: Whimsical, Sketch
Result: Error reduction from 25% to 6%
Overview
After initially launching ChooseInstead.com, a brand that provides natural lawn fertilizer, 25% of users received an error while attempting to create their custom lawn plan, decreasing potential revenue dramatically. Through usability testing, run by our UX Research team, we were able to conclude the following:
The ZIP code form field lacked prominence which resulted in users failing to satisfy this requirement
The lack of form field error states left users unable to easily identify missing information
The main ‘create plan’ button was enabled even when all input fields were not satisfied
Following the usability evaluation, optimizations were easily identified and work quickly began.
Existing Design:
Resolution
In order to eliminate the errors and to fully improve the experience of making a lawn plan, the following enhancements were given to the product detail page.
The ZIP Code form field was enlarged to provide additional prominence
A red warning message was shown if the user attempted to create their plan without entering a ZIP Code
A number was added to the left of each required question to help the user understand each question was a required step
The main button was disabled until all input fields were satisfied
Proposed Design:
Results
Although the proposed updates were small in nature, they produced major results. Virtually overnight, the ZIP Code error percentage dropped from 25% to 6% and the conversation rate increased by over 100%. The graph below shows the percent of users receiving the ZIP Code error over the course of 2 weeks. The red circle indicates the day the new designs/logic were implemented.