Published on <a href="http://ift.tt/2p8ey2U">| Prototyping: From UX to Front End &mdash; Medium</a> Thai Lam <img alt="" src="http://ift.tt/2pUZG87">
<a href="http://www.lazada.com">Lazada</a> 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 issue. Working at Lazada, I spend most of time day in and out design new features. However I really like to have my own time did some exercise 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
<h3>First thing first, why Redesign?</h3>
Let&#8217;s have a look at the current checkout process
<img alt="" src="http://ift.tt/2pbwNGI">
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
<img alt="" src="http://ift.tt/2pUNUui">
Continue on…
<img alt="" src="http://ift.tt/2pbJYYj">
My overall emotion process:
<img alt="" src="http://ift.tt/2pUVOnt">
It should be a very good experience, but when checking back all the screen, 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
<img alt="" src="http://ift.tt/2pbFBvZ">
With the slogan “Effortless Shopping&#8221;, Lazada really wants to create a smoother and simpler checkout process than this one. Also at each main step Lazada hasdifferent tasks for user to choose, edit, enter, hence it need a redesign on those tasks to make it more easier for user. Let&#8217;s have a look at those breakdown tasks:
<img alt="" src="http://ift.tt/2pV2NNa">
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.
<h3>The Redesign</h3>
<h4>Stepper and Navigation</h4>
Instead of using some strange style, why not go with the simple Tab navigation from Google Material Design.
<img alt="" src="http://ift.tt/2pbuzaa">
This enhances the UI and applies the material design concept. Also helps user navigating between steps easier.
<h3>Step 1: Shipping Address</h3>
There are two cases, return customer and new customer. Return Customer already had the shipping address but new customer doesn&#8217;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:
<img alt="" src="http://ift.tt/2pUSGYQ">
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
<img alt="" src="http://ift.tt/2pbINrL">
Next is to apply the Android textfield style, comparing to the old version.
<img alt="" src="http://ift.tt/2pUZd5v"><img alt="" src="http://ift.tt/2pbtZJy">
Finally, adding some color from our branding and putting all together we have a new shipping step
<img alt="" src="http://ift.tt/2pUH08e">
<h3>Step 2: Payment Method</h3>
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.
<img alt="" src="http://ift.tt/2pbF6SC">
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
<img alt="" src="http://ift.tt/2pV2IsQ">
<h3>Step 3: Review Order</h3>
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):
<ul>
<li>Order Summary (items, price of item)</li>
<li>Shipping Address</li>
<li>Delivery Options</li>
<li>Payment Methods</li>
<li>Last chance for customer to use voucher</li>
<li>The final price they need to pay</li>
</ul>
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:
<ul>
<li>Order Summary (items, price of item) — 100% choose this</li>
<li>Shipping Address — 100%</li>
<li>Payment Methods — 60%</li>
<li>Delivery Options — 60%</li>
<li>Last chance for customer to use voucher — 100%</li>
<li>The final price they need to pay — 80%</li>
</ul>
Base on the result this is what we gonna have, again using card-list style
<img alt="" src="http://ift.tt/2pbGuox">
The final design with colors and styles applied:
<img alt="" src="http://ift.tt/2pUTRY4">
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
<img alt="" src="http://ift.tt/2pUZG87"><img src="http://ift.tt/2pbF5Oy" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pV2Okc">Redesign Checkout Process of Lazada Mobile App</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redesign Checkout Process of Lazada Mobile App

Top Stories