I was hired to improve the sales of client’s eBooks/Guides about health supplements. The challenge was showing what’s inside (improve usability). I hand-sketched new page design, coded it, ran A/B test, and boosted revenue ~15%.
Constraint: Don’t give away too much for free.
Content Audit
Problem: The original page was weak on the value proposition and product content. Key information was buried mid-page, making it hard to scan, and there was little to help buyers envision using the guides.
Solutions: I improved this by crafting a strong value proposition and highlighting the top three benefits. I also categorized the products into three clear sections – Body, Lifestyle, and Mind – for better readability. “Three” is a familiar design principle, and I made each category clickable like a filter to increase engagement.
One of The Initial Concepts
Additionally, we I noticed a minor section, almost an afterthought:
I loved the part about proven/uproven supplements and the idea of assembling a stack. I decided to turn this section into a feature, giving away some more free information without giving away too much.
Final Design
After several iterations and collaboration with another designer, we decided on a different approach. When the visitor clicked a topic, they would see all the supplements covered. The supplements were categorized into 3 categories: work, unproven, and avoid. I also included scenarios for combining supplements, so users could better gauge if those supplements are applicable to them:
Impact
I designed and ran an A/B test of the old and new versions with ~40,000 users.
The new version increased completion rate by ~6% and revenue by ~15%.
This was done through a genuine improvement in content usability as well as persuasion techniques like curiosity.
Mistakes and Considerations
I should have chosen more accessible colors than green and red despite using icons as a secondary means of distinguishing proven, unproven, and avoid. Another options was to put them into separate sections, but since the content is dynamic this would cause some states too look weird e.g., one box taking up an entire row.
