Kohl's Usability review

KOHL’STablet Web - User Experience Review

Customer Journey Model

Entry Points

Exit Points

Broken Experience

Checkout Indepth Analysis

Recommendations

GL Design Capabilities

01

02

03

04

05

06

07

Customer Journey Model01

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

$

Entry Points on Customer Journey02

Entry Points on Customer Journey

Data source: Entry Page Type Report (04 Apr 2015 to 2July 2015) 6


$

41% 39.4% 15.8% 1.4%1.6%

Traffic Source for Entry Points

Data source: Full Paths Report (04 Apr 2015 to 2 July 2015)


$

7

Site urlwww.mobile.kohls.com Search & browsing

From landing screen

Login & guest users

From navigation & product display

Login & guest users

From navigation, product display & landing

Search & browsing

From social media, product categories & Landing

41% 39.4% 15.8% 1.4%1.6%

Exit Points on Customer Journey03

Exit Points on Customer Journey

Data source: Exit Pages Report (04 Apr 2015 to 2 July 2015)


$

11.7%

Site urlwww.mobile.kohls.com Search & browsing

17.4% 2.26% 4.3% 0.8%

9

From landing screen

Login & guest users

From navigation & product display

Login & guest users

From navigation, product display & landing

Search & browsing

From social media, product categories & Landing

41% 39.4% 15.8% 1.4%1.6%

Broken Experience04

Broken Experience in Customer Journey


$

almost 90% of incomingtraffic roaming between these

3 touch points the other 10% barelycompletes the checkout

11

Entry

Exit

Checkout Indepth Analysis05


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


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


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

FocusBenchmark Average

Data Input 37

55.6

61.1

46.3

57.4

44.4

Copywriting

Layout

Navigation

Flow

Focus

Total Score : 301


Competitive Analysis Kohl’s

JCPenney

macys

16

NAReview 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



JCPenney

macys

17

Review order before and after checkout

Guest checkout


Mode of assistence

Avoid contextual word like continue.

Clear distinct “Call to action” on top & bottom

Inline help in form




code






JCPenney

macys

18


Guest checkout


Mode of assistence

Avoid contextual word like continue.


Inline help in form




code

Use dropdown only when there are less than 20 items.





JCPenney

macys

19


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

20


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

21


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

22


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

23


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

24


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

25


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

26


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

27


Guest checkout


Mode of assistence



Inline help in form




code






JCPenney

macys

28


Guest checkout


Mode of assistence



Inline help in form




code




Recommendations06

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

Recommendations

Place the primary action above the foldSeverity: Disruption

Most customer don’t look around. They prefer to be guided through the checkout instead.

31


Recommendations


Automatically detect and select the customer’s credit card typeSeverity: 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 cardSeverity: 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

Recommendations


Make “Guest Checkout” the most prominent optionSeverity: 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

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 journeyEye TrackingHeat 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

Thank You

Kohl's Usability review

Documents

Transcript of Kohl's Usability review