Author:Long Nguyen Hai & Thang Nguyen Viet Event: Vietnam UX Group meeting on 18th August

1. E-commerce Checkout
Design: Principles,
Guidelines & Case
Studies
Long Nguyen Hai & Thang Nguyen Viet

2. Table Of Content
• Important Rules & Principles
• Fundamental Guidelines
• Conversion Rate Optimization

3. Numbers
65.23%
Abandonment Rate
Why?
44% High Shipping Cost
25% High Product Price
22% No Shipping Cost Info
2.13%
14% No Guest Checkout Option
12% Need Too Much Info
Conversion Rate 11% Complex Checkout Process
Infographic by Website Optimization Company Invesp

4. Important Rules & Principles

5. 7 ± 2 principle
According to George A. Miller’s studies humans’
short term memory can retain only about five
to nine things at one time.

6. 2-Second-Rule
A loose principle that a user shouldn’t need to
wait more than 2 seconds for certain types of
system response, such as application-switching
and application launch time.
Reliable principle: the less users have to wait,
the better is the user experience.

7. 3-Click-Rule
According to this rule users stop using the site
if they aren’t able to find the information or
access the site feature within 3 mouse clicks. In
other words, the rule emphasizes the
importance of clear navigation, logical structure
and easy-to-follow site hierarchy

8. 80/20 Rule
This rule (the Pareto principle) states that 80%
of the effects comes from 20% of the causes.
This is the basic rule of thumb in business
(“80% of your sales comes from 20% of your
clients”), but can also be applied to design and
usability.

9. Fitts’ Law
Fitts’ Law is a model of human movement
which predicts the time required to rapidly
move to a target area, as a function of the
distance to the target and the size of the target.
The law is usually applied to the movement of
the mouse visitors have to perform to get from
point A to point B.

10. Fundamental Guidelines

11. Process Should Be Linear
• Issue: Having steps within steps confuses and intimidates
customers as it breaks with their mental model of a linear
checkout

12. Case studies
• https://www.walmart.com

13. Case studies
• http://muachung.vn/

14. Guideline
• Never redirect to a previous step, but
instead to the next step.
• Be sure you have a progress indicator.
• Keep “back” button work. (data, views ...)

15. Registration Should Be Optional
• User don’t want to remember new username/password &
create new account just to buy one or two products.
• Customers have a mental model in which Account = Spam.
• Signing up for an account also takes time.
• Many customers just don’t understand why they need an
account to buy a product.

16. Case studies
• http://muachung.vn
• http://www.zalora.vn
• http://pub.vn/

17. Form should be clear
• Without descriptions, many form field labels can be
ambiguous or hard to understand(billing address vs shipping
address ...)
• Customers overlook error messages, making them less likely
to resolve the errors.
• Customers feel that their privacy is being invaded when they
are required to submit seemingly unnecessary personal
information.
• Customers don’t want to wait.

18. Guideline
• Add Descriptions To Form Field Labels
• Use Clear Error IndicationsDon’t Require Seemingly
Unnecessary Information. If the information is necessary, at
least explain why.Instant Field Validation and
ConfirmationUnsaturated Button Color for Secondary
ActionsFast Spinning Loading IconHighlighting the Order
Summary Box
• Use Only One Column For Form Fields

19. Case studies
• http://tiki.vn

20. Case studies
• http://www.nhommua.com

21. Case studies
• http://123.vn

22. Case studies
• http://zalora.vn

23. Avoid Contextual Words Like
“Continue”
• Issue: Contextual words such as “Continue” are ambiguous
and tend to confuse customers.

24. Case studies
• http://zalora.vn

25. Case studies
• http://tiki.vn

26. Coupon in Checkout process
TEST: (Straight A/B test for an online retailer in the women’s clothing market)
Control: Coupon code on the first page of the checkout process.
Variation 1: Coupon code removed.
Results:
Control: 3.8% conversion rate. (967 sales / 25,489 unique visitors)
Variation 1: 5.1% conversion rate. (1,276 sales / 24,991 unique visitors)
Source:
http://www.conversiondoctor.com/conversion-blog/coupon-codes-increase-checkout-abandonm

27. Conversion Rate Optimization

28. Conversion?
• “Conversion” is an online marketing term that describes an
instance of a visitor to your website performing an action
that you deem to be desirable. For example, if you run an
online store, one likely conversion would be the sale of a
product.
• Conversions are tracked using a conversion rate: the ratio of
all visitors to the number of visitors who perform the
desired action.
• Most website owners want a high conversion rate. The
question is, how do you turn a new visitor into a loyal
customer?

