My Design Process:

Project Background

In Singapore, revenue in the e-commerce market is projected to reach USD $2,793 million in 2021 according to Statista, the rate of revenue growth continuously increasing each year. There’s over 2.9m users in e-commerce market in Singapore and continuously increase, 47% e-commerce transaction completed on laptop/desktop.

​

According to Smart Insights — the global average conversion rate on desktop device is 2.59%.

What stops user to make purchase and what motivates them to make payment?

How can a smooth check out flow help with conversion rate?

Project Objective

The objective is to optimize the UI of existing check out flow for frequent users, to improve user efficiency while helps to boost lazada's conversion rate and enhance the product experience.

Product Walk-through
​and Findings

After experiencing the complete checkout flow of Lazada for few times I found few existing problems on UI:

• Vision hierarchy is not clear enough

• User flow can be smoother

• Lack of emotional design and human touch

• Pending for payment is very hidden and user receives no alert, which cause high order abandon rate 

• Content imbalance for some pages 

• …

Assumptions

From product walk through and user flow diagram we can see the check out flow is logical, user can finish transaction in no more than 6 Pages / minimum 5 clicks, which is reasonable and fair, yet many improvement can be done on page details. 

According to these the primary problem findings I made some assumptions:

User Interviews

According to these assumptions I drafted an interview brief and shadowing 3 users who always/have been shop on Lazada to prove my assumption.

Pain Points and Needs

Insights & Summary

Therefore, the problem to be solved in this project is:

1. to solve the problem that users think the information hierarchy on UI is messy;

2. to solve the problem that users do not have a high perception of the brand;

3. to solve the problem that users find the UI style is not consistent.

4. Try to simplify the whole check out flow

Through function walk through + interview, some of the assumptions have been proved, I also found some new user habits and insights, such as

• There are a lot of ads on other media/social platform, but the website as a whole does not have the ambience, there is no consistent art direction

• The user loyalty to platform is not high

• Users are most concerned about the price of the product, whether the seller is reliable, shipping costs and shipping time

Design Solution

I started with the first step in flow for redesign, a search result page that provides a lot of useful information for the user to select the desired product.

In the original design, the information are scattered and unfocused, making the overall UI look loose and inefficient. So in redesign I have unified the brand colours on the page and grouped elements for each cards.

​

​Old Design

​New Design

The product details page also has a problem with an unclear information hierarchy and too much white space there, so in redesign I removed the right column about shipping info (relevant information will be displayed at checkout step) and rearranged the layout of information. For additional information such as ratings and feedbacks I used tabs to make the information easier to find and read.

​Old Design

​New Design

Also redesigned the logging pop-up window just because I found it not done in a right way..

​Old Design

​New Design

In the final step of the flow, I think it is possible to simplify the two original steps: place order and payment into one step, reducing the number of user clicks while communicating the information to the user more efficiently through the rearrange information, where the user can know all the details about their order in the same page.

​Old Design

​New Design

Summary and 
​Further Thoughts

What I’ve done:

• Consistent ui design with more branding exposure and higher space utilisation;

• Created clearer visual hierarchy;

• Simplified check out flow.

It’s a detail-oriented project while I need to look at the big picture, to redesign the whole process from both aesthetic and function view. 

In addition to those redesigns, I also noticed some interesting details during the design process, which left for more in-depth research and improvement in the future, such as:

• Facing different users (new users vs. existing users) and different user flows, what can we help them with a hassle-free shopping process;

• Noticed that lazada has their own mascot but not seem to be used frequently, what can we do with it to add more human touch to an e-commerce platform;

• More and more e-commerce transaction are completed on mobile devices, what can design help to make web-based online shopping experience better?