case study: mobile optimised e-commerce checkout by amanda wise

MOBILE WEB E-COMMERCE CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE

AMANDA WISE, UX DESIGN

OVERVIEW

Learnings

The project enabled me to research and explore best practice for: •  User Flows & Experience

mapping

•  Usability for Mobile web/touch-‐‑friendly interfaces

•  Form design

•  Lean Checkout process design

•  Team workshop management

About the Project

This case study documents the process I took to research and design a fictional e-‐‑commerce store from brief to clickable prototype in a few days.

I worked as part of a student team but the design deliverables presented are my own.

THE BRIEF

40"/4#$'"./*-5&"%3")

I#$9#&#$1@%%.3#/$93*"$*"&##$/31*3+)*$J#&1'+,1G6

6

6-(&%"((/7,#8()

•! J&#1#+*$@+34'&01$,1$4,1"3'+6

•! ;+,-.#$1)"''.1$*'$'K#&$L0@1*A",H#M$@+34'&0$)"#)D.31*1$4'&$%,&#+*16

•! NK#&$,))#11'&3#1$,..'9#/$-=$*"#$1)"''.O1$/&#11$)'/#6

6

6

)

)

)

*+,-./.0"/1$,5-3.)

!&@#P%3&3*$31$,$QF)*3'+,.R$+#9$3+*#&+#*$&#*,3.#&$4'&$S@1*&,.3,+$1)"''.1$,+/$%,&#+*1$9"'$9,+*$T@,.3*=U$9#..A%&3)#/$1)"''.$@+34'&0$3*#01$4'&$VAWX$)"3./&#+G6

!&@#P%3&3*O1$H313'+$31$*'$#+,-.#$)@1*'0#&1$,+/$*"#3&$D3/1$*'$)"''1#$*"#$3*#01$*"#=$9,+*$4&'0$,$1#.#)*3'+$'4$1)"''.$&#)'00#+/#/$@+34'&01G)

)

COMPETITIVE ANALYSIS (SEE APPENDIX)

•! >'1*$&#*,3.#&1$3+$*"#$1%,)#$",H#$%''&.=$/#13<+#/$9#-13*#1$,+/$0,+=$",H#$+'$'+.3+#$1*'&#1$,*$,..G6

•! Y'$.'),.$&#*,3.#&$'K#&$#,1=$0'-3.#$/#H3)#$-&'913+<$'&$%@&)",1#G6

•! !"#$'+.=$%'*#+*3,.$)",..#+<#&$QC.'*"3+<Z3&#)*G)'0G,@R$31$+'*$,$/3&#)*$)'0%#*3*'&$,1$3*$'K#&1$-@13+#11$,1$9#..$,1$1)"''.$@+34'&01$,+/$1'$31$+'*$4')@1#/$1'.#.=$'+$%,&#+*1O$+##/1G6

6

GOALS OF THE DESIGN

To present a fresh, modern, mobile-‐‑optimised user experience that sets TrueSpirit apart from its competitors and…makes life easier for busy parents.

USER FLOWS & SCENARIOS

SCENARIOS Method •  Brainstorming goals and pain points for each Persona

•  John -‐‑ Returning customer •  Sarah -‐‑ New customer •  Jess -‐‑ Corporate customer (school administrator)

Findings •  The team prioritised the experience flow and must-‐‑have content for each of the three

Personas Opportunities identified •  New customer – provide an all-‐‑in-‐‑one “Essentials” product bundle for each school, so its

easy for Sarah to know exactly what she needs to buy •  Returning customer – provide an Express Checkout and clear price comparison so it’s a

quick, efficient experience for John to buy just a few items. •  Business customer – provide a customer Account set-‐‑up process for schools to create

product bundles so it’s easy for Jess to provide parents with a one-‐‑stop-‐‑shop for all their uniform needs

USER FLOWS

PERSONAS ANALYSIS

John Returning Customer, Pragmatic Purchaser

Sarah First time Customer, Savvy Spender

Jess School Administrator

Needs •! Value •! Easy returns •! Credibility/Trust

•! Checklist of all required uniform items

•! B2B service •! Quality •! Range

Functionality •! Comparison pricing •! Discounts

•! Essential uniform bundle for a school

•! Other parents advice/testimonials

•! Add/Edit school info and uniform requirements

Features •! Member’s Account •! Express check-out •! Email auto-

responder offers

•! 1-click bundle buy •! iPad optimised •! Save to Wishlist •! Email reminders

•! Product bundle order form

•! School collateral upload

•! Catalogue download

rahhn

HOME

SKETCHES

CHECKOUT PROCESS

BUSINESS CUSTOMER ACCOUNT PROCESS

PRODUCT PAGE ITERATIONS

PRODUCT PAGE WIREFRAME

Notes

4

1

2

3

WG! J&'03+#+*$P"'%%3+<$C,&*$*,-$'%#+1$

1.3/#&$1"'93+<$,..$3*#01$3+$*"#$C,&*$

93*"'@*$+,H3<,*3+<$,9,=$4&'0$

%&'/@)*$%,<#6

XG! C'0%,&31'+$%&3)3+<$93*"$&#*,3.6

bG! c@,+*3*=$/31)'@+*1$4'&$#11#+*3,.$3*#016

dG! P)"''.$.'<'U$+,0#$,+/$+'*#$'+$*"#$

3*#0G$E+4'$.3+D1$*'$P)"''.O1$)'0%.#*#$

%&'/@)*$.31*3+<$,+/$3+4'&0,*3'+$4'&$

%,&#+*1G6

eG! C'+H#&13'+$'%*3031,*3'+$#.#0#+*16

5

THE SOLUTION

Design a household calendar app that enables Deepa and Sam to co-‐‑ordinate tasks easily.

QUICK CLICKABLE PROTOTYPE

PROTOTYPE V.1 Method •  I created a quick clickable prototype using Omnigraffle User Journey 1 John, as a returning customer, can find a single item and check-‐‑out quickly. Scenarios •  Finding an individual item •  Express Checkout User Journey 2 Sarah, as a first-‐‑time customer, can find a selection of items required by her child’s school and check-‐‑out easily on her iPad. Scenarios •  Finding a school “Essentials” uniform product listing •  New Customer Checkout

DESIGN PROTOTYPE

PROTOTYPE V2 The second iteration of the product focused on interaction design optimised for mobile web through the “express checkout” user journey of John, our returning customer:

Home screenExpress checkoutProduct listing Adds to cart

Signs up for newsletter

Signs In

Views

BrowseProduct page

Selects

Gives True Spirit a great

review

Shipping and returns policy

Order confirmat

ionProceeds to checkout

USABILITY TESTING

USABILITY TESTING Test process We found 5 participants willing to test our prototype. We gave them all three tasks to perform on our prototype User testing tasks 1. You are buying a polo shirt for your daughter. Show me how you would go about it 2. You are a new customer. Take me through your checkout process 3. You are a returning customer. Take me through your checkout process

FINDINGS •  4 out of 5 participants used the main menu on the Home page to

go to the Product page, rather than the large search field. •  2 out of 5 preferred Guest Checkout even though they were

returning customers

•  Change “Sign-‐‑up” to “New Customer” to avoid confusion with “Sign-‐‑In”

•  Add Back bujon on the cart •  Checkout could be even quicker for returning customers:

•  Sign-‐‑In ! Shipping/Billing (auto-‐‑filled) ! Review Order Or •  Sign-‐‑In ! Review Order (with Shipping/billing auto-‐‑filled) Then offer •  option to Save Details and join as a Member

THANKS

AMANDA WISE, UX STRATEGY & DESIGN

WISEAMANDA.WORDPRESS.COM/

JANUARY 2014

APPENDIX

THE SUPPLIED PERSONAS

COMPETITIVE ANALYSIS E$)'0%,&#/$*"#$*'%$&,+D3+<$)'0%,+3#1$Q'&<,+3)R$'+$i''<.#$4'&$#2%#)*#/$1#,&)"$*#&0156WG! L)@1*'0$1)"''.$@+34'&01M6

6666

XG! L-@=$1)"''.$@+34'&0M6bG! L^,+/93)D$h3<"$1)"''.$@+34'&066

PR1 “CUSTOM SCHOOL UNIFORMS”

"! P#,&)"$<'#1$*'$.,+/3+<$%,<#$4'&$

1)"''.$@+34'&016

#! Y'$.3+D$*'$@+4'&0$1#)*3'+$3+$'+.3+#$

1*'&#kk6

#! h,&/$*'$&#,/6

Silverfleece.com.au


"! P#,&)"$'%*3031#/6

"! J"'+#$+@0-#&$%&'03+#+*6

"! 8&3#+/.=U$/31*3+)*3H#$-&,+/6

#! Y'$1#,&)"6

#! JZ8$8.3%-''D$),*,.'<@#6

GetSmartSchoolwear.com.au


"! \&,+/3+<$/31*3+)*3H#$,+/$4&3#+/.=6

"! 7%$4&'+*$%&3)3+<$6

"! Z3&#)*$&#1%'+1#$)'%=6

"! ^#%#,*#/$),..1$*'$,)*3'+6

#! Lh'0#A0,/#M$/#13<+6

#! h#,/.#11$)"3./&#+$:$'*"#&$031.#,/3+<$

3..@1*&,*3'+16

CustomUniformCo.com.au


"! C.#,&U$-#+#F*A4')@1#/$+,H6

"! I"=$1"'%$93*"$@1$%&'0'6

"! Z#.3H#&=?1#&H3)#$@%$4&'+*6

"! B3H#$)",*6

"! !#1*30'+3,.16

"! i''/$%"'*'<&,%"=6

"! ;,1=$*'$@1#$13l3+<?'&/#&3+<$)",&*6

6

ClothingDirect.com.au

REFERENCES :MOBILE WEB E-COMMERCE

•! "j%5??-@3.*G-=0'-=G)'0?

0'-3.#m)"#)D'@*?6

•! "j%5??0'-3.#G4,+/,+<'G)'0?0'H3#1n

:4&'0o"'0#:,3/o;>\;ZZ;ZJSi;

p:E!;>mV;gmEZo6

•! "j%5??0G/3..,&/1G)'0?1#,&)"6

•! "j%5??0G)&,*#,+/-,&&#.G)'0?6

•! S1'16

•! Y#*$,$J'&*#&6

•! "j%5??H1)'G)'?6

Reference sites include: