E-Commerce UX design concept case study
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

E-Commerce UX design concept case study

  • 752 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
752
On Slideshare
694
From Embeds
58
Number of Embeds
1

Actions

Shares
Downloads
32
Comments
0
Likes
1

Embeds 58

http://wiseamanda.wordpress.com 58

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/