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.
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
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.
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.
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
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.
Modular approach
In order to meet different market needs and help with development, we approached our solution in a modular basis.
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.
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
Modular design to met the needs of different regions
Next project
ontrees