omnichannel retail

Global eCommerce Checkout

Themeable Design System

A localisable, scalable, omnichannel checkout, providing a seamless experience between the web shop and physical stores.

Global ecommerce checkout

The Challenge

Luxury brands have the advantage of strong creative and storytelling to drive sales, but as shoppers give high value items more consideration, a clear, simple and reassuring checkout process is vital to conversion. The checkout was part of the Labelux platform, which is a Demandware-based white label eCommerce product tailored for the luxury market, serving brands such as Jimmy Choo, Versace, Bally and Belstaff.

Labelux was an in-house agency providing eCommerce services to the JAB Luxury group of brands, with each brand offering a different combination of delivery, gift and payment options. Our team’s goal was to bring together the checkout flows and refine the purchase process whilst incorporating omnichannel initiatives to provide a harmonious experience with stores, whilst accounting for region-specific legal requirements. We also considered the group’s roadmap, and included preliminary designs for services we planned to fully research and roll out in future.

How might we provide the customer with a luxury, convenient experience?

How might we provide a seamless purchase experience suitable for the global markets of all brands in the group?

How might we reinforce the link between physical stores and the website?

Information Gathering

We started by reviewing the existing checkout and collecting screenshots of all possible journeys, along with examples of each automated email sent to the customer at various points in the purchase and returns cycle. Our platform partner, Demandware, also provided a detailed site audit and recommendations. Reviewing these, along with tracking data which showed common drop off points and the most common issues reported to customer services, allowed us to identify and prioritise areas of improvement.

Checkout review
We started by reviewing each brand's checkout, highlighting areas which could be improved.
For example, showing a tax calculator for the US market, improving microcopy and providing a streamlined header through checkout.

Expanded purchase path

Rather than focusing solely on the checkout, we took a holistic approach and ensured all touchpoints across the site were updated to support any new features and to reassure the customer. For example, new delivery options were clearly communicated to the user on the product detail and shopping bag pages as well as during checkout, to inform and assure customers, and encourage them to complete their purchase.

Shipping options
Iterations on displaying shipping options on the desktop site. The final iteration involved adding icons to the main calls to action so they stand out against all the information, and displaying prices and lead times for all delivery options so they're visible at a glance.

Providing an uninterrupted flow

Especially in the case of high value products, we found that shoppers were more likely to compare and eliminate options in their shopping bag before deciding which to purchase. A mini cart dropdown which appears when a user adds a product to their bag, or hovers over the shopping bag icon, allows users to quickly view and edit their choices without having to load another page. After testing various mobile options, we decided to only show the latest producton smaller screens, as a large overlay was more jarring than loading a new page.

Once the customer is ready to proceed to checkout, the header is replaced with a streamlined, checkout-specific version which removes distraction and focuses the user on the tasks required to complete their purchase.

Mini Cart
Mini cart on desktop and mobile

Omnichannel experience

The brands had already built up loyal store customers, who expected a similar level of personalised service when shopping on the website. To make the online and offline experience more seamless, we added options to check the stock levels of products  and set their preferred store. As well as having the products delivered, the customer could also choose to reserve items to view and pay for at their nearest Bally showroom, or pay online and collect in person.

Check stock in store
Pay online and collect in store, or pay and collect at the showroom

Removing barriers to purchase

We found that the login page was a common dropoff point. With most of the group’s site visitors being new rather than returning customers, we wanted to provide an onward journey if the customer was in a rush or hadn’t built up enough trust in the brand yet to part with their data. Aiming to balance the business requirement for gathering data with providing the user with a quick and easy way to check out, we included a guest checkout link but made this quite small, whilst highlighting the benefits of creating an account.

Login
An early option of the login as a popup - our assumption was that users would prefer this rather than waiting for a page to load, but users on the whole assumed it was an email signup popup and closed it without reading. The mobile view shows the next iteration.

Payment methods and security

We wanted to ensure that users felt supported and confident during the checkout process, as well as offering them alternative journeys at any friction points. In addition to the reserve in store option and allowing guest checkout, we included clear information on delivery options and pricing, payment options, returns policy and customer service contact details prominently throughout the site. As the user reached the checkout flow, we also added the word ‘secure’ to our checkout button to reassure users concerned about entering their card details.

We wanted to offer familiar payment methods and delivery options per locale, so our payments section had the be flexible to accommodate this. For example, paying after delivery via Klarna is common in Germany, and cash on delivery is preferred in Poland and China.

Checkout Payment

Localisation

As well as additional payment options, we ensured that each section of the checkout template could be adapted to meet each locale’s legal requirements and expected layout. For the US market, we added a tax calculator on the shopping bag page as tax is not included in US pricing. Forms were optimised using an autofill service, with the layout altered to accommodate each locale’s address format. The Japanese site displayed both Kanji and Katakana input fields.

localisation
Tax calculator for the US market and customised form fields for the Japanese locale.

Validation and outcome

Validation and outcome

The goals of this project were tailored towards the business requirement of sharing functionality between brands, and didn’t include budget or scope for usability testing. Ideally, we'd have been able to run some in-person sessions with users before the design phase, and would have had more access to data on which to base our assumptions.

To mitigate this, I approached employees from across the brands (in roles unrelated to eCommerce) and asked them to complete tasks using prototypes, so that we could validate and iterate during the design process.

Updates to the checkout went live in stages, so that we could use live data to inform further refinements to the flow. Most of the features are now visible on each brand’s checkout pages, with each brand able to select which options to offer. 

Project Information

Client
JAB Luxury

Agency
Labelux

Date
2016

My Role

Discovery and requirements gathering
Competitor analysis
Low-fidelity wireframes and prototypes
High-fidelity layouts
Usability testing and validation

Design Tools

UXPin, Sketch, Photoshop, Illustrator, Photoshop, InDesign

Credits

Design & Research
Suzy Grundy, Karolina Ferenz

Engineering
Dan Seymour, Andy Fairlie, Labelux development team

subject matter experts
Zoey-Monique Naidoo, Brand eCommerce teams

More Projects

Consumer Beauty Web PlatformWhite Label Solution

Bespoke Handbag ServicePersonalisation

Virtual Makeup StudioAugmented Reality

iconfinder_Icon-3_3064816
iconfinder_Icon-8_3064836
iconfinder_Icon-6_3064817
iconfinder_Icon-2_3064815

© ZARA DREI 2019