Hatton Labs — Contemporary Jewellery Brand Website
Role
Lead Product Designer
Mode
Sole Ownership via Texture
Scope
Full E-Commerce Redesign
UX Architecture
High-Fidelity UI
Editorial UI
Timeline
Mar 2025 — Feb 2026
Figma
Live
Product Context & Constraint
Hatton Labs is a London-born jewellery brand — designed in the UK, hand-crafted in Italy, with over 100K pieces shipped worldwide and press from GQ, Vogue, Hypebeast. The brand had outgrown its site. The visual identity had moved on; the e-commerce hadn't. Outdated design, missing infrastructure, and a shopping experience that didn't match the ambition of a brand scaling globally
The brief: bring the site up to the level of the product and the press it was already getting
Design Approach
About half the site was redesigned, the other half built from scratch. The focus throughout was the same: make the product easy to find, easy to evaluate, and easy to buy — across rings, bracelets, chains, pendants, and earrings, each with their own sizing logic
The catalog introduces switchable grid density (4 or 6 columns), letting users choose between editorial browsing and efficient scanning. Filtering accounts for the real complexity of jewellery sizing — rings, bracelets, chains, and accessories each have independent size scales, surfaced contextually rather than dumped into a single dropdown. Product pages carry the full decision stack: material variants, size selection with an integrated international size guide, stock-aware states (notify when available, sold out), reviews with ratings, and expandable delivery and care details
A full editorial system was designed from scratch — not a blog bolted on, but a content layer woven into the brand experience. Categorised by format (Studio Visit, Off-Camera, The Look, Raw Archive, Editorial), it gives the brand a publishing voice that feeds back into product discovery
System & Outcome
The redesign covered every surface: homepage, catalog, PDP, search with predictive results and recommendations, full auth system, account management, bag and wishlist drawers, Help Center with structured FAQs, contact with typed enquiries, product care, size guides per category, region selector, and cookie management.
A brand that was already winning culturally now has a site that can keep up commercially — converting attention into revenue at the scale the product demands.
Hatton Labs — Contemporary Jewellery Brand Website
Role
Lead Product Designer
Mode
Sole Ownership via Texture
Scope
Full E-Commerce Redesign
UX Architecture
High-Fidelity UI
Editorial UI
Timeline
Mar 2025 — Feb 2026
Figma
Live
Product Context & Constraint
Hatton Labs is a London-born jewellery brand — designed in the UK, hand-crafted in Italy, with over 100K pieces shipped worldwide and press from GQ, Vogue, Hypebeast. The brand had outgrown its site. The visual identity had moved on; the e-commerce hadn't. Outdated design, missing infrastructure, and a shopping experience that didn't match the ambition of a brand scaling globally
The brief: bring the site up to the level of the product and the press it was already getting
Design Approach
About half the site was redesigned, the other half built from scratch. The focus throughout was the same: make the product easy to find, easy to evaluate, and easy to buy — across rings, bracelets, chains, pendants, and earrings, each with their own sizing logic
The catalog introduces switchable grid density (4 or 6 columns), letting users choose between editorial browsing and efficient scanning. Filtering accounts for the real complexity of jewellery sizing — rings, bracelets, chains, and accessories each have independent size scales, surfaced contextually rather than dumped into a single dropdown. Product pages carry the full decision stack: material variants, size selection with an integrated international size guide, stock-aware states (notify when available, sold out), reviews with ratings, and expandable delivery and care details
A full editorial system was designed from scratch — not a blog bolted on, but a content layer woven into the brand experience. Categorised by format (Studio Visit, Off-Camera, The Look, Raw Archive, Editorial), it gives the brand a publishing voice that feeds back into product discovery
System & Outcome
The redesign covered every surface: homepage, catalog, PDP, search with predictive results and recommendations, full auth system, account management, bag and wishlist drawers, Help Center with structured FAQs, contact with typed enquiries, product care, size guides per category, region selector, and cookie management.
A brand that was already winning culturally now has a site that can keep up commercially — converting attention into revenue at the scale the product demands.
Hatton Labs — Contemporary Jewellery Brand Website
Role
Lead Product Designer
Mode
Sole Ownership via Texture
Scope
Full E-Commerce Redesign
UX Architecture
High-Fidelity UI
Editorial UI
Timeline
Mar 2025 — Feb 2026
Figma
Live
Product Context & Constraint
Hatton Labs is a London-born jewellery brand — designed in the UK, hand-crafted in Italy, with over 100K pieces shipped worldwide and press from GQ, Vogue, Hypebeast. The brand had outgrown its site. The visual identity had moved on; the e-commerce hadn't. Outdated design, missing infrastructure, and a shopping experience that didn't match the ambition of a brand scaling globally
The brief: bring the site up to the level of the product and the press it was already getting
Read More
Hatton Labs — Contemporary Jewellery Brand Website
Role
Lead Product Designer
Mode
Sole Ownership via Texture
Scope
Full E-Commerce Redesign
UX Architecture
High-Fidelity UI
Editorial UI
Timeline
Mar 2025 — Feb 2026
Figma
Live
Product Context & Constraint
Hatton Labs is a London-born jewellery brand — designed in the UK, hand-crafted in Italy, with over 100K pieces shipped worldwide and press from GQ, Vogue, Hypebeast. The brand had outgrown its site. The visual identity had moved on; the e-commerce hadn't. Outdated design, missing infrastructure, and a shopping experience that didn't match the ambition of a brand scaling globally
The brief: bring the site up to the level of the product and the press it was already getting
Read More
Desktop UI
Mobile UI
Desktop UI
Mobile UI
Desktop UI
Mobile UI
Home
Shop Mega Menu
Search Drawer
Product Detail
Product Detail
PDP -> Reviews Drawer
PDP -> Gallery Overlay
Bag Drawer
Wishlist Drawer
Account Drawer
Search Drawer
About Brand
Size Guide
Journal
Customer Care
Customer Care
Cookie Modal
Home
Shop Mega Menu
Search Drawer
Shop
Product Detail
Review Drawer
Gallery Overlay
Bag Drawer
Wishlist Drawer
Account Drawer
My Account
About Brand
Size Guide
Journal
Customer Care
Region Modal
Cookie Modal
