E-commerce · UX Redesign

Manuka Honey — E-commerce Redesign

Redesigning the digital storefront for a premium New Zealand Manuka honey brand in the Moroccan market — transforming a low-trust shopping experience into a conversion-driven platform.

Role
Lead UI/UX Designer
Timeline
8 Weeks
Platform
Shopify · Web
Deliverables
UX Audit, UI Design, Component Dev
Replace with hero mockup — product page or homepage screenshot
Overview

A premium product stuck in a generic template

ManukaQueenBee.ma is a Moroccan e-commerce store selling certified New Zealand Manuka honey — a high-value product that demands trust, clarity, and education. The existing Shopify store used a default theme that failed to communicate product quality, UMF certification differences, or brand credibility.

The challenge: How do you sell a €50–€200 jar of honey online to a market unfamiliar with the product — and make them confident enough to buy?

Diagnosis

Problems identified, solutions designed

✕
Problems
  • No visual hierarchy — users couldn't distinguish UMF grades or price tiers
  • Zero trust signals — no certifications, reviews, or origin story visible
  • Confusing navigation — product categories buried under generic labels
  • No mobile optimization — 70%+ of Moroccan traffic is mobile
  • French/Arabic content was machine-translated, breaking tone and trust
✓
Solutions
  • Designed a UMF grade switcher component — clear visual comparison of potency and price
  • Added trust bar with certifications, origin badges, and customer reviews
  • Restructured IA around user intent: "Which honey is right for me?"
  • Mobile-first responsive redesign with thumb-friendly interactions
  • Rewrote all content in natural French and Darija for local authenticity
Process

From audit to production-ready components

01
UX Audit
Heuristic evaluation of the existing Shopify store — identified 23 usability issues across navigation, content, trust, and conversion flow.
02
Research & IA
Competitive analysis of premium honey brands. Restructured information architecture around user decision-making patterns.
03
UI Design
High-fidelity mockups in Figma — homepage, product page, collection page, and checkout. Dark premium palette with gold accents.
04
Component Dev
Built the UMF grade switcher as a production-ready HTML/CSS/JS component, integrated into the Shopify theme.
Homepage redesign
Product page with UMF switcher
Mobile responsive views — collection & checkout
Key Component

The UMF Grade Switcher

The centerpiece of the redesign: an interactive component that lets users compare Manuka honey grades (UMF 5+ to UMF 20+) side by side. Each grade displays potency, health benefits, price, and certification — solving the #1 user confusion point identified in the audit.

Built as a standalone HTML/CSS/JS component with smooth transitions, ready for Shopify Liquid integration. Designed for touch, tested on mobile-first.

Replace with UMF grade switcher component screenshot
Impact

Designed for conversion, built for trust

The redesign transformed a generic template into a premium shopping experience that educates and converts. Key improvements delivered:

23
Usability issues resolved
3×
Clearer product differentiation
100%
Mobile-responsive coverage
Tools & Stack

What I used

Figma Shopify Liquid HTML / CSS / JS Adobe Photoshop Adobe Illustrator Google Analytics
Next Project
Skillz-up SaaS Platform →