0
E-commerce for

UXDi:	
  Student	
  Project	
  
Team:	
  Deepa	
  Dhupelia,	
  James	
  Feng,	
  Sara	
  Michelazzo	
  

S...
As part of the team who did this
project what I have done is:
-  Realize sketches
-  Realize wireframes in Omnigraffle for J...
About the project
TrueSpirit	
  is	
  a	
  new	
  internet	
  retailer	
  for	
  
schools	
  and	
  parents	
  who	
  want...
About the product
TrueSpirit	
  is	
  a	
  new	
  internet	
  retailer.	
  The	
  
TrueSprit	
  team	
  was	
  looking	
  ...
Brainstorming

Brainstorming	
  helps	
  to	
  clean	
  
my	
  brain	
  from	
  all	
  ideas	
  I	
  have	
  
about	
  the...
Competitor
analysis

What	
  are	
  they	
  not	
  
doing?	
  
	
  
What	
  are	
  they	
  doing	
  
that	
  you	
  can	
 ...
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	
...
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	
...
Get to know Persona
Personas	
  were	
  given	
  as	
  part	
  of	
  the	
  assignment.	
  	
  
Our	
  role	
  was	
  to	
...
Personas: Sarah

*required	
  from	
  the	
  project	
  
User Flow
Goals & Features
specific	
  URL	
  and	
  login	
  required	
  to	
  purchase	
  
specific	
  secLon	
  required	...
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	
  (c...
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	
  priv...
Navigation
This	
  map	
  helps	
  
to	
  understand	
  
how	
  to	
  navigate	
  
the	
  website	
  and	
  
where	
  ther...
Global Navigation - Header

GIRLS

BOYS

SHOP BY
SCHOOL

SIGN IN
REGISTER

GIRLS

BOYS

SHOP BY
SCHOOL

SIGN IN
REGISTER

...
Global Navigation - Header
GIRLS

BOYS

SHOP BY
SCHOOL

Girls > T-shitst and tops > polo shirt

St. Luke’s

GIRLS

Girls >...
Global Navigation - Header
GIRLS

BOYS

SHOP BY
SCHOOL

Girls > T-shitst and tops > polo shirt

St. Luke’s

GIRLS

Girls >...
Global Navigation - Header

GIRLS

BOYS

SHOP BY
SCHOOL

SIGN IN
REGISTER

2

ITEMS ADDED TO BAG
Polo shirt

$15

Pants

$...
Navigation - Footer
SERVICES

ABOUT US

FOR SCHOOLS

GET HELP

Shipping & tracking

Company info

Admin area

Feeling stuc...
Filter
How the group arrived
at the final decision?
1)	
  A	
  funcLoning	
  team	
  
-­‐	
  finding	
  strengths	
  and	
  weakne...
Refining and
decisions
We	
  were	
  able	
  to	
  find	
  beTer	
  
results	
  as	
  we	
  could	
  merge	
  
many	
  idea...
Wireframing
Discussed	
  as	
  a	
  team	
  
	
  
Created	
  first	
  versions	
  (low	
  
fidelity)	
  individually	
  in	
...
Examples of
design iteration
Design iteration:

Navigation
Menu	
  on	
  the	
  leg	
  side	
  

Menu	
  on	
  top	
  

The navigation on
top allows ro...
Design iteration:

Product Page
First	
  sketch	
  

Second	
  iteraLon	
  

Final	
  design	
  

The button to
swith view...
Design iteration:

Home page
Wireframe	
  A	
  

Wireframe	
  B	
  

What problem on the
page is everything
solving?
Brand...
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	
  	...
Storytelling

In	
  order	
  to	
  communicate	
  
our	
  design	
  effecCvely	
  we	
  
have	
  played	
  a	
  role	
  gam...
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	
  ...
Upcoming SlideShare
Loading in...5
×

User Experience Design - TrueSpirit e-commerce

901

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
901
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "User Experience Design - TrueSpirit e-commerce"

  1. 1. E-commerce for UXDi:  Student  Project   Team:  Deepa  Dhupelia,  James  Feng,  Sara  Michelazzo   SARA MICHELAZZ0
  2. 2. 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
  3. 3. 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  
  4. 4. 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  
  5. 5. 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  
  6. 6. 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!  
  7. 7. Concept Model *required  from  the  project  
  8. 8. Card Sorting Defining  categories  for  TrueSpirit  site  navigaLon  
  9. 9. Rough Sketches SeXng  out  ideas  on  paper,  keeping  the  funnel  wide  
  10. 10. Scenarios Scenarios  help  to  understand  beTer  user  flows  
  11. 11. Site Maps We  have  considered  all  of  the  user  flows  to  have  a  well  structured  site  map  
  12. 12. Site Maps Site  Maps  realized  in    Omnigraffles  are  easier  to  keep  up  to  date!  
  13. 13. Meet the business needs & style
  14. 14. 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  
  15. 15. 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  
  16. 16. Personas: Sarah *required  from  the  project  
  17. 17. 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  
  18. 18. Wireframes School  Category  Page   School  Home  page   School  Shopping  List  
  19. 19. Personas: John *required  from  the  project  
  20. 20. 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  
  21. 21. Wireframes Category  view:  gallery   Category  view-­‐quick  buy   Product  Page  
  22. 22. John’s Scenario John’s  Scenario   helped  to  understand   beTer  his  needs  in   order  to  privide  an   effecLve  navigaLon   system.  
  23. 23. Navigation This  map  helps   to  understand   how  to  navigate   the  website  and   where  there  are   shortcuts  to   reach  one  or   more  pages.  
  24. 24. 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 >
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Filter
  30. 30. 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!
  31. 31. 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  
  32. 32. 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 !
  33. 33. Examples of design iteration
  34. 34. 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!
  35. 35. 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.!
  36. 36. 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
  37. 37. Pushing the home page to the next level Imagine the website
  38. 38. Home page Mockup Imagine the website
  39. 39. 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  
  40. 40. 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.  
  41. 41. Do you want to see more about this project?
  42. 42. Prototype WATCH  IT  LIVE   hTp://invis.io/NVMSPEXU  
  43. 43. Prototype in Omnigraffle Design Spec WATCH  IT  LIVE   READ  DESIGN  SPEC  
  44. 44. Thank you Special  thanks  to  Deepa  Dhupalia   and  James  Feng.     Working  with  you  was  a  pleasure.   SARA MICHELAZZ0
  1. A particular slide catching your eye?

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

×