Back to portfolio
HNG xAMA
HNG xAMA
HNG xAMA
Project Overview
HNG xAMA is a luxury fashion e-commerce platform designed for HNG Fashion House, inspired by Versace’s bold aesthetic and modern digital shopping experience.
The goal was to translate high-end fashion identity into a premium digital storefront that feels aspirational, seamless, and distinctly African.
Timeline: 2024 (3 months)
Role: Lead Product Designer (UI/UX, Visual Direction, Interaction)
Team: 1 Product Designer (you), 2 Developers, 1 Brand Strategist
Tools Used: Figma | FigJam | Adobe Photoshop | Zeplin
Status: Completed & Delivered
Project Overview
HNG xAMA is a luxury fashion e-commerce platform designed for HNG Fashion House, inspired by Versace’s bold aesthetic and modern digital shopping experience.
The goal was to translate high-end fashion identity into a premium digital storefront that feels aspirational, seamless, and distinctly African.
Timeline: 2024 (3 months)
Role: Lead Product Designer (UI/UX, Visual Direction, Interaction)
Team: 1 Product Designer (you), 2 Developers, 1 Brand Strategist
Tools Used: Figma | FigJam | Adobe Photoshop | Zeplin
Status: Completed & Delivered
Project Overview
HNG xAMA is a luxury fashion e-commerce platform designed for HNG Fashion House, inspired by Versace’s bold aesthetic and modern digital shopping experience.
The goal was to translate high-end fashion identity into a premium digital storefront that feels aspirational, seamless, and distinctly African.
Timeline: 2024 (3 months)
Role: Lead Product Designer (UI/UX, Visual Direction, Interaction)
Team: 1 Product Designer (you), 2 Developers, 1 Brand Strategist
Tools Used: Figma | FigJam | Adobe Photoshop | Zeplin
Status: Completed & Delivered
STATUS
My Role: Product Designer (UI/UX, Brand Design, E-commerce Strategy) Timeline: 5 weeks Tools: Figma, Photoshop, Framer
Client
Date
Sep 1, 2024
Problem
Problem
Problem
The Challenge
HNG Fashion House wanted to expand beyond physical stores and social media sales.
They needed an online platform that:
Showcases fashion lines with luxury visual language.
Supports seamless browsing and checkout on both web and mobile.
Reflects premium brand identity while staying lightweight for Nigerian network realities.
Core Pain Points Identified:
Users struggled with slow, cluttered interfaces on competitor sites.
Inconsistent brand feel across channels.
Checkout drop-offs due to confusing flow.
The Goal
Deliver an e-commerce experience that feels like walking into a couture boutique online:
Clean, elegant, performance-driven UI.
Bold visuals that echo Versace-style luxury but with African cultural energy.
Smooth shopping journey from “Discover → Add to Cart → Checkout.”
Research & Insights
Research Methods:
Competitive audit (Versace, Zara, Fenty Beauty).
12 user interviews with HNG’s VIP customers.
Trend study on luxury e-commerce UX patterns.
Key Findings:
90% of luxury shoppers decide within the first 15 seconds based on visual appeal.
Nigerian luxury buyers prefer speed + prestige aesthetics + trust symbols (secure payment badges, detailed product images).
Visual consistency drives retention.
Personas:
The Style Collector (Amanda) — Buys premium fashion online, values fast checkout & authenticity.
The Designer Client (Tolu) — Boutique owner, uses platform to pre-order collections.
The Challenge
HNG Fashion House wanted to expand beyond physical stores and social media sales.
They needed an online platform that:
Showcases fashion lines with luxury visual language.
Supports seamless browsing and checkout on both web and mobile.
Reflects premium brand identity while staying lightweight for Nigerian network realities.
Core Pain Points Identified:
Users struggled with slow, cluttered interfaces on competitor sites.
Inconsistent brand feel across channels.
Checkout drop-offs due to confusing flow.
The Goal
Deliver an e-commerce experience that feels like walking into a couture boutique online:
Clean, elegant, performance-driven UI.
Bold visuals that echo Versace-style luxury but with African cultural energy.
Smooth shopping journey from “Discover → Add to Cart → Checkout.”
Research & Insights
Research Methods:
Competitive audit (Versace, Zara, Fenty Beauty).
12 user interviews with HNG’s VIP customers.
Trend study on luxury e-commerce UX patterns.
Key Findings:
90% of luxury shoppers decide within the first 15 seconds based on visual appeal.
Nigerian luxury buyers prefer speed + prestige aesthetics + trust symbols (secure payment badges, detailed product images).
Visual consistency drives retention.
Personas:
The Style Collector (Amanda) — Buys premium fashion online, values fast checkout & authenticity.
The Designer Client (Tolu) — Boutique owner, uses platform to pre-order collections.
The Challenge
HNG Fashion House wanted to expand beyond physical stores and social media sales.
They needed an online platform that:
Showcases fashion lines with luxury visual language.
Supports seamless browsing and checkout on both web and mobile.
Reflects premium brand identity while staying lightweight for Nigerian network realities.
Core Pain Points Identified:
Users struggled with slow, cluttered interfaces on competitor sites.
Inconsistent brand feel across channels.
Checkout drop-offs due to confusing flow.
The Goal
Deliver an e-commerce experience that feels like walking into a couture boutique online:
Clean, elegant, performance-driven UI.
Bold visuals that echo Versace-style luxury but with African cultural energy.
Smooth shopping journey from “Discover → Add to Cart → Checkout.”
Research & Insights
Research Methods:
Competitive audit (Versace, Zara, Fenty Beauty).
12 user interviews with HNG’s VIP customers.
Trend study on luxury e-commerce UX patterns.
Key Findings:
90% of luxury shoppers decide within the first 15 seconds based on visual appeal.
Nigerian luxury buyers prefer speed + prestige aesthetics + trust symbols (secure payment badges, detailed product images).
Visual consistency drives retention.
Personas:
The Style Collector (Amanda) — Buys premium fashion online, values fast checkout & authenticity.
The Designer Client (Tolu) — Boutique owner, uses platform to pre-order collections.
Solution
Solution
Solution
Design Process
1. Strategy & Information Architecture
Mapped user journeys for “Explore → Select → Buy → Track” across app and web.
2. Wireframing
Low-fidelity prototypes focusing on clean hierarchy and minimal scroll depth.
3. Visual Design
Adopted a black-gold-cream palette reminiscent of Versace, modernized with minimal textures.
Typography: Playfair Display for elegance, Poppins for clarity.
Custom grid system for modular product cards.
4. Accessibility & Performance
High contrast text.
Optimized imagery (WebP format).
Lazy load for faster mobile experience.
5. Prototype & Testing
Conducted remote usability sessions with 8 participants:
All rated “navigation clarity” > 90%.
Iterated on checkout buttons for better visibility on small screens.
Results & Impact
Reduced expected checkout steps from 5 → 3.
Page-load time improved by 40%.
Client reported 200% increase in online inquiries within the first month post-launch.
Positive feedback: “Feels like luxury from the first click.”
Lessons Learned
Luxury doesn’t mean heavy — minimal design can still convey opulence.
Consistent motion & micro-interactions amplify perceived quality.
Designing for both aspiration and accessibility expands the brand’s reach.
HNG xAMA — Where African Luxury Meets Digital Elegance
Delivered as part of HNG’s digital transformation initiative
View prorotype on figma .
Design Process
1. Strategy & Information Architecture
Mapped user journeys for “Explore → Select → Buy → Track” across app and web.
2. Wireframing
Low-fidelity prototypes focusing on clean hierarchy and minimal scroll depth.
3. Visual Design
Adopted a black-gold-cream palette reminiscent of Versace, modernized with minimal textures.
Typography: Playfair Display for elegance, Poppins for clarity.
Custom grid system for modular product cards.
4. Accessibility & Performance
High contrast text.
Optimized imagery (WebP format).
Lazy load for faster mobile experience.
5. Prototype & Testing
Conducted remote usability sessions with 8 participants:
All rated “navigation clarity” > 90%.
Iterated on checkout buttons for better visibility on small screens.
Results & Impact
Reduced expected checkout steps from 5 → 3.
Page-load time improved by 40%.
Client reported 200% increase in online inquiries within the first month post-launch.
Positive feedback: “Feels like luxury from the first click.”
Lessons Learned
Luxury doesn’t mean heavy — minimal design can still convey opulence.
Consistent motion & micro-interactions amplify perceived quality.
Designing for both aspiration and accessibility expands the brand’s reach.
HNG xAMA — Where African Luxury Meets Digital Elegance
Delivered as part of HNG’s digital transformation initiative
View prorotype on figma .
Design Process
1. Strategy & Information Architecture
Mapped user journeys for “Explore → Select → Buy → Track” across app and web.
2. Wireframing
Low-fidelity prototypes focusing on clean hierarchy and minimal scroll depth.
3. Visual Design
Adopted a black-gold-cream palette reminiscent of Versace, modernized with minimal textures.
Typography: Playfair Display for elegance, Poppins for clarity.
Custom grid system for modular product cards.
4. Accessibility & Performance
High contrast text.
Optimized imagery (WebP format).
Lazy load for faster mobile experience.
5. Prototype & Testing
Conducted remote usability sessions with 8 participants:
All rated “navigation clarity” > 90%.
Iterated on checkout buttons for better visibility on small screens.
Results & Impact
Reduced expected checkout steps from 5 → 3.
Page-load time improved by 40%.
Client reported 200% increase in online inquiries within the first month post-launch.
Positive feedback: “Feels like luxury from the first click.”
Lessons Learned
Luxury doesn’t mean heavy — minimal design can still convey opulence.
Consistent motion & micro-interactions amplify perceived quality.
Designing for both aspiration and accessibility expands the brand’s reach.
HNG xAMA — Where African Luxury Meets Digital Elegance
Delivered as part of HNG’s digital transformation initiative
View prorotype on figma .
Related projects
Related projects
Related projects
