2. 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  ďŹctional  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.
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.
7. 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.
9. 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  ďŹow  and  must-Âââhave  content  for  each  of  the  three Â
Personas
Opportunities  identiďŹed
â˘âŻ 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,  eďŹcient  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
13. 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
19. THE SOLUTION
Design  a  household  calendar  app  that  enables Â
Deepa  and  Sam  to  co-Âââordinate  tasks  easily.
QUICK CLICKABLE PROTOTYPE
20. PROTOTYPE V.1
Method
â˘âŻ I  created  a  quick  clickable  prototype  using  OmnigraďŹe
User  Journey  1
John,  as  a  returning  customer,  can  ďŹnd  a  single  item  and  check-Âââout  quickly.
Scenarios
â˘âŻ Finding  an  individual  item
â˘âŻ Express  Checkout
User  Journey  2
Sarah,  as  a  ďŹrst-Âââtime  customer,  can  ďŹnd  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
34. 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
conďŹrmat
ionProceeds to
checkout
38. 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
39. 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  ďŹeld.
â˘âŻ 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-ÂââďŹlled)  !  Review  Order
Or
â˘âŻ Sign-ÂââIn  !  Review  Order  (with  Shipping/billing  auto-ÂââďŹlled)
Then  oďŹer
â˘âŻ option  to  Save  Details  and  join  as  a  Member