HydroCollagen: Engineering a High-Conversion UX for the Beauty & Wellness Market
Building a scalable D2C platform focused on long-term costumer retention
Introduction
HydroCollagen is a small brand that promotes and sells Collagen from Novelius Medical, a company born in a home kitchen, just like in the movies.
It gradually evolved into something more, and after a few years, it became a recognized brand on the shelves of all major pharmacies and shopping centers.
They acquired certificates, collaborated with research laboratories from France, and won Cosmopolitan Beauty awards.
The product has vast potential with the right tools and marketing effort.
The Challenge
HydroCollagen needed more than just an online shop. They needed a brand experience that builds trust.
The supplements market is competitive, so the primary challenge was to design a UI that shows and educates users on the clinical benefits of collagen, while creating a frictionless path to purchase.
In the supplement industry, the biggest challenge is trust. People are sceptical. Images are not enough. I had to bridge the gap between a quality lifestyle and eCommerce functionality.
Accessible on all Screens
The design is optimized for the social media shopping journey. Elements were designed for easy mobile interaction to increase conversion from social media traffic.
This is especially important, given that the supplement industry, one of the most important marketing channels, relies on social media, and with that, we could expect up to 90% of traffic to come from mobile devices.
When we first met, the owners were very vocal about their goal of having a successful e-commerce shop to diversify their sales channels.
This would also mean they have their own sales shop and channel, fully controlled by them, rather than just serving as suppliers to big shopping malls and pharmacies. Of course, these channels would still stay an important part; however, their own shop allows them to play by their own rules.
Strategic Placement of Elements: Trust the Engineering
Visual Hierarchy for Conversion: I prioritized clinical proof and "after" images with the packaging, while also positioning the description with standard and certifications above the fold.
Abandoned Cart Ready: There is a system in place that would automatically ask for an email if someone wants to leave or the product is not available, so the brand can easily increase conversion and retain a customer.
Ingredient Transparency UI Element: A dedicated section was created for ingredients and their wetting and testing. The logic behind it is to directly address users' quality concerns.
The flow as retention engine:
Tester sign-up: The plan is to encourage people to order a tester before buying, and if they refer a friend for a tester, both could get a discount. This was done to increase conversion and customer retention.
Sign up for notifications: On the product page, if there is no availability, I plan to subscribe to a newsletter to be notified when it becomes available.
Visual herarchy of the product page.
Sticky add to cart CTA on the product page, to improve conversion rate.
Design and Layout
The Growth Plan: SEO + Newsletter + Referals
Beyond just the build and beautiful screens. The website was prepared for long-term SEO with a 4-year content marketing plan. With advanced email automation flows in mind to maximize infulx of new customers and optimze the customer lifetime value.
Just a beautiful shop is not worth much if it can't track growth and provide insights. I made sure they are ready with marketing and analytics from the start.
SEO basics and structure: Pages are structured with proper H-tags and schema-ready metadata to ensure indexing in search engines. I also made sure that LLMS.txt is ready for future AI readiness.
Conversion and UX tracking: The shop was built with triggers and events in mind, to make it easy for the marketing team to track important KPI's. I also made sure they can track important UX metrics, so the shop can be improved.
Asset optimization: All visual assets are optimized and compressed. Most images are converted to WebP to improve performance and the user experience.
Content marketing plan
I created a content plan for every step in the sales funnel, enabling us to expand our reach, maximize conversions, and educate users to live better, healthier lives.
There are over 400 topics prepared to be written and published.
The big database of topics will help the brand to prepare content for all platforms and maximize reach and increase traffic across the board.
The plan was based on research into key terms to create educational content and post it in the blog section.
My goal with the content plan is to create blog posts that can be repurposed into various social media formats and videos.
Main success metrics
Based on the research and the goals of generating more reach and revenue, we decided to measure these metrics:
1.
Organic traffic
2.
Conversion rate
3.
Newsletter subscriptions
4.
Referals
The launch
The product will be online at the beginning of 2026. This is the reason why no actual data can be shown.
But I will update the case study with more data as the project progresses.
