1. MOBILE WEB E-COMMERCE
CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE
AMANDA WISE, UX DESIGN

2. 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.

3. 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
*+,-./.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)
)

4. 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
*+,-./.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)
)

5. 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

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.

7. 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.

8. USER FLOWS & SCENARIOS

9. 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

10. USER FLOWS

11. USER FLOWS

12. USER FLOWS

13. 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

16. HOME
SKETCHES
CHECKOUT
PROCESS
BUSINESS
CUSTOMER
ACCOUNT
PROCESS

17. PRODUCT PAGE ITERATIONS

18. 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

19. THE SOLUTION
Design a household calendar app that enables
Deepa and Sam to co-­‐‑ordinate tasks easily.
QUICK CLICKABLE PROTOTYPE

20. 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

33. DESIGN PROTOTYPE

34. 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 screen
Express
checkoutProduct listing
Adds to cart
Signs up for
newsletter
Signs
In
Views
Browse
Product page
Selects
Gives True
Spirit a great
review
Shipping and
returns policy
Order
confirmat
ionProceeds to
checkout

37. USABILITY TESTING

38. 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

39. 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

40. THANKS
AMANDA WISE, UX STRATEGY & DESIGN
WISEAMANDA.WORDPRESS.COM/
JANUARY 2014

41. APPENDIX
THE SUPPLIED PERSONAS

42. COMPETITIVE ANALYSIS
E$)'0%,&#/$*"#$*'%$&,+D3+<$)'0%,+3#1$Q'&<,+3)R$'+$i''<.#$4'&$
#2%#)*#/$1#,&)"$*#&0156
WG! L)@1*'0$1)"''.$@+34'&01M6
6
6
6
6
XG! L-@=$1)"''.$@+34'&0M6
bG! L^,+/93)D$h3<"$1)"''.$@+34'&06
6

43. 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

44. PR2 “CUSTOM SCHOOL UNIFORMS”
"! 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

45. PR3 “CUSTOM SCHOOL UNIFORMS”
"! &,+/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

46. PR4 “CUSTOM SCHOOL UNIFORMS”
"! 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

47. 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: