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

on

  • 216 views

 

Statistics

Views

Total Views
216
Views on SlideShare
210
Embed Views
6

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 6

http://wiseamanda.wordpress.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 *+,-./.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&#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) )
  • 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.
  • 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 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
  • 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#,&)"$*#&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
  • 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%'+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: