Happy V
Happy V is a women’s supplement company that uses technology, health & education to create solutions focused on women's health at every stage of their life.
Their mission is to provide women with effective, high-quality, easy-to-use women's wellness products along with informational content that covers all aspects of women's health.
Background
As a UI/UX web designer, I worked with the client to improve Happy V’s landing pages in order to improve conversions and better engage with users on the web.
My Role
Product Details Page: Ingredients & Benefit
I was tasked to design the ingredients and benefits section of the product details page. The goals of the ingredients section on the product page are to:
Get women to convert on the website
Display all ingredients and benefits of the product clearly
Goals
I conducted an audit of the ingredients section of their product details page and noted what was working and what wasn’t.
The problem I discovered is some customers might be hesitant to convert because there’s insufficient information about the product in terms of its ingredient benefits. A typical user can read the Supplement Facts but doesn’t know how that will benefit their health.
Audit
How might we increase customers’ buying confidence?
Problem
My primary approach was to display clear and easily digestible information. I analyzed product pages from direct competitors: Ritual, Care/of, Rae Wellness, Seed, Nutrafol to examine common UI design patterns in the dietary supplement space.
I also examined indirect competitors like Hers who are in the women’s wellness space for inspiration.
Competitive analysis
Need clear list of ingredients so customers are well informed before making a purchase
Research about the benefits of each ingredient can help customers gain clarity and confidence when buying supplements, therefore increase brand credibility
Using an accordion menu is a clean way to organize information including but not limited to ingredients and benefits
Adding photography adds visual interest
Key takeaways
Design explorations
After analyzing the competition and understanding what design patterns these companies have in common, it was time to design. During the design phase, I explored several options and variations of how to display the ingredient and benefits information on the page. See my explorations below —
Context
Based on my research from competitor’s websites, a common UI design pattern is the accordion menu. This organizes content by collapsing and expanding the menu items.
Accordion menu
Utilizing cards is another way to showcase ingredient information. Users can view the first 3-4 ingredients on the page. If they wanted to view more, they can simply click on the “See More” button to expand.
Cards
Alternatively, we can have a clickable list of ingredients to the left. When a user clicks on an ingredient to learn more, the description and image will appear on the right.
Ingredient text list w/ images
Final section design
The solution that I choose was the accordion menu as it addressed a variety of challenges:
Users can easily toggle to learn more about the ingredients and their benefits
Keeps a polished layout without images over cluttering the page
The accordion menu already exists within the website so there’s no need to introduce a new component
Final solution
Landing Pages
In addition to the ingredients section redesign, I also redesign other landing pages of the website.
Contact Us page
Conclusion
I had an enjoyable time working on these landing pages, particularly the design exploration phase when I was ideating different UI patterns as possible solutions. One thing I learned during the ideation phase is that sometimes we don’t need to introduce new design components if there’s a pattern that already exists within the product. I had to ask myself, “Are there other components on the website that serves a similar purpose?”
Reflection
The next step would be to hand these designs over to a developer for implementation. From there, we will conduct A/B tests and analyze performance.