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

The first task was to review 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
Reviewing each brand's checkout, highlighting areas which could be improved.

Expanded purchase path

Taking a holistic approach rather than focusing solely on the checkout ensured all touchpoints across the site were updated to support any new features, and to guide the customer through the full purchase path. 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, our data 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. A large overlay is more jarring than loading a new page on smaller screens, so for mobile devices only the latest product added appears at the top of the screen. 

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. Adding options for users to check the stock levels of products and set their preferred store allow for a more seamless online and offline experience. 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

Our data showed that the login page was a common dropoff point. With most of the group’s site visitors being new rather than returning customers, it was important 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, a small guest checkout link was added below the main call to action, along with copy to highlight 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

Clear information on delivery options and pricing, payment options, returns policy and how to contact customer service was featured prominently throughout the site, ensuring users feel supported and confident during the checkout process, as well as offering alternative journys at friction points. Adding the word 'secure' to the checkout button along with a verification badge as the user enters the secure payment area reassures users concerned about entering their card details.

The payment section was desgined to be flexible in order to accommodate familiar payment methods and delivery options per locale, to ensure users are presented with an experience they are comfortable with. 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, each section of the checkout template could be adapted to meet each locale’s legal requirements and user needs. Tax is not included in US pricing, so to reduce the cart abandonment rate for the US market, a tax calculator appears on the shopping bag page so the user can keep track of any additional costs before they reach payment. Forms were optimised using an autofill service, with the layout altered to accommodate each locale’s address format. For example, 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, Rebz Green

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