I was hired to improve the sales of client’s eBooks/Guides about health supplements. The challenge was showing what’s inside (improve usability) without giving away too much for free. I hand-sketched new page design, built it, and ran A/B test.
Problem 1
The top of the landing page did a poor job of explaining the value proposition and contents of the products. Also it lacks a low-friction action to engage a visitor:
The list of health topics covered appeared mid-way on the page and was not easy to scan:
Solution 1
I created a strong start with the main value proposition and top 3 benefits of the product. I categorized the products into 3 buckets Body, Lifestyle, and Mind (something the client had not done), which made the topics easy to scan at a glance. “Three” is a common number in design. Finally, I made the topics clickable to create an area for gradual engagement:
Feature 2
The contents of the guides were originally shown way below the fold in small font. There was little to show a potential buyer what the guides actually contain and envision how they will be using them:
I decided to turn this afterthought into a feature, giving away some more free information without giving away too much.
Here’s an early concept that highlighted a sample supplement:
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:
Testing With Users
We A/B tested 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.
