All projectsDigital & Technology / FMCG Website

Nguyên Xuân — Herbal Shampoo Website

A digital home for herbal heritage: connecting brand storytelling, product information and an intuitive journey from discovery to purchase guidance.

Brand: Nguyên Xuân
Industry: FMCG / Herbal Hair Care
Focus: Website, UX/UI & Content

Turning a familiar brand into a clear digital experience.

Nguyên Xuân’s herbal shampoo website project brought the brand’s product story into an accessible online environment. The brief combined detailed product information, herbal ingredient education and a convenient route towards shopping. The website needed to help visitors understand the range while maintaining a recognisable connection to the brand.

For Knock Knock, the central design question was how to connect heritage and usability. An FMCG website must communicate quickly, but visitors also need room to explore ingredients, usage information and the differences between products. The project’s visual presentation connects those needs through a structured, brand-led interface.

01 / The challenge

Make product information easier to navigate.

Herbal hair care brings together several layers of information: the brand’s identity, the product range, ingredient stories and everyday hair care questions. Presenting everything with equal emphasis can make a website feel crowded. The brief called for intuitive navigation and a friendly visual environment so people could move through that information with confidence.

The objective was to create a logical path between discovery and consideration. A visitor arriving for a particular product should be able to find it quickly. Someone exploring the brand for the first time should also have a clear starting point and meaningful reasons to continue reading.

02 / The approach

Connect brand heritage with a purposeful page flow.

The website presentation uses Nguyên Xuân’s burgundy, green and cream visual language alongside botanical and decorative details. Product photography and familiar brand imagery anchor the interface. The design keeps the brand present throughout the experience rather than treating the website as a separate visual identity.

The flow moves from an introduction to the product range, then into hair care stories, customer experiences and purchase guidance. This sequence gives each content type a role: introduce the brand, explain the offer, support consideration and help visitors identify their next step. Navigation labels and product groupings provide a practical framework around the storytelling.

Nguyên Xuân website product catalogue, hair care stories and customer experience pages — Product discovery, hair care content and customer stories.

Nguyên Xuân herbal shampoo website design presentation — A consistent visual language across the website.

Nguyên Xuân website interface detail from the original project archive — Interface details from the original project presentation.

03 / The customer journey

Discover. Understand. Choose.

The homepage establishes the brand and invites exploration. Product pages support comparison across the range, while editorial sections offer context around hair care. Customer stories add another route into the content, and buying guidance helps connect information with a practical next action.

The original brief also identified product search, reviews and online purchasing as intended capabilities. These are presented here as project objectives rather than claims about a currently audited live implementation. The available portfolio images document the visual direction and page structure.

04 / Digital value

A website that supports both brand and business.

A well-organised brand website can act as a shared reference for customers, marketing campaigns and sales conversations. For Nguyên Xuân, the project brings product education and brand expression into the same experience. Consistent page hierarchy and clear content relationships also provide a useful foundation for search visibility.

This case study focuses on the documented design and the original project brief. Traffic, sales uplift and conversion data are not included in the source archive, so no performance figures are claimed. The value demonstrated here is a coherent digital presentation with a clearer route through the brand’s information.

Planning a website for your FMCG brand?

Knock Knock connects website strategy, content structure, UX/UI and development around the way your customers discover and evaluate products. Explore our digital services or discuss a website brief with our team.

View Digital & Technology services Discuss your website