User Experience Design -  TrueSpirit e-commerce
Upcoming SlideShare
Loading in...5
×
 

User Experience Design - TrueSpirit e-commerce

on

  • 676 views

General Assembly UXDi Summer 2014 Sydney ...

General Assembly UXDi Summer 2014 Sydney
Student Project n.2 - ecommerce
TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children.

Statistics

Views

Total Views
676
Views on SlideShare
489
Embed Views
187

Actions

Likes
1
Downloads
11
Comments
0

2 Embeds 187

http://saramichelazzo.wordpress.com 184
https://twitter.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

User Experience Design -  TrueSpirit e-commerce User Experience Design - TrueSpirit e-commerce Presentation Transcript

  • E-commerce for UXDi:  Student  Project   Team:  Deepa  Dhupelia,  James  Feng,  Sara  Michelazzo   SARA MICHELAZZ0
  • As part of the team who did this project what I have done is: -  Realize sketches -  Realize wireframes in Omnigraffle for John and Sara’s flows -  Realize a prototype for John’s flow in Invision -  Realize the mockup for the home page -  Designing Scenarios for all the 3 personas -  Improving and updating user flows and site maps -  Being an active part of the team during design iteration -  Providing innovative ways to communicate our design
  • About the project TrueSpirit  is  a  new  internet  retailer  for   schools  and  parents  who  want  a  modern   school  uniform  for  K-­‐12  children.  It  offers   updated  uniform  fashion  including  pants  for   girls  and  zip-­‐up  hoodies,  provides  a  “must-­‐ haves”  checklist  from  the  school’s   administrator  for  each  school  year,  and   recommends  accessories  allowed  by  the   school’s  dress  code.  Unlike  tradiLonal   suppliers,  True  Spirit  encourages  visitors  to   express  their  tastes—with  some  limits. *required  from  the  project  
  • About the product TrueSpirit  is  a  new  internet  retailer.  The   TrueSprit  team  was  looking  to  create   an  appropriate  experience  for  their  target   customer  that  could  be  delivered  via  web   and  mobile  channels.     The  team  was  given  the  constraint  of   targeLng  ipad    as  primary  delivery   channels. *required  from  the  project  
  • Brainstorming Brainstorming  helps  to  clean   my  brain  from  all  ideas  I  have   about  the  design.  I  leave  them   there  so  I  can  forget  about   them  while  analyzing   persona’s  needs  and  take   them  out  later  in  the  process   where  they  are  not  anymore  a   threat  but  a  resource.   Best  idea:  providing  a  lable  where  you   can  write  your  kid’s  name  so  she/he   wan’t  swap  it  by  mistake  
  • Competitor analysis What  are  they  not   doing?     What  are  they  doing   that  you  can  do  beTer?     What  do  your  website   need  to  do…  go  back  to   personas!  
  • Concept Model *required  from  the  project  
  • Card Sorting Defining  categories  for  TrueSpirit  site  navigaLon  
  • Rough Sketches SeXng  out  ideas  on  paper,  keeping  the  funnel  wide  
  • Scenarios Scenarios  help  to  understand  beTer  user  flows  
  • Site Maps We  have  considered  all  of  the  user  flows  to  have  a  well  structured  site  map  
  • Site Maps Site  Maps  realized  in    Omnigraffles  are  easier  to  keep  up  to  date!  
  • Meet the business needs & style
  • About the brand Fresh,  modern,  lighthearted,  open,   appealing,    friendly,  curated,  there  when   you  need  us  but  not  in  your  way   we  believe  in  service   easy  returns!     we  only  sell  quality  products   our  sizes  are  true  to  size     we  foster  community   support  educaLon  through  our  scholarship   program   *required  from  the  project  
  • Get to know Persona Personas  were  given  as  part  of  the  assignment.     Our  role  was  to  keep  them  in  mind,  understand  what  they  need.   Building  out  personas  as  much  as  possible  
  • Personas: Sarah *required  from  the  project  
  • User Flow Goals & Features specific  URL  and  login  required  to  purchase   specific  secLon  required  clothes     school  buTon  on  the  home  page  in  case  she   doesn’t  have  the  URL     materials  and  importaLon   add  to  favorites  “She  likes  to  save  items   while  browsing  and  purchase  them  at  the   end  of  the  day”     care,  comfort  and  fit  in  the  descripLon   quality  page       *User  flow  realized  by  James  Feng  and  updated  by  me  
  • Wireframes School  Category  Page   School  Home  page   School  Shopping  List  
  • Personas: John *required  from  the  project  
  • User Flow Goals & Features quick  buy  mode  in  category  page     dropdown  menu  and  filter  (colors,  prices)       *User  flow  realized  by  James  Feng  and  updated  by  me  
  • Wireframes Category  view:  gallery   Category  view-­‐quick  buy   Product  Page  
  • John’s Scenario John’s  Scenario   helped  to  understand   beTer  his  needs  in   order  to  privide  an   effecLve  navigaLon   system.  
  • Navigation This  map  helps   to  understand   how  to  navigate   the  website  and   where  there  are   shortcuts  to   reach  one  or   more  pages.  
  • Global Navigation - Header GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER TOPS Girls > T-shitst and tops > polo shirt BOTTOMS ACCESSORIES Formal shirts Jackets Skirts Socks iPhone case T-shirts Hoodies Pants Headbands Plush toy Polo shirts Sweaters Shorts Gloves Tank top Logo Hoodies Gymshorts Belts Logo shirts Leggings SALES >
  • Global Navigation - Header GIRLS BOYS SHOP BY SCHOOL Girls > T-shitst and tops > polo shirt St. Luke’s GIRLS Girls > T-shitst and tops > polo shirt Search SIGN IN REGISTER ▼ BOYS SHOP BY SCHOOL GO SIGN IN REGISTER GO
  • Global Navigation - Header GIRLS BOYS SHOP BY SCHOOL Girls > T-shitst and tops > polo shirt St. Luke’s GIRLS Girls > T-shitst and tops > polo shirt Search SIGN IN REGISTER ▼ BOYS SHOP BY SCHOOL GO SIGN IN REGISTER GO
  • Global Navigation - Header GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER 2 ITEMS ADDED TO BAG Polo shirt $15 Pants $12 SUBTOTAL $37 GO TO BAG SAVED ITEMS
  • Navigation - Footer SERVICES ABOUT US FOR SCHOOLS GET HELP Shipping & tracking Company info Admin area Feeling stuck? Sizes & Conversions Our Quality Find your school +61 5647 474637 Easy returns Jobs How to wash Scholarships help@truespirit.com.au Contact us Term of use | Privacy and Cookies Copyright 2014 Navigation - Breadcrumb Home> Girls > Tops > Polo Shirt
  • Filter
  • How the group arrived at the final decision? 1)  A  funcLoning  team   -­‐  finding  strengths  and  weaknesses   -­‐  building  trust  with  our  users  and  stakeholders   2)  using  PERSONAS  and  Best  PracLce  UX   PRINCIPLES  to  take  our  decisions Find the other people strengths and use them!
  • Refining and decisions We  were  able  to  find  beTer   results  as  we  could  merge   many  ideas  into  one.     Then  drew  larger,  more   detailed  sketches  for   consideraLon       Considered  and  chose  those   that  best  fit  the  personas  
  • Wireframing Discussed  as  a  team     Created  first  versions  (low   fidelity)  individually  in   Omnigraffle     Reviewed  as  a  team   Finalised  as  a  team  in   Omnigraffle   More refining of wireframes and process = less time to prototype !
  • Examples of design iteration
  • Design iteration: Navigation Menu  on  the  leg  side   Menu  on  top   The navigation on top allows ro display more items and the relation with the contextual menu is easier to understand!
  • Design iteration: Product Page First  sketch   Second  iteraLon   Final  design   The button to swith view moved to the right (best practice iPad). The add to bag button become smaller.!
  • Design iteration: Home page Wireframe  A   Wireframe  B   What problem on the page is everything solving? Brand  look&feel     business  needs:  sales   show  prices  and   comparison  with  sale     quality  and  care     easy  returns   Wireframe B solves more problems
  • Pushing the home page to the next level Imagine the website
  • Home page Mockup Imagine the website
  • User testing We  expect  picture  to  zoom..  but   user  expected  to  go  to  details  page       One  user  would  have  saved  his   profile  if  it  didn’t  include  credit  card     User  went  to  sales  buTon  to  find   polo  shirt  rather  than  top  navigaLon   bar.  (we  could  perhaps  re-­‐do  these   links  to  boys  and  girls).     One  user  said  he’d  prefer  just  to  use   images  rather  than  navigaLon   menus     2/3  users  could  not  find  the   alternaLve  views  (eg  gallery  vs  list).      Check  out  works  well!   The  person  I  have  tested  asked  not  to  be  photographed  
  • Storytelling In  order  to  communicate   our  design  effecCvely  we   have  played  a  role  game.     Where  one  us  was  playing   the  role  of  one  of  our   persona  using  a  prototype.   Wealso  had  an  external   narrator  to  explain  our   design  choices  based  on   the  acLon  of  our  persona.  
  • Do you want to see more about this project?
  • Prototype WATCH  IT  LIVE   hTp://invis.io/NVMSPEXU  
  • Prototype in Omnigraffle Design Spec WATCH  IT  LIVE   READ  DESIGN  SPEC  
  • Thank you Special  thanks  to  Deepa  Dhupalia   and  James  Feng.     Working  with  you  was  a  pleasure.   SARA MICHELAZZ0