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  &  Expe...
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...
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...
COMPETITIVE ANALYSIS (SEE APPENDIX)
•! >'1*$&#*,3.#&1$3+$*"#$1%,)#$",H#$%''&.=$/#13<+#/$9#-13*#1$,+/$
0,+=$",H#$+'$'+.3+#$...
GOALS OF THE DESIGN
To  present  a  fresh,  modern,  mobile-­‐‑
optimised  user  experience  that  sets  
TrueSpirit  apar...
GOALS OF THE DESIGN
To  present  a  fresh,  modern,  mobile-­‐‑
optimised  user  experience  that  sets  
TrueSpirit  apar...
USER FLOWS & SCENARIOS
SCENARIOS
Method	
•  Brainstorming  goals  and  pain  points  for  each  Persona	
•  John  -­‐‑  Returning  customer	
•  S...
USER FLOWS
USER FLOWS
USER FLOWS
PERSONAS
ANALYSIS
John
Returning
Customer, Pragmatic
Purchaser
Sarah
First time
Customer, Savvy Spender
Jess
School Admini...
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*"'@*$...
THE SOLUTION
Design  a  household  calendar  app  that  enables  
Deepa  and  Sam  to  co-­‐‑ordinate  tasks  easily.	
	
	...
PROTOTYPE V.1
Method	
•  I  created  a  quick  clickable  prototype  using  Omnigraffle	
	
User  Journey  1	
John,  as  a  r...
DESIGN PROTOTYPE
PROTOTYPE V2
The  second  iteration  of  the  product  focused  on  interaction  design  
optimised  for  mobile  web  thr...
USABILITY TESTING
USABILITY TESTING
Test  process	
We  found  5  participants  willing  to  test  our  
prototype.  We  gave  them  all  thr...
FINDINGS
•  4  out  of  5  participants  used  the  main  menu  on  the  Home  page  to  
go  to  the  Product  page,  rat...
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#,&)"$*#&0156
WG! L)@1*'0$1)"...
PR1 “CUSTOM SCHOOL UNIFORMS”
"! P#,&)"$<'#1$*'$.,+/3+<$%,<#$4'&$
1)"''.$@+34'&016
#! Y'$.3+D$*'$@+4'&0$1#)*3'+$3+$'+.3+#$
...
PR2 “CUSTOM SCHOOL UNIFORMS”
"! P#,&)"$'%*3031#/6
"! J"'+#$+@0-#&$%&'03+#+*6
"! 8&3#+/.=U$/31*3+)*3H#$-&,+/6
#! Y'$1#,&)"6...
PR3 “CUSTOM SCHOOL UNIFORMS”
"! &,+/3+<$/31*3+)*3H#$,+/$4&3#+/.=6
"! 7%$4&'+*$%&3)3+<$6
"! Z3&#)*$&#1%'+1#$)'%=6
"! ^#%#,*...
PR4 “CUSTOM SCHOOL UNIFORMS”
"! C.#,&U$-#+#F*A4')@1#/$+,H6
"! I"=$1"'%$93*"$@1$%&'0'6
"! Z#.3H#&=?1#&H3)#$@%$4&'+*6
"! B3H...
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...
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Upcoming SlideShare
Loading in...5
×

Case study: Mobile optimised e-commerce checkout by Amanda Wise

327

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
327
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Case study: Mobile optimised e-commerce checkout by Amanda Wise

  1. 1. MOBILE WEB E-COMMERCE CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE AMANDA WISE, UX DESIGN
  2. 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. 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. 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. 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. 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. 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. 8. USER FLOWS & SCENARIOS
  9. 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. 10. USER FLOWS
  11. 11. USER FLOWS
  12. 12. USER FLOWS
  13. 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
  14. 14. HOME SKETCHES CHECKOUT PROCESS BUSINESS CUSTOMER ACCOUNT PROCESS
  15. 15. PRODUCT PAGE ITERATIONS
  16. 16. 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
  17. 17. THE SOLUTION Design  a  household  calendar  app  that  enables   Deepa  and  Sam  to  co-­‐‑ordinate  tasks  easily. QUICK CLICKABLE PROTOTYPE
  18. 18. 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
  19. 19. DESIGN PROTOTYPE
  20. 20. 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
  21. 21. USABILITY TESTING
  22. 22. 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
  23. 23. 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
  24. 24. THANKS AMANDA WISE, UX STRATEGY & DESIGN WISEAMANDA.WORDPRESS.COM/ JANUARY 2014
  25. 25. APPENDIX THE SUPPLIED PERSONAS
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×