Lazada is the biggest E-commerce platform in Southeast Asia, has operation in 6 countries: Indonesia, Thailand, Singapore, Malaysia, Philippines and Vietnam. Its checkout process is complicated and also because of fast pace development, the design is not consistent and still has a lot of usability issues. Working at Lazada, I spend most of my time day in and out designing new features. However I really like to have my own time did some exercises to see if I can have a look back at the design and improve it. So this is one of the exercise I did in my free time
First thing first, why Redesign?
Let's have a look at the current checkout process
Overall this looks like a very normal checkout process for a complicated platform like Lazada. Where we had many payment options, complex delivery methods that require the steps to be broken down like this.
I made a purchase to see the real process
Continue on…
My overall emotion process:
It should be a very good experience, but when checking back all the screens, the problem occurs when I input the wrong mobile number and the page reloads, the delivery option switch back to the default one which I didn’t notice (also I was paying attention to the mobile number) and I just keep proceeding without carefully check about the shipping fee. Hence there must be a problem about information design and display that actually makes me miss the very important information about shipping fees.
Otherwise it is a fast process with simple steps to complete the checkout. Overall it’s not so bad experience since the shipping fee is not so bad.
Now put myself away, here is the User Needs for a checkout process
With the slogan “Effortless Shopping", Lazada really wants to create a smoother and simpler checkout process than this one. Also at each main step Lazada has different tasks for user to choose, edit, enter, hence it need a redesign on those tasks to make it more easier for user. Let's have a look at those breakdown tasks:
I decided to go with Android since the new release of Material Design and the new update design of our Application also. This is a good chance to redesign the checkout flow to make it consistent with the new app.
The Redesign
Stepper and Navigation
Instead of using some strange style, why not go with the simple Tab navigation from Google Material Design.
This enhances the UI and applies the material design concept. Also helps user navigating between steps easier.
Step 1: Shipping Address
There are two cases, return customer and new customer. Return Customer already had the shipping address but new customer doesn't have any. So for Return Customer, the app should show the shipping address from their last purchase. But for New Customer, we should show the form to enter straight away the shipping address of the customer
Secondly, to provide correct delivery options, the system needs the shipping address of customers:
So, for new customer, the delivery options only appear when they enter their shipping address. And for returning customer, since they already had address saved in the system, Delivery Options can be shown right away
Next is to apply the Android textfield style, comparing to the old version.
Finally, adding some color from our branding and putting all together we have a new shipping step
Step 2: Payment Method
The grid layout is hard to scan and also the expand/collapse interaction takes time. Instead of that, I prefer using simple card layout listing like Shipping method. It also helps me keep the consistent pattern recognition of the whole checkout flow.
For the step of each payment method, the app should open a new modal screen so user can focus more on completing their task, instead of expanding the selected payment option
Step 3: Review Order
This is the final step that let customer check their order before make a payment. Hence these are information needs to provide to customer (in order):
- Order Summary (items, price of item)
- Shipping Address
- Delivery Options
- Payment Methods
- Last chance for customer to use voucher
- The final price they need to pay
I did an interview with 5 peoples on how they rank the important of those information and suggest how they will order them. Here is the result:
- Order Summary (items, price of item) — 100% choose this
- Shipping Address — 100%
- Payment Methods — 60%
- Delivery Options — 60%
- Last chance for customer to use voucher — 100%
- The final price they need to pay — 80%
Base on the result this is what we gonna have, again using card-list style
The final design with colors and styles applied:
That’s it for everything, this is still a very quick redesign concept, to make a redesign that can fulfill all requirements of Lazada checkout flow, more time need to dig deep and cover all the case. However thanks for reading. Press recommend if you like this article
