E-Commerce UX design concept case study

  • 640 views
Uploaded on

E-Commerce UX design concept case study for General Assembly UXDI.

E-Commerce UX design concept case study for General Assembly UXDI.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
640
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MOBILE WEB E-COMMERCE CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE STUDENT PROJECT CASE STUDY GENERAL ASSEMBLY UXDI SYDNEY 2014 AMANDA WISE, UX DESIGN
  • 2. OVERVIEW About  the  Project Learnings 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.   The  project  enabled  me  to   research  and  explore  best   practice  for: •  User  Flows  &  Experience   mapping •  Usability  for  Mobile  web/touch-­‐‑ friendly  interfaces I  worked  as  part  of  a  student   team  but  the  design  deliverables   •  Form  design presented  are  my  own. •  Lean  Checkout  process  design •  Team  workshop  management
  • 3. THE BRIEF About  the  Product The  Target  Audience TrueSpirit  is  a  (fictional)  new   internet  retailer  for  Australian   schools  and  parents  who  want   quality,  well-­‐‑priced  school   uniform  items  for  K-­‐‑12  children. We  were  supplied  with  three   distinct  Personas. Business  Goals •  Present  uniforms  as  fashion TrueSpirit’s  vision  is  to  enable   customers  and  their  kids  to   •  Enable  schools  to  offer  “must-­‐‑ choose  the  items  they  want  from   have”  uniform  checklists  for   a  selection  of  school   parents recommended  uniforms. •  Offer  accessories  allowed  by   the  school’s  dress  code
  • 4. COMPETITIVE ANALYSIS (SEE APPENDIX) •  Most  retailers  in  the  space  have  poorly  designed  websites  and   many  have  no  online  stores  at  all. •  No  local  retailer  offer  easy  mobile  device  browsing  or   purchase. •  The  only  potential  challenger  (ClothingDirect.com.au)  is  not  a   direct  competitor  as  it  offers  business  as  well  as  school   uniforms  and  so  is  not  focused  solely  on  parents’  needs.
  • 5. 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.
  • 6. USER FLOWS & SCENARIOS
  • 7. 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
  • 8. USER FLOWS
  • 9. USER FLOWS
  • 10. USER FLOWS
  • 11. PERSONAS ANALYSIS John Returning Customer, Pragmatic Purchaser Sarah Jess First time School Administrator Customer, Savvy Spender Needs •  Value •  Easy returns •  Credibility/Trust •  Checklist of all required uniform items Functionality •  Comparison pricing •  Essential uniform •  Add/Edit school info •  Discounts bundle for a school and uniform •  Other parents advice/ requirements testimonials Features •  Member’s Account •  Express check-out •  Email autoresponder offers •  •  •  •  1-click bundle buy iPad optimised Save to Wishlist Email reminders •  B2B service •  Quality •  Range •  Product bundle order form •  School collateral upload •  Catalogue download
  • 12. HOME CHECKOUT PROCESS BUSINESS CUSTOMER ACCOUNT PROCESS SKETCHES
  • 13. PRODUCT PAGE ITERATIONS
  • 14. PRODUCT PAGE WIREFRAME Notes 1.  Prominent  Shopping  Cart  tab  opens   slider  showing  all  items  in  the  Cart   without  navigating  away  from   1 product  page 2.  3 Comparison  pricing  with  retail 3.  2 Quantity  discounts  for  essential  items 4.  School  logo,  name  and  note  on  the   item.  Info  links  to  School’s  complete   4 product  listing  and  information  for   5 parents. 5.  Conversion  optimisation  elements
  • 15. THE SOLUTION Design  a  household  calendar  app  that  enables   Deepa  and  Sam  to  co-­‐‑ordinate  tasks  easily. QUICK CLICKABLE PROTOTYPE
  • 16. 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
  • 17. DESIGN PROTOTYPE
  • 18. 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: Views Signs up for newsletter Browse Home screen Selects Product listing Product page Adds to cart Proceeds to checkout Signs In Express checkout Order confirmat ion Gives True Spirit a great review Shipping and returns policy
  • 19. USABILITY TESTING
  • 20. 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
  • 21. 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
  • 22. THANKS AMANDA WISE, UX STRATEGY & DESIGN WISEAMANDA.WORDPRESS.COM/ JANUARY 2014
  • 23. APPENDIX THE SUPPLIED PERSONAS
  • 24. COMPETITIVE ANALYSIS I  compared  the  top  ranking  companies  (organic)  on  Google  for   expected  search  terms: 1.  “custom  school  uniforms” 2.  “buy  school  uniform” 3.  “Randwick  High  school  uniform
  • 25. PR1 “CUSTOM SCHOOL UNIFORMS” Silverfleece.com.au "  Search  goes  to  landing  page  for   school  uniforms #  No  link  to  unform  section  in  online   store!! #  Hard  to  read
  • 26. PR2 “CUSTOM SCHOOL UNIFORMS” GetSmartSchoolwear.com.au "  Search  optimised "  Phone  number  prominent "  Friendly,  distinctive  brand #  No  search #  PDF  Flipbook  catalogue
  • 27. PR3 “CUSTOM SCHOOL UNIFORMS” CustomUniformCo.com.au "  Branding  distinctive  and  friendly "  Up  front  pricing   "  Direct  response  copy "  Repeated  calls  to  action #  “Home-­‐‑made”  design #  Headless  children  &  other  misleading   illustrations
  • 28. PR4 “CUSTOM SCHOOL UNIFORMS” ClothingDirect.com.au "  Clear,  benefit-­‐‑focused  nav "  Why  shop  with  us  promo "  Delivery/service  up  front "  Live  chat "  Testimonials "  Good  photography "  Easy  to  use  sizing/ordering  chart
  • 29. REFERENCES :MOBILE WEB E-COMMERCE Reference sites include: •  hjp://built.bymoby.com/ mobile_checkout/ •  hjp://mobile.fandango.com/movies? &from=home&aid=EMBEDDEDPAGE 0&ITEM_KEY_ID= •  hjp://m.dillards.com/search •  hjp://m.crateandbarrel.com/ •  Asos •  Net  a  Porter •  hjp://vsco.co/