e-commerce ux design concept case study

MOBILE WEB E-COMMERCE CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE

STUDENT PROJECT CASE STUDY

GENERAL ASSEMBLY UXDI SYDNEY 2014

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

The  Target  Audience

We  were  supplied  with  three  distinct  Personas.

Business  Goals

•  Present  uniforms  as  fashion

•  Enable  schools  to  offer  “must-­‐‑have”  uniform  checklists  for  parents

•  Offer  accessories  allowed  by  the  school’s  dress  code

About  the  Product

TrueSpirit  is  a  (fictional)  new  internet  retailer  for  Australian  schools  and  parents  who  want  quality,  well-­‐‑priced  school  uniform  items  for  K-­‐‑12  children.

TrueSpirit’s  vision  is  to  enable  customers  and  their  kids  to  choose  the  items  they  want  from  a  selection  of  school  recommended  uniforms.

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.

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

HOME

SKETCHES

CHECKOUT PROCESS

BUSINESS CUSTOMER ACCOUNT PROCESS

PRODUCT PAGE ITERATIONS

PRODUCT PAGE WIREFRAME

Notes

4

1

2

3

1.  Prominent  Shopping  Cart  tab  opens  

slider  showing  all  items  in  the  Cart  

without  navigating  away  from  

product  page

2.  Comparison  pricing  with  retail

3.  Quantity  discounts  for  essential  items

4.  School  logo,  name  and  note  on  the  

item.  Info  links  to  School’s  complete  

product  listing  and  information  for  

parents.

5.  Conversion  optimisation  elements

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 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

PR1 “CUSTOM SCHOOL UNIFORMS”

"  Search  goes  to  landing  page  for  

school  uniforms

#  No  link  to  unform  section  in  online  

store!!

#  Hard  to  read

Silverfleece.com.au

PR2 “CUSTOM SCHOOL UNIFORMS”

"  Search  optimised

"  Phone  number  prominent

"  Friendly,  distinctive  brand

#  No  search

#  PDF  Flipbook  catalogue

GetSmartSchoolwear.com.au

PR3 “CUSTOM SCHOOL UNIFORMS”

"  Branding  distinctive  and  friendly

"  Up  front  pricing  

"  Direct  response  copy

"  Repeated  calls  to  action

#  “Home-­‐‑made”  design

#  Headless  children  &  other  misleading  

illustrations

CustomUniformCo.com.au

PR4 “CUSTOM SCHOOL UNIFORMS”

"  Clear,  benefit-­‐‑focused  nav

"  Why  shop  with  us  promo

"  Delivery/service  up  front

"  Live  chat

"  Testimonials

"  Good  photography

"  Easy  to  use  sizing/ordering  chart

ClothingDirect.com.au

REFERENCES :MOBILE WEB E-COMMERCE

•  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/

Reference sites include: