Lazada Checkout Redesign 2017

The cart and checkout were my very first and high-profile projects when I first joined Lazada in January 2017. I worked closely with the Checkout team – Product Manager & Developers and with our Design Manager at that time to come up with a new design.

My Role

UX Designer
UI Design
Interaction Design

Background & Problem Statement

In 2017, one of the priorities of Lazada as a company and for the checkout vertical as a team is around the topic of Service Reliability and Quality. Which means we need to improve the way we talk to our customers, treat them and generally respect them — provide an Effortless Checkout process. 

The Legacy

Old Design: The legacy was an outdated technology and had a lot of inconsistencies both in design and interactions which customers found it painful and/or challenging to finish the checkout process.

The Goals

3 Primary Goals Of The Redesign

  • Technology update
  • Decrease Checkout abandonment by 10%
  • Simplify the checkout process

Research and Data Insights

Data Insight: Overall abandonment of checkout was more than 75% which means that out of 10 customers who purchase from Lazada only 3 of them finishes their Checkout process.

All ventures Checkout abandonment data in 2016

Research Findings

The research team conducted a usability testing of the legacy app in Thailand and Vietnam since they were the 2 ventures with the highest abandonment rate.

Research Objective: Uncover pain points and understand where and why the users dropping their Checkout process.

Findings Summary

Factors Affecting Customers Decision: Most of the challenges that users experienced was on the Shipping which is the very first step of the Checkout process. The Shipping step have a few sub-steps which influenced the users decision to proceed or not with their purchase.

Factors affecting customers decision to finish the checkout process

Customers Pain Points: Customers shared their feedback

Customer Pain Points

Motivation Of Shopping Online: Users have different motivations why they shop online. This could depend on a few factors, for example, where they are, what they are currently doing, environment situation, etc. Below are the most common motivations both for Lazada & non-Lazada customers of why they shop online.

Customer motivations

The Process Behind The Redesign

Competitors Analysis: I mapped out the competitors we have and grouped them into two –– international and regional (Southeast Asia) to understand what each competitors Checkout process looks like. How many checkout steps and what is the difference for each.

Average Checkout Steps: 5/6
Lazada Checkout Steps: 6

Competitors mind map

The Competitors Wall: As I was going through the competitor’s app screen by screen, I noticed 2 Checkout approaches they used based on their target audience.

  1. Long Form: Taobao/Tmall use this approach because Chinese users behavior shows they prefer to read or fill a form in one go. Also the Chinese words are compact which means that an English sentence that’s composed of 10 words when translated to Chinese is only 5 words, more or less and vice versa.
  2. Task-Focus: Tokopedia and most direct regional competitors use this approach because majority of Southeast Asia users prefers information in chunk. They would like to know what they need to do if they are in a certain page that requires action.
Competitors wall

Ideation

Before I started sketching anything, I set my strategy to test the 2 approaches to validate any of my questions and identified the design principles.

Core Principles

  • Transparency
  • Consistent buying experience
  • Mobile first 

Key Questions

  1. Is information in task-focus a lot easier to understand? Do they understand what each steps requires them to do?
  2. Why would users prefer to use a long-form or a task-focus?
  3. What is the level of urgency when they are on Checkout?

Sketches: I sketched both long form (left) and task-focus (right) approaches and keeping most of the components the same.

Internal Employee Feedback: I draw the approaches on our UX whiteboard wall and asked 12 internal employees which Checkout they prefer and why. This was the result;

70% prefers task-focus because;

  • The process feels shorter and faster
  • Information is a lot easier to understand
  • Creates urgency
Checkout whiteboard for internal employee feedback

The Prototype: I made two prototypes using Axure so that the participants can simulate the process during the workshop where they have to do the testing of long form and task-focus.

Axure prototype

The Workshop

Workshop: I facilitated the workshop of 7 participants –– Checkout PM & Tech Lead and the design team.

I choose a low-fi prototype so there were no biases inside the room where half of the participants were designers. The main goal was to understand and empathize with the customer journey process.

During the workshop, I asked the participants to do the same tasks both for the long form and task-focus approach.

The Tasks

  1. Add an item to the basket
  2. Buy the item as;
    a. Guest user
    b. First time user
    c. Returning user
  3. Save two addresses
Checkout redesign workshop
Checkout redesign workshop posts it

The Result: The result of the workshop helped me determined my design decision. The feedback gave me a broader understanding of different angles for each scenarios we had during the workshop.

4 out of 7 participants preferred task-focus

👉🏼 Experience was lighter and easy

👉🏼 Mobile friendly

👉🏼 Easy to scan information

Visual

Localization: I created a google spreadsheet for easy collaboration with anyone to help with the translations. This document helped me set the number of lines I need to allocate for each words/sentence for proper translations.

Local translations google spreadsheet

Design To Scale: Making sure that the local language works with the cards & other components in the app too.

Successful Payment Confirmations

Users can easily find the next step, track order and instructions.

I collaborated with Alipay designers on this part where I focused on the hierarchy of information/content and making sure the consistency of the screens with the entire Checkout design.

Final Screens


Takeaway:

Working on my first high profile project for millions of users had a lot of pressure but also exciting. The Product Manager, my design manger and the design team were really helpful and keeps pushing me to find solutions of the problems. Likewise, working with the tech team was great because we were able to find out in the early stages, especially during the workshop if all interactions were possible to implement and how long would it take. Overall, this project was enjoyable to work on.

Comments are closed.