0
MOBILE WEB E-COMMERCE
CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE
STUDENT PROJECT CASE STUDY
GENERAL ASSEMBLY UXDI SYDN...
OVERVIEW
About  the  Project	

Learnings	

This  case  study  documents  the  
process  I  took  to  research  and  
desig...
THE BRIEF
About  the  Product	

The  Target  Audience	

TrueSpirit  is  a  (fictional)  new  
internet  retailer  for  Aust...
COMPETITIVE ANALYSIS

(SEE APPENDIX)

•  Most  retailers  in  the  space  have  poorly  designed  websites  and  
many  ha...
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  custom...
USER FLOWS
USER FLOWS
USER FLOWS
PERSONAS
ANALYSIS

John
Returning
Customer, Pragmatic
Purchaser

Sarah
Jess
First time
School Administrator
Customer, Savv...
HOME

CHECKOUT
PROCESS
BUSINESS
CUSTOMER
ACCOUNT
PROCESS

SKETCHES
PRODUCT PAGE ITERATIONS
PRODUCT PAGE WIREFRAME
Notes
1. 

Prominent  Shopping  Cart  tab  opens  
slider  showing  all  items  in  the  Cart  
wit...
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 ...
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
I  compared  the  top  ranking  companies  (organic)  on  Google  for  
expected  search  terms:	
1. ...
PR1 “CUSTOM SCHOOL UNIFORMS”
Silverfleece.com.au
" 

Search  goes  to  landing  page  for  
school  uniforms	

#  No  link...
PR2 “CUSTOM SCHOOL UNIFORMS”
GetSmartSchoolwear.com.au
" 

Search  optimised	

" 

Phone  number  prominent	

" 

Friendly...
PR3 “CUSTOM SCHOOL UNIFORMS”
CustomUniformCo.com.au
" 

Branding  distinctive  and  friendly	

" 

Up  front  pricing  	

...
PR4 “CUSTOM SCHOOL UNIFORMS”
ClothingDirect.com.au
" 

Clear,  benefit-­‐‑focused  nav	

" 

Why  shop  with  us  promo	

"...
REFERENCES
:MOBILE WEB E-COMMERCE
Reference sites include:
• 

hjp://built.bymoby.com/
mobile_checkout/	

• 

hjp://mobile...
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
E-Commerce UX design concept case study
Upcoming SlideShare
Loading in...5
×

E-Commerce UX design concept case study

1,127

Published on

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

Published in: Design, Technology, Business

Transcript of "E-Commerce UX design concept case study"

  1. 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. 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. 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. 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. 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. 6. USER FLOWS & SCENARIOS
  7. 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. 8. USER FLOWS
  9. 9. USER FLOWS
  10. 10. USER FLOWS
  11. 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. 12. HOME CHECKOUT PROCESS BUSINESS CUSTOMER ACCOUNT PROCESS SKETCHES
  13. 13. PRODUCT PAGE ITERATIONS
  14. 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. 15. THE SOLUTION Design  a  household  calendar  app  that  enables   Deepa  and  Sam  to  co-­‐‑ordinate  tasks  easily. QUICK CLICKABLE PROTOTYPE
  16. 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. 17. DESIGN PROTOTYPE
  18. 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. 19. USABILITY TESTING
  20. 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. 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. 22. THANKS AMANDA WISE, UX STRATEGY & DESIGN WISEAMANDA.WORDPRESS.COM/ JANUARY 2014
  23. 23. APPENDIX THE SUPPLIED PERSONAS
  24. 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. 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. 26. PR2 “CUSTOM SCHOOL UNIFORMS” GetSmartSchoolwear.com.au "  Search  optimised "  Phone  number  prominent "  Friendly,  distinctive  brand #  No  search #  PDF  Flipbook  catalogue
  27. 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. 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. 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/
  1. A particular slide catching your eye?

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

×