Tutville Final Presentation

618 views
569 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
618
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutville Final Presentation

  1. 1. COURSE SI694, Winter 2010 SO’PHO’ TEAM Tutorials  in  Photoshop   Annie Fang, Adrienne Klum, Katie McCurdy, Eric Mrak
  2. 2. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Introduction Tūtville  is  an  extension  for  Adobe  Photoshop  CS5  that  helps  people  bookmark,     share  and  search  for  tutorials.  
  3. 3. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Motivation 9  User  interviews     •  Beginner,  intermediate,  advanced,  expert  Photoshop  users.   User  Interview  Findings   •  Novices  don’t  know  where  helpful  tutorials  can  be  found   •  People  oIen  don’t  know  what  they  need   •  Photoshop  users  have  a  hard  2me  finding  appropriate  or  credible  tutorials   •  People  have  trouble  re-­‐finding  informa2on  once  they  have  found  it.  
  4. 4. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Competitive Landscape •  Online  Tutorials   –  Hobbyists,  Photoshop  enthusiasts   –  Professional  sites   •  Bookmarking  tools     PHOTOSHOP  TUTORIALS   LYNDA.COM   SMASHING  MAGAZINE   NET  TUTS   DELICIOUS   ADOBE  
  5. 5. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Lo-Fi
  6. 6. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Wireframes
  7. 7. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Usability Testing Lo-­‐Fi     •  3  users,  paper  prototypes   Hi-­‐Fi     •  8  users,  func2oning  prototype    
  8. 8. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Key Features •  Search   •  Filtering   •  Ability  to  add/edit  tutorials   •  Select  as  a  favorite   •  Recommenda2ons   •  Commen2ng   •  Flagging   •  Create  an  account   •  Login/logout   •  User  profiles  
  9. 9. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Use Cases Searching  for  Tutorial   Adding  Tutorials   •  Launches  Photoshop  CS5   •  Searches  the  web  for  a   •  Wants  to  crop  an  image  but  does   Photoshop  tutorial  on  red  eye   not  know  what  tools  to  use   removal   •  Opens  the  Tūtville  extension   •  Finds  and  adds  the  tutorial  to   •  Searches  for  term  “Crop”   Tūtville  using  the  bookmarklet.   •  Finds  10  search  results   •  Opens  the  Tūtville  extension  in   •  Selects  the  most  popular  and   Photoshop  CS5     views  the  web  tutorial  in   •  Finds  newly  added  tutorial  under   Photoshop.   user  profile  marked  as  a  favorite  
  10. 10. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Architecture
  11. 11. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Implementation How  it  was  built   •  HTML  &  CSS   •  Javascript   •  PHP   •  MySQL   •  Photoshop  CS5   •  Configurator  2.0  
  12. 12. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Demo
  13. 13. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Recommender System •  First  iden2fies  other  users  that  have  favorited  the  same  tutorials  as  you   have,  like  Nancy.   •  Recommends  the  tutorials  that  Nancy  has  favorited,  that  you  have  not.   •  The  system  also  takes  into  account  how  similar  you  are  to  Nancy,  and   ranks  the  recommenda2ons  by  popularity.   Recommenda2ons   You   “Nancy”  
  14. 14. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Business & Sustainability Business  Model   •  Infomediary  model:  we  could  license  our  content  to  Adobe   •  Community  model:  Adobe  provides  So’Pho’  as  a  service   Sustainability     Current   •  Compelling  social  object:  Tutorials   •  Community  driven  –  user  generated  content,  updated  content   •  Useful  repository   •  Flagging  content   •  Pre-­‐populate  content   Future   •  Mo2vate  contribu2on   •  Use  analy2cs     •  Check  for  broken  links     •  Web-­‐based  site  to  work  in  tandem.  
  15. 15. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Future Work •  Conduct  user  tests  to  evaluate  the  design  and  UI  of  Tūtville  .   •  Resolve  issues  with  Flash  player  inside  Photoshop.   •  Make  use  of  contextual  menu  inside  Photoshop  panel  (move   “Recommenda2ons”  into  this  menu).   •  Create  companion  website  that  would  allow  people  to  access  their   bookmarked  tutorials  outside  of  Photoshop.   •  Implement  social  networking  tools  onto  companion  website.   •  Refine  account/  management  abili2es  of  tutorials  by  users  and   administrators.  
  16. 16. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Lessons Learned Benefits  of  user  tesBng     •  Icon  ambiguity   •  Lack  of  explana2on  on  the  bookmarklet   •  CS  versioning   ComplicaBons  involved  in  implementaBon     •  Constraints  of  hos2ng  environment   •  Gegng  func2onality  to  work  on  different  builds  of  CS5  &  Configurator.  
  17. 17. Tūtville Introduc2on    Design   Development   Demo   Wrap-­‐up   Thank you. Questions, Comments?

×