A Shopify storefront system built for modern luxury

Context

Vaucelle makes leather bags and small goods, cut and finished by hand. The brand sells on craft and restraint, so the store had to feel like stepping into a boutique, not scrolling a marketplace. I was the sole UI/UX designer, responsible for the design system, every screen, and a handoff a Shopify developer could build from without guesswork.

The problem

Luxury and conversion often pull in opposite directions. Off-the-shelf Shopify themes look templated and cheapen the product. Heavily styled luxury sites go the other way: they hide prices, bury the add-to-bag button and lose shoppers at checkout. Vaucelle needed both sides at once, a store that feels editorial and expensive, with a buying journey as low-friction as the best-performing stores. It also had to respect how Shopify actually works, so the design would not fall apart once it became a live theme.

Approach

1. 01

   Started with the system, not the screens: colour and spacing tokens, a paired serif and sans type scale, and named styles ready to become CSS custom properties

2. 02

   Built a reusable component library: navigation and mega menu, a product card with hover state, faceted filters, a size selector, buttons and form fields

3. 03

   Designed around how Shopify themes are built, with sections, blocks and product variants, so every layout maps to something a developer can build and the client can edit

4. 04

   Kept the product as the hero with large photography, generous white space and a quiet interface that steps back

5. 05

   Used proven e-commerce patterns where they matter most: quick-add from the listing, a slide-in cart that keeps shoppers browsing, and a two-step checkout with express wallets up front

6. 06

   Designed desktop and mobile side by side, treating the mobile menu, touch targets and thumb reach as first-class rather than a shrunk-down desktop

7. 07

   Organised the Figma file by journey (discover, product, cart, checkout, account) so developers and stakeholders can find any screen fast

Outcome

• →22 responsive screens across desktop and mobile
• →A token-driven design system: colour, spacing and a paired serif/sans type scale
• →A reusable component library that maps to Shopify sections and blocks
• →The full shopper journey covered: home, shop, product, cart, checkout, payment, account, sign-in and brand story
• →A developer-ready Figma file, organised for a clean build into a Shopify theme

Reflection

“The hardest part was restraint. In luxury, every element on the page has to earn its place, and that applies to the conversion features too. Fitting the system to Shopify's sections, product variants and checkout rules shaped a lot of decisions, and it made the work stronger. Everything in the file can be built and edited by the client, instead of looking good in Figma and breaking in production.”