4. Customer Journey Model
The model is based on a Customer Journey Map made of the five main phases the consumer goes through while purchasing on an eCommerce
website
4
Home Page
Landing Page
Offers & Deals
Customized Home
Recommendations
Recently viewed items
Search
Filter
Browse Categories
Sort & Order
Products Reviews
Recommendations
Product Description
Images
Reviews
Recommendations
Price
Offers
Cart Management
Wishlist
Recommendations
Guest Shopping/Login
Shipping Options
Order Options
Payment Options
Order Tracking
Site Landing Product Discovery Product Display Cart Management Checkout
$
11. Broken Experience in Customer Journey
Site Landing Product Discovery Product Display Cart Management Checkout
$
almost 90% of incoming
traffic roaming between these
3 touch points the other 10% barely
completes the checkout
11
Entry
Exit
13. Checkout Indepth Analysis
Checkout conversion rate
Conversion rate for tablet has reduced over an year.
13
Shopping cart abandonment rate
75%
90%
Data source: http://www.salecycle.com/remarketing-report-q1-2015/
Data source: Cart Abandonment Rate ReportKohl’s
Global Average
14. Checkout Indepth Analysis
Reasons for Abandonment
33%
23%
18%
18%
7%
Forced Account Creation
Credit Card Trust
Complicated Checkout Process
Payment Methods
Extra Cost (shipping, tax, fees)
14
15. Checkout Indepth Analysis
Checkout process - Usability Evaluation
Benchmarked against the checkout process of top 100 grossing US E-Commerce sites. 63 guidelines across 6 categories
have been evaluated for reaching a usability score.
15
Data Input
Copywriting
Layout
Navigation
Flow
Focus
Benchmark Average
Data Input 37
55.6
61.1
46.3
57.4
44.4
Copywriting
Layout
Navigation
Flow
Focus
Total Score : 301
16. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
16
NA
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom.
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
17. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
17
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue.
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
18. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
18
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue.
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items.
Identify credit card type based on credit card number
Evoke a sense of trust
19. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
19
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
20. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
20
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
21. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
21
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
22. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
22
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
23. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
23
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
24. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
24
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
25. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
25
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
26. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
26
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
27. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
27
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
28. Checkout Indepth Analysis
Competitive Analysis Kohl’s
JCPenney
macys
28
Review order before and after checkout
Guest checkout
Remove persistent navigation from top
Mode of assistence
Avoid contextual word like continue
Clear distinct “Call to action” on top & bottom
Inline help in form
Use shipping address as billing address by default
Preserve all customer input despite error in fields
Auto detect city and state immediately after providing zip
code
Use dropdown only when there are less than 20 items
Identify credit card type based on credit card number
Evoke a sense of trust
30. Recommendations
Few pointers for improving checkout flow
Indicate both required and optional fields
• Use an asterisk ‘*’ to indicate required fields, preferably in front of
the label so that they are easily scannable.
• Write ‘Optional’ to indicate optional fields, possibly in a slightly
gray tone, in parentheses at the end of the label.
Auto-detect city and state immediately after ZIP code is provided
Users don’t like filling out form fields. This caused many users to rush
through the fields and as a consequence, they often misspelled things
like their city or state.
Only use drop-down lists when there are less than 20 options
The problem with long drop-down list is that they are difficult to scan.
First, user click the drop-down to even see the options, then user get
a list that have to be scroll through.
30
Severity: Disruptive
Severity: Interruption
Severity: Interruption
31. Recommendations
Place the primary action above the fold
Severity: Disruption
Most customer don’t look around. They prefer to be guided through
the checkout instead.
31
Few pointers for improving checkout flow
32. Recommendations
Few pointers for improving checkout flow
Automatically detect and select the customer’s credit card type
Severity: Interruption
Based on the last digits of the credit card number, it’s possible to
determine the card type, so don’t burden customers by asking them to
select their card type. It might sound like a small change but in
general, users always want to fill out as few form fields as possible.
Format the “Expiration date” fields as they appear on the credit card
Severity: Interruption
Severity: Harmful
The way to format the expiration date fields correctly is to try and
match what most customers see on their credit card. This will minimize
confusion and misreads as the numbers are easily matched from
physical credit card to virtual form fields.
Customers may hesitate if the credit card fields don’t look secure
Payment page with security icons, badges and text, and a general
‘robustness’, was perceived as more secure while other parts without
these visual clues inspire less confidence.
32
33. Recommendations
Few pointers for improving checkout flow
Make “Guest Checkout” the most prominent option
Severity: Harmful
In a multi-column layout, don’t place the ‘Guest Checkout’ option in the
right column since most customers mainly look at the left column.
33
34. Expert usability review
Analyze the data in combination
with existing data
Usability testing
Study social media strategy
Improved design
Usability review for each
touch point in customer
journey
Eye Tracking
Heat map
Identify problematic areas on
the basis usability review &
analytics
Prepare and execute usability
testing on problematic areas
Involve social channels in
customer journey
34
Creation of improved design
1 2 3 4 5
Recommendations
Step by step approach for engaging new customers
