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.

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.

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

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.

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.

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

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 —

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.

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.

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.

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

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?”

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.