At a glance
-
4
countries: the UAE and Saudi Arabia, then the USA and Canada
-
2
languages for the first stores, English and Arabic
-
5
ways to fulfil an order, from home delivery to collecting in a boutique
The brief
Give Cartier new flagship online stores in the United Arab Emirates and Saudi Arabia, then the USA and Canada. The stores had to join boutique and online commerce, on Salesforce Commerce Cloud with Fluent Commerce managing orders.
The challenge
Cartier had never sold online in the region, so the stores had to launch from nothing while keeping the boutique at the heart of how clients shop.
The product pages also had to handle what boutiques deal with every day: watches with extra straps, rings that need a size, and pieces that are not sold online.
My role
My experience department at Born ran the UX and UI. I set the UX strategy and led the design workshops with the team.
I articulated it through the UX and UI for the stores, then product listing designs with a behaviour document: grid and feed views, quick view, strap previews, size selection and the shopping bag, for mobile, tablet and desktop.
What we did
- Designed new flagship stores for the UAE and Saudi Arabia, in English and Arabic, then for the USA and Canada.
- Offered five ways to fulfil an order, from home delivery to collecting in a boutique.
- Let clients buy from stock pools across the whole regional network.
- Designed product listings in Cartier's Erato design system, with grid and feed views and a quick view.
- Showed watch straps before purchase, including the complimentary second strap some watches come with.
- Handled ring sizes, boutique exclusives and pieces not sold online within the listing.
Starting from zero
Cartier needed new flagship stores quickly: first for the UAE and Saudi Arabia, in English and Arabic, then for the USA and Canada.
Born provided the UX and UI design, and the front-end and back-end development, including order management.
Five ways to fulfil
Salesforce Commerce Cloud and Fluent Commerce worked together so clients could buy from stock anywhere in the regional network. Orders could then be fulfilled five ways: home delivery from the warehouse, home delivery from a boutique, boutique pick up, click and collect, and click from store.
It took online, fulfilment and boutique teams working as one, and it kept the boutique part of the journey even when clients shopped online.
Erato
We designed within Erato, Cartier's design system: a ten-column desktop grid and a four-column mobile grid, typography, colours, forms, and service icons from booking an appointment to gift wrapping and finding a boutique.
The new listing features were set out in a behaviour document for mobile, tablet and desktop.
Grid and feed
Product listings switch between two views. The grid shows four products across, with a link to the straps available for each watch. The feed shows three, larger. In either view a quick view opens in place, so clients can choose a strap and add to bag without leaving the listing.
Filters cover new pieces and web exclusives, category, case material, diamonds, gender and type of bracelet.
Straps
Many watches take interchangeable straps, and some come with a second one free. The quick view shows the choice before purchase: steel by default for a watch with one strap, or brown leather plus a complimentary blue or green strap for a watch that comes with two.
The choice follows the watch into the shopping bag, which notes an exchanged strap or the second strap the client picked.
Sizes and availability
Jewellery needs a size before it goes in the bag, so the quick view for rings asks for one, then confirms it, for example 44 mm, before adding to bag.
Pieces that are not sold online stay in the listing, with a Discover button in place of Add to bag. Boutique exclusives and web exclusive tags have their own treatment too.
The result
Flagship online stores for the UAE and Saudi Arabia, then the USA and Canada, where clients choose how each order reaches them, from home delivery to a boutique. The listing designs added quick view, strap previews and size selection within Cartier's own design system.
