View
278
Download
5
Category
Preview:
DESCRIPTION
Citation preview
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#+*$@+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$/$)'/#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)
)
THE BRIEF
40"/4#$'"./*-5&"%3")
I#$9#&#$1@%%.3#/$93*"$*"&##$/31*3+)*$J#&1'+,1G6
6
6-(&%"((/7,#8()
•! J#+*$@+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$/$)'/#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*'$,*$,..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.
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
USER FLOWS
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
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
PR3 “CUSTOM SCHOOL UNIFORMS”
"! \&,+/3+<$/31*3+)*3H#$,+/$4&3#+/.=6
"! 7%$4&'+*$%&3)3+<$6
"! Z3&#)*$%'+1#$)'%=6
"! ^#%#,*#/$),..1$*'$,)*3'+6
#! Lh'0#A0,/#M$/#13<+6
#! h#,/.#11$)"3./&#+$:$'*"#&$031.#,/3+<$
3..@1*&,*3'+16
CustomUniformCo.com.au
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
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:
Recommended