29. What sell?
• To sell effectively, you have to sell solutions, not products.You
also have to sell benefits, not features.Your customers aren’t
looking for products, services or features: they’re looking for
solutions to their specific problems.
• Features are just the things that make up your product or
service, but benefits are what people get from using your
product; they are the reason for choosing your product.

30. What sell?
iPod nano: 16 gigabytes vs. 1,000 songs,
which is better?

31. What sell?
• Once you know what you’re selling, you need to break
down the barriers that customers will put up when
evaluating how valuable your product is to them. These
barriers are their reasons why they shouldn’t buy your
product.

32. AIDA
• One very popular approach to sales is call AIDA, which
stands for “Awareness, Interest, Desire, Action”. It can be
used in a conversion funnel on the Web, where the website,
instead of the salespersion, plays the key role in selling.

33. AIDA: Awareness
• This is especially important for websites because of the
speed with which potential customers could navigate away
from your website.You have just a brief moment to grab
their attention, and you should have to keep it long enough
to close the sale.

34. AIDA: Awareness
6ix give customers first impression by using a very high
quality product images.

35. AIDA: Awareness
Bad: MuaChung shows an annoying modal box

36. AIDA: Awareness
Bad: SohaPhim’s banners look like Ads

37. AIDA: Interest & Desire
• These stages are the part that sells the product. Clearly &
concisely what you’re product does and how it will give your
visitor real value. Create desire by talking about the benefits
your product will bring to customers

38. AIDA: Interest & Desire
Interest
Interest
Action
Desire

39. AIDA: Action
• The final step is a call to “Action”. At this stage, you have to
close the sale, so the call to action is absolutely vital.This is
why checkout process plays a very important role in
increasing conversion rate.
• Recently, the letter “S”, which stands for “Satisfaction”, was
added to AIDA, forming AIDAS. Getting customers is great,
but getting those customers to return or thell their friends
about your product is even better.

40. Best Practices

41. Show The Product
• Seeing an actual product before buying it gives you a lot
more information about it.You get a good feel for what
you’re purchasing.
• If you sell digital goods, such as applications or website
templates, showing screenshot - or, even better, videos - is
essential

42. Let People Try It
• One of the best way to sell your product is to get people to
try it out. When people try a product, they are doing more
than just looking at it or considering it: they are actually using
it, which means they are getting involved.

43. Case Study
Joomlart lets users previewing themes before
downloading.

44. Social Proof
• Social proof is a psychological phenomenon that occurs
when people aren’t sure about the course of action they
should take and so do what every one else does.
• We can use social proof to help boost conversions for
popular products by advertising that they’re popular or that
others have approved of them.

45. Social Proof
Tiki.vn has a strong community

46. Shipping Costs
• Don’t push customers away with shipping costs. Study by
Invesp discovered that 44% of users abandon shopping cart
because of high shipping cost.
• A study by ForeSee Results discovered that the deciding
factor that closed the deal for 34% of users was that the
stores didn’t charge shipping costs
• Offering free delivery may not be a viable option for every
store. If you do charge a shipping cost, be transparent about
it and offer clear and simple shipping options

47. Money-Back Guarantee to
Eliminate Risk
• Risk is one of the biggest barriers to conversions. Can people
trust your company? What if your product doesn’t do what
they want? What if they discover something better?
• The best way to tackle risk is to offer money-back guarantee

48. Make It Easy To Sign Up
• Sign-up forms are barriers. Nobody likes filling them out
because they take time and effort. The sign-up form is
probably the last stage in your conversion funnel, so make
sure you lose as few people as possible by making the form
short and simple.
• Don’t ask for personal information, it can always be filled in
later.

49. Testing

50. The Importance of Testing
• Every website is different and serves a unique audience, so
it’s always best to fine-tune your strategy and tactics.
Techniques that work well for one website may not work for
another. How do you figure what works best for you? TEST!
• According to Steve Krug (author of Don’t Make Me Think),
testing one user is 100% better than testing none, and testing
one user early in the project is better than testing 50 near
the end

51. Appendix

52. Top 10 Conversion Optimization
Problems In Checkout Process

53. Recommendation
• Books: Don’t Make Me Think (Steve Krug), Getting Real
(37Signals), The Smashing Book (Smashing Magazine),
Designing Web Interface (Bill Scott)
• Website/ Magazine:
http://uxmag.com
http://uxdesign.smashingmagazine.com
http://ux.stackexchange.com
http://52weeksofux.comhttp://www.uxbooth.com

54. Contact
• Long Nguyen Hai:
hailong@dynabyte.vn @webvampire
• Thang Nguyen Viet:
vietthang@dynabyte.vn @thangnv77

55. Thank You!