Kettle & Fire produces a unique shelf-stable bone broth and vegetable soups. Their goal is to deliver the amazing health benefits of bone broth to the world. Through Growth Rock, a conversion rate optimization A/B testing firm, I have been able to design aspects of their homepage, product detail pages, and blog.
UX Design, UI Design, Wireframing
A/B testing insights, Sketch, InVision
Desktop, mobile, and tablet website
A scannable product details section with uniformly designed affordances will uphold the momentum a user has when selecting order details for checkout.
The original product details section had multiple fonts and affordances, which created a frustration for the user. They would have to switch between thinking about how each affordance functioned for the user to complete their selections and continue to checkout. Also, the visual hierarchy of the elements did not make sense and there was repetitive information.
Subscribe & Save 20%
I redesigned the product details section to create a better visual hierarchy and organization of elements by:
placing the pricing at the top
turning all of the affordances into buttons and surfacing each of the options, so the user doesn't have to click into the dropdown
making the subscription details text link into a tooltip next to "Subscribe & Save 20%"
removing one of the "Free shipping for 6+ cartons"
Kettle and Fire also decided to reformat their pricing structure and to sell in packs to encourage the purchase of more bone broths.
Revenue per visitor went up $0.27 or 8.3%. Estimating about 1.2 million unique visitors in 2017, that's worth about $350,000 per year if traffic never goes up.
Subscription orders went up 26%.
Standard orders decreased by 7.8%, so overall conversion rate to orders went down slightly (less than 5%) or had no difference. Revenue per visitor still went up because the decrease in order conversion rate was offset by a large increase in AOV.