E-commerce · Fine jewellery
Juri Jewelry
Fine jewellery, presented with editorial restraint.
About the project
A curated jewellery storefront for a Nairobi label selling gold rings, earrings, necklaces, bracelets, chains, anklets, and watches to women and men.
View live projectJuri sells small, quiet pieces, so the platform had to be quiet too—an editorial storefront where photography leads, the interface recedes, and every category still resolves into a real purchase.
- Client
- Juri Jewelry
- Status
- Live commerce platform
- Role
- Product design & full-stack development
- Services
- Art direction · UX/UI · Motion design · Engineering
- Industry
- Fine jewellery
- Platform
- Responsive e-commerce
Case study framework
From the problem to the shipped product.
A transparent view of the UX thinking, interface decisions, and front-end engineering behind the work.
- 01Problem
- 02Context
- 03Discovery
- 04Pain points
- 05Flows
- 06Wireframes
- 07Exploration
- 08Final UI
- 09System
- 10Implementation
- 11Learnings
The jewellery needed atmosphere; the store still needed clarity.
Juri's pieces are quiet and considered. A conventional promotional storefront would overpower them, but an art-directed experience could not compromise category discovery, product evaluation, accessibility, or the path to purchase.
Who the product had to work for—and what the business needed it to change.
- Everyday jewellery buyers
- Gift shoppers
- Women's collection customers
- Men's collection customers
- Build a distinct editorial identity
- Make seven categories effortless to browse
- Support seasonal storytelling
- Give the team control of products and content
Discovery focused on the decisions people were already trying to make.
- Photography could carry most of the brand voice if the interface stayed disciplined.
- Category and audience filters needed one shared catalogue model.
- Motion required persistent orientation cues and a complete reduced-motion alternative.
The experience had to remove three sources of friction.
Brand versus shop
Atmospheric fashion experiences often make the actual products difficult to find.
Overlapping taxonomy
Seven categories across women's and men's collections could easily create duplicated pages.
Motion disorientation
Horizontal storytelling becomes frustrating without progress, control, and accessibility fallbacks.
Editorial discovery resolves into one consistent catalogue.
- 01
Enter story
Wordmark, positioning, and collection imagery
- 02
Choose category
Rings, earrings, necklaces, and more
- 03
Refine collection
Audience, availability, and product filters
- 04
Inspect piece
Materials, imagery, stock, and care
- 05
Purchase
Cart and checkout with context intact
Wireframes tested pacing as much as layout.
The early model paired a sparse landing moment with a horizontal collection sequence, a dependable vertical catalogue, and a conventional product purchase flow. The experience could be expressive without inventing new interaction rules everywhere.
Restraint, rhythm, and respectful motion shaped the direction.
Photography leads and interface chrome recedes
Expressive motion always keeps orientation visible
The catalogue remains familiar and fast
Reduced motion is a complete layout, not an afterthought
The live storefront opens like an editorial and resolves like a shop.
The live homepage capture shows the large typographic identity, direct shop entry, and category-led horizontal story. Supporting imagery demonstrates the visual direction carried through the catalogue.
The system separates brand expression from dependable commerce patterns.
#3e281d#e5d2b7#1b1512#f7f5f0- Neutral surfaces let gold, skin, and editorial photography establish the palette.
- Counters and hairline progress indicators anchor motion sequences.
- One catalogue engine powers collection, category, search, and filter routes.
Motion, accessibility, commerce, and content management work together.
The responsive storefront combines scroll-based storytelling with familiar shopping patterns. A custom admin manages products, images, materials, inventory, orders, customers, and journal content, while route-level metadata and structured data support discoverability.
Replace the pinned horizontal sequence with a vertical stack for reduced motion.
Reuse catalogue filtering across every category route.
Generate route-specific metadata, canonical URLs, and social previews.
What the work changed—and what I would carry into the next version.
An expressive opening works when the transaction model underneath stays familiar.
Accessibility constraints often produce a clearer motion system.
A shared catalogue model let the brand add collections without rebuilding the storefront.
The impact
An editorial storefront that still behaves like a shop.
Juri now has a single system serving the brand and the catalogue at once: a landing experience built for atmosphere, a grid built for buying, and an admin that lets the team publish new pieces, collections, and stories on their own.
Continue exploring
Westwind Aviation