Lettuce Grow is a small start-up selling hydroponic farmstands that empower people to grow food at home within a small foot-print. The physical product is incredible and makes home gardening foolproof. The website was created by an outside agency that specializes in branding and is ripe for optimization. One of my primary responsibilities as the sole in-house designer is to redesign and enhance the website using design thinking and user testing.
In the fall of 2020, Lettuce Grow prepared to launch a new product, Glow Rings™️. Before the launch, the dev team made a simple product display page to allow customers to place pre-orders. The page was functional but had a lot of room for improvement. A redesign was proposed and approved. The design team included me, the digital product manager, and the physical product manager. The primary goal was to make the value proposition clear to the customer, leading to greater conversions.
The original Glow Rings™️ PDP
Shortly after beginning the project, we gained some key insights while working through the customer journey and checkout flow. The Glow Rings™️ are an accessory to the main product, The Farmstand. Improving the Glow Rings™️ PDP would likely improve conversions, but the best experience for our customers would be to allow them to add Glow Rings™️ directly to their Farmstand on the Farmstand PDP. The project expanded to include a redesign of the Farmstand PDP. This new PDP would need to be adaptable to future products as well.
The digital product manager and I agreed that we should start with the Farmstand PDP and use the learnings to apply to the Glow Rings™️ PDP. The customer service team had a mountain of feedback for us to review.
The existing PDP did not follow traditional e-commerce design principles and was confusing to many customers. The mobile view was especially cumbersome. It required customers to use a carousel to swipe between Farmstand sizes and included no cues that it was swipeable. Both the mobile and desktop views had confusing messaging and a hidden dropdown menu that most of the internal team was unaware existed.
The old Farmstand PDP.
Based on customer feedback and e-commerce conventions, we built a list of requirements for the final design. It was a lengthy list and would require us to work quickly. Black Friday/Cyber Monday was a little more than a month away, and we needed to have the designs done by the first week of November so the dev team had time to make the changes and QA everything before the busy holiday season. The primary requirement was to allow users to add Glow Rings™️ to their order directly on the Farmstand PDP.
Early sketches
The quick turnaround time required a tight feedback loop. Starting with quick ideation sketches helped me get buy-in from the team. Once we were all on the same page, I began to build wireframes and build the user flow with the product manager.
Wireframes for base PDP section
To allow the customer to quickly and easily select a Farmstand size, we adopted a size selection convention commonly found on clothing and footwear PDPs. By requiring the customer to select a Farmstand size before proceeding, we were able to dynamically link the Glow Rings™️ add-on to the Farmstand. Customers can now select a Farmstand, add Glow Rings™️, and proceed directly to the cart in only 3 clicks. A drastically better experience than the previous flow, which required two separate page visits.
In addition to the size selection and Glow Rings™️ add-on section, we designed a quick facts section featuring icons and a product details accordion that expanded for customers seeking more information before purchasing.