Learning
Training in web development. Motion, interaction, and the crossover with design.
When the Product Page Is the Whole Storefront
This project began during Hornet Energy's early growth. The co-founder (Mahdi, Chief Marketing Officer) and I were discussing how the brand could establish its online presence, and one thing quickly became clear: the website needed to do more than showcase the product, it needed to explain it.
At the time, Hornet was selling a single natural energy gel, and most traffic came directly from paid ads. Rather than landing on a homepage, visitors were sent straight to the product page, making it the primary touchpoint for discovery, education, and purchase.
Together, we decided to focus our efforts on creating a product page that could do two things well: drive conversions and serve as a strong representation of the brand. The page needed to communicate the product's value, build trust with first-time visitors, and support the company's growth as it expanded its presence in the endurance sports market.
Process
Every section maps to one step of the same journey: land, understand, trust, validate, review, buy. Mapping the flow first kept the page short, since anything that didn't serve a step came off.
Designing the First Impression
The first screen often determines whether users keep exploring or leave. Key information, pricing, and purchase actions were prioritized above the fold, so the product reads clearly and the next step stays obvious without unnecessary scrolling.
Leading with Ingredients
Natural products rely on trust and transparency: customers want to know what the product is made of and why those ingredients matter. Ingredients, nutrition information, and key benefits were brought forward so the gel can be evaluated at a glance, without digging through long blocks of content.
Backing the Value Proposition with Evidence
Product claims become more convincing when users can verify them for themselves. Scientific research was given a prominent role, with supporting visuals and direct access to the sources, giving the page a path to validation rather than marketing language alone.
Closing with Social Proof
Even after understanding the product, many customers look for reassurance from other people before purchasing. Athlete testimonials, reviews, and video content provide that final layer of confidence, showing how the product performs in practice.
Outcome
The site carried Hornet through its early growth and has since been replaced, as the company outgrew the version I built. Plenty of things drove that growth, but the first store held up long enough to stop being the constraint.
