A full-scale website redesign — from auditing the old site, researching B2B/B2C user behaviour, to building a complete Design System and 13+ polished pages with bilingual VI/EN support.
Mobile performance
Desktop & Mobile
in Design System
for global reach
What was wrong with the old site
Evaluated against Nielsen's 10 usability heuristics and WCAG standards. Three critical areas failed to meet expectations.
- Buttons varied in colour, size, and shape — no consistent system
- More than 3 different typefaces used simultaneously
- Hero banners used poorly composed stock photo cutouts
- Product images not consistently background-removed
- Colour contrast failed WCAG AA: ratios of 2.25 and 2.95
- Floating contact widget blocked content on mobile
- Hero banner still featured Covid-19 messaging — severely outdated
- Generic stock imagery — weak brand expression throughout
- Testimonials lacked social proof (no avatars, no platform)
- Brand message not clearly communicated
- No video or motion — minimal storytelling capability
- SEO score 61/100 — significant missed organic opportunity
Mobile
Four design objectives
Every design decision traces back to one of these four goals — from layout choices to component behaviour.
Use authentic photography, lifestyle imagery, and embedded TikTok/video content to tell the HC brand story — showing how the product improves everyday family life, not just listing features.
Design mobile-first across 3 breakpoints. Optimise image formats, lazy loading, and eliminate render-blocking resources. Target PageSpeed 90+ on mobile.
One typeface (Plus Jakarta Sans), a structured Design System, and a restrained 2-colour brand palette. Generous white space and consistent components create trust.
CTAs always visible. Product pages link directly to Shopee and TikTokShop. B2B content prominently featured. Bilingual VI/EN expands reach to international partners.
How HC compares to competitors
Four competitors audited — THT Vietnam, Attack (Kao), Hygiene Asia, and Unilever Vietnam — to identify market gaps, best practices, and design patterns to adopt or avoid.
- Brand colours used consistently across entire site
- Banner and image design cohesive in style and palette
- Good mobile — fast load, large readable banners
- Clear product categorisation with visual nav
- Design language feels dated — lacks modern minimalist aesthetic
- No bilingual support — limits B2B reach
- Product pages lack social proof and conversion CTAs
- Clean, minimalist design — easy to navigate
- Content clearly reflects brand philosophy: "Making Life Beautiful"
- Strong editorial structure — brand story front and centre
- International design standards and typography
- No distinctive brand identity — feels generic
- Product pages lack direct purchase links (Shopee, TikTokShop)
- Weak social proof — no reviews, no community
- Direct e-commerce model with on-site selling
- Detailed product descriptions with usage instructions
- Prominent promotions and discount codes
- Multiple product variants clearly shown
- Inconsistent icon and image visual language — reduces trust
- Cluttered layout — too many competing elements
- Lacks brand storytelling — purely transactional feel
- Mobile experience fragmented and slow
- Distinctive, memorable design — strong brand identity
- Brand values and mission communicated visually
- Impressive numbers: 35M products, 29 years, Top 1 employer
- Sustainability sections reinforce trust
- Corporate tone — less accessible for everyday consumer
- Navigation complexity — too many top-level sections
Design opportunities identified
No competitor fully integrates direct Shopee and TikTokShop links. HC Vietnam can own this — making purchase frictionless for Vietnamese consumers who shop on these platforms daily.
Embedding a live TikTok community feed, verified reviews, and UGC on the homepage creates trust signals no domestic competitor currently provides.
Only international brands offer bilingual content. HC Vietnam can stand out among domestic brands — positioning itself as a credible partner for international distributors.
Who HC Vietnam designs for
Two primary user segments with distinct goals, pain points, and decision-making patterns — both served by one cohesive interface.
via social media (EY study)
B2B distributor · B2C consumer
social proof & emotional fit
by a single interface
- Find cleaning products safe for family and children
- Best value — good quality at reasonable price
- Discover products through trusted social endorsements
- Buy conveniently on her preferred platforms
- Doesn't trust testimonials without social context
- Frustrated by slow websites and complicated checkouts
- Overwhelmed by feature-heavy product descriptions
- Distrustful of brands without real customer content
- Source products that sell quickly and generate good margin
- Partner with a reputable brand that supports growth
- Understand pricing, MOQ, and distribution policies upfront
- Evaluate brand's marketing investment and consumer demand
- Hard to evaluate credibility without transparent data
- Can't find clear B2B contact or partnership path
- No visibility into distribution network coverage
- No English content — limits cross-border sourcing evaluation
How Linh Trang discovers & buys
How Minh Hải evaluates a supplier
Final design — all screens
Desktop and mobile UI across 7 pages — Homepage, Product List, Product Detail, About Us, Contact, Blog List, and Blog Detail.
Before & after — measurable impact
Quantified improvements across performance, design quality, and conversion readiness — with the website now live at hcvietnam.com.vn.
from 13 → 90+
across 3 breakpoints
in Design System
for global reach