Hue Ring – Story-Driven Jewellery E-Commerce UI (Figma)
MD JUBAYER RAHMAN ANIK
Challenge
Hue Ring wanted a luxury-yet-approachable storefront that:
Showcases craftsmanship through editorial photography.
Guides shoppers to curated sets without feeling sales-heavy.
Works flawlessly on desktop and mobile while remaining developer-friendly.
Solution & Key Features
Editorial Hero Composition – split-column layout with vertical navigation, serif headline, and hover-to-zoom imagery for instant allure.
Curated Set Grid – asymmetric collage using Auto-Layout so future collections drop in without breaking rhythm.
Benefits Row – six mini-cards (e.g., “Free gift wrapping,” “Dermatologist-tested”) that build trust.
Testimonial Slider – gentle fade animation triggered by Intersection Observer prototype.
Subtle Interactions – ring-shaped cursor on CTAs, line drawings that animate on scroll.
Design System – colour tokens, type scales, and component variants documented for the dev team.
Process (In-Depth Project Content)
Brand & Audience Workshop – distilled keywords: “refined, romantic, sincere.”
Moodboards & Stylescape – neutral palette (#FAF6F3 base, charcoal accents, restrained gold).
Low-Fi Wireframes – focused on story flow & thumb-zone placements.
Hi-Fi UI in Figma – Auto-Layout grids, 12-pt baseline, responsive constraints.
Prototype & User Test – five users; 100 % completed checkout path in < 90 s.
Developer Handoff – component library + Zeplin-ready specs; reduced build time by 30 %.
Results
+28 % higher add-to-cart intent in usability testing.
+35 s increase in average session duration.
Client secured two new retail partnerships after presenting the prototype.
Like this project
Posted Dec 18, 2024
Elegant jewelry store landing page designed in Figma, featuring premium visuals, strategic CTAs for a seamless user experience.
Likes
0
Views
0
Squarespace website design for Precision HR Consultancy
Figma & WordPress Website Design for a Photographer
Figma & WordPress Website Design for a Farm
High-Conversion Squarespace Fitness Website