pandora-add-basket.gif
 
 

project overview

Unify checkout experience of 14 PANDORA regions by creating a simple and easy to use modular solution that uses best checkout principles to primarily help increase revenue of users visiting the mobile site, while allowing PANDORA regional offices to tailor design to their local needs.

Deliverables: InVision prototype, specs for in-house development, full documentation, industry research, wireframes, flows and design guidelines. 

 
 
Pandora-background-2.jpg

The challenge

• Inconsistent checkout experience across PANDORA’s 14 regions;  e.g. number of steps and information required varied significantly from country to country. 

• 70% of PANDORA users browse the website on mobile devices, but only 1/3 checkout on this platform after adding an item to the basket. This represents a significant revenue opportunity. 

• Reduction of customisation required to support new market rollout.

 

Approach

Pandora-process2.png

Discovery

Industry insights, user stories, ideation, sketching 

Defining

Modular structure, regional differences, guerrilla testing, checkout flow definition, functionality gathering

Assembling

Sketch wireframing, testing motion, transitions, flows in InVision and Principle

Packaging

Finalising design, handover documentation, specs

 

discovery

During this phase I gathered information from PANDORA's users, industry standards and competitors; conducted rapid user testing, sketching sessions with team in iterative cycles to reduce options to two checkouts propositions. 

 
Pandora-sketching.jpg

Learnings

Looking for alternative to tackle address forms including  progressive disclosure and auto complete options to simplify design.

Gathered guiding principles from other m-com sites: Walmart,  ASOS, Tiffany, Warby Parker, etc. 

Conducted in-house guerrilla testing to get early insight into two checkout routes. Exploring single page VS multi step checkouts

Learnt PANDORA'S Charms are a lifestyle purchase that marks significant events on buyers’ lives.   

 

defining journeys

Prioritised journey of guest users as they account for 90% of sales in PANDORA, leaving log in and registration as an optional step. 

Pandora-sitemap-large.jpg
 
Pandora-sketches5.jpg

M-commerce principles

An important part of this project was to come up with a way of handling forms in a graceful manner, as they make up for the majority of element in checkout. We followed standard principles from  Material Design Guidelines, Baymard Institute report in M-Commerce usability and progressive disclosure to minimise visual impact on users.

Address fields and payment options were going to be a specific form challenge, as they drastically change across PANDORA’s 14 regions

 
Pandora-global-map.jpg

identifying regional
differences

I analysed popular m-comm sites across all 14 PANDORA markets to ensure we were mindful of local demands and differences. 

 
Europe has very strict data collection laws as opposed to USA. Storing user’s data without their consent or opt in and out of privacy policies and services varies greatly over EMEA.
Alipay and WeChat Pay are primary payment methods in China. These payment services can be linked with bankcards, and users can simply pay scanning the unique QR code.
Almost all of the 125 million people living in Japan speak Japanese exclusively.  Amazon Japan requires sellers to have Japanese-speaking customer service staff. 
Generally speaking, website localisation means giving some extra attention to things like:  Dates, Time, Currency, National Holidays, Addresses, Metric units etc.
In South Korea, the mobile application for retailer Lotte, offers real-time mobile notification of promotions and coupons when users step into its department stores.
Irrespective of the language which the site is going to be developed in, care should be taken that the development is done in Unicode
 

Wireframes

A wireframing/ InVision prototyping phase helped us standardising  global checkout flow, while keeping in mind alternative scenario for some regions. 

Pandora-wires-new.png
 

Modular approach

In order to meet different market needs and help with development, we approached our solution in a modular basis.

Pandora-modules.png
 

Modules helped unify designs of different regions

Markets could choose the modules that were relevant to them, change the positioning of a module, copy and some behaviour to create their own checkout pages; all within certain limits to keep design consistency.

Modules were particular relevant for payment section; some regions supported iFrame payments, other handled payments on third party sites. The use of modules helped control the experience of all these scenarios using similar solutions that reduced customisation for the development team. 

 
Pandora-module2.png
 
Pandora-background-desktop-gui.png
 

The result

New checkout has been optimised to facilitate the journey of Guest users which makes for 90% of current purchases in PANDORA
14 regions with a unified checkout experience, improved sense of security, simplicity and clarity of journey
Modular approach facilitates development and maintenance while leaving enough room to meet local demands. 
 

Mobile responsive site 

pandora-checkout-final.gif
 

Modular design to met the needs of different regions

 

Next project

 
ontrees-background.png

ontrees