omnichannel retail

Global eCommerce Checkout

Global eCommerce Checkout

A localisable, scalable, omnichannel checkout, providing a seamless experience between the web shop and physical stores. Created to improve conversion, support omnichannel services and provide a seamless experience for global luxury customers.

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 decrease abandonment and improve conversion?

How might we provide a frictionless experience 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. 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. 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/taps the shopping bag icon, allows users to quickly view and edit their choices without having to load another page. On mobile devices, we found that a full summary in a large overlay was more jarring an experience than loading the shopping bag page to see more, so for smaller screens only the latest product added appears in the dropdown. 

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

We designed, built and launched the checkout as a template with configurable components, so that each brand could quickly and easily tailor the options to the services they offer, without the tech team needing to maintain 5 different checkout builds. This improved the efficiency of new feature rollouts and for changes to services to be updated reactively during peak season. We also received positive feedback from the brands' global teams and indirectly from the user via customer services.

Ideally, we'd have been able to run some in-person sessions with users before the design phase, but as the budget and scope didn't allow for this I approached employees in roles unrelated to eCommerce and within each brand's target demographic during the course of the project, asking them to complete tasks using prototypes, so that we could iterate and validate during the design process.

Updates to the checkout went live in stages and, so that we could use live data to inform further refinements to the flow. We didn't have the traffic to run split tests with statistical significance, so by releasing features separately we could monitor that specific change, and quickly revert if we noticed any negative impacts. Feedback from the tech team and engagement with the store services tools indicated that we had met our goals of simplifying maintenance and linking up online and instore, though a lesson learned is that I'd have liked more access to the data to make like-for-like comparisons to understand if we truly had an impact on conversion and abandonment.

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

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

© ZARA DREI 2020