Design Process Experience Sharing

1,166 views

Published on

In the lab meeting of Intelligent Agents Laboratory on 05/13/2011 at the National Taiwan University, I used this slides to share the experience of going through the contextual design process of the project Aoide, where my teammates and I designed a virtual browsing interface for University of Michigan Library's music collection. I described and explained the steps we took, including interview, persona, scenario, lo-fi prototype, mid-fi prototype, hi-fi prototype, and usability testing.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,166
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design Process Experience Sharing

  1. 1. Design ProcessExperience SharingPei-Yao (Perry) Hung ( ) peiyaoh@umich.edu http://perryhung.com
  2. 2. About Pei-Yao• Interested in interface and interaction design• Study Human-Computer Interaction (HCI) in School of Information at the University of Michigan (UM, UofM, UMich, ...)• Got B.S. and M.S. in CSIE at the NTU• Experience in Agent and Ubicomp lab
  3. 3. Q?
  4. 4. AoideA music browsing interface for MLibrary music collection
  5. 5. Outline• Problem• Approach to the solution: the process• Result: Competition• Reflection
  6. 6. MLibrary?
  7. 7. Problem?
  8. 8. People don’t go to the library!
  9. 9. Solutions?
  10. 10. Approach to reach solution...• Interview• Persona & Scenarios• Lo fidelity prototype• Mid fidelity prototype• Hi fidelity prototype• Usability Testing
  11. 11. Aoide Design Process Video
  12. 12. Q?
  13. 13. Contextual Design Human-Center Design
  14. 14. Context?Contextual Design
  15. 15. DataContextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
  16. 16. Interview
  17. 17. Ambush people!!! How?
  18. 18. Behavior & Need Interview’s Goal
  19. 19. Interviewees• 6 students: music , business, library science, and art and design• 1 technical librarian• 1 music librarian
  20. 20. Student Interview• How they get new music?• What affects their choice of music? Why?• Perform a simple task using library’s existing interface and gain feedback
  21. 21. FreeFinding from student
  22. 22. Key word search as the start Finding from student
  23. 23. No Exploration Finding from student
  24. 24. ArtistFinding from student
  25. 25. GenreFinding from student
  26. 26. FriendsFinding from student
  27. 27. ClassmatesFinding from music student
  28. 28. AnonymousFinding from technical librarian
  29. 29. HistoryFinding from music student & librarian
  30. 30. Composer-Performer-album Finding from music librarian & music student
  31. 31. Q?
  32. 32. DataContextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
  33. 33. Persona & Scenarios
  34. 34. “The User” What is “Persona”?
  35. 35. Fake it! How?
  36. 36. User without our design Persona
  37. 37. User with our design Scenario
  38. 38. Who we design for Persona with scenario
  39. 39. Focus & Agreement Persona & Scenario’s Goal
  40. 40. Persona & Scenario• 3 Personas with scenarios• Bio + Goal + Challenge• Slogan
  41. 41. Q?
  42. 42. DataContextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
  43. 43. Informative spacethat encourages Exploring Our Goal
  44. 44. Prototyping• Lo fidelity prototype• Hi fidelity prototype• Usability Testing
  45. 45. Rough Idea Lo Fi Prototype
  46. 46. Sketch it! (Paper) How
  47. 47. Communicate ideas in the team Paper Prototype’s Goal
  48. 48. Prototyping• Lo fidelity prototype• Hi fidelity prototype• Usability Testing
  49. 49. Look real & Interactive Hi Fidelity Prototype
  50. 50. ExperienceHi Fidelity Prototype’s Goal
  51. 51. Hi-Fidelity Prototype• HTML + CSS + JavaScript• Flash/Flex• Adobe Fireworks• Axure• ...
  52. 52. Q?
  53. 53. Prototyping• Lo fidelity prototype• Hi fidelity prototype• Usability Testing
  54. 54. Testing the prototype Usability Testing
  55. 55. Let users interact with the prototype How?
  56. 56. Experience & Learn Usability Testing’s Goal
  57. 57. Usability Testing• 10 students• Assign them tasks to do• Ask them to “think out loud”• Observe and ask follow up question
  58. 58. What do you think?
  59. 59. What’s wrong?
  60. 60. Prototyping• Lo fidelity prototype• (Mid fidelity prototype)• Hi fidelity prototype• Usability Testing
  61. 61. Mid Fidelity Prototype
  62. 62. Look real,Not Interactive Mid Fidelity Prototype
  63. 63. Set Standard of layout, Look and Feel Mid Fidelity Prototype’s Goal
  64. 64. Gap betweenimagination & realization (or you & team)
  65. 65. Aoide A-oi-de [ey-oi-dee] noun A virtual browsing system for MLibrary music collection Home MLibrary Help Ask a librarian Log In Explore Music in a Compelling Way Explore Album Artist Song Music We RecommendNirvana U2 Radiohead Lady Gaga Ricardo Arjona
  66. 66. Home          MLibrary          Help          Ask  a  librarian           My  Account   Log  Out Aoide A-­oi-­de  [ey-­oi-­dee]  noun Explore A  Virtual  Browsing  Exploration  of  the  MLibrary  Music  Collection Album Artist Song Browsing  History: 1992 1994 1996 1998 2000 2002ns Mariah  Carey Music  Box Merry  Christmas Day  Dream Butterfly #1’s Rainbow Glitter Chambracelet 1993 1994 1995 1997 1998 1999 2001 2002ous Michael  Jackson History,  Present   Invincible   and  Past,  Book  1 2001 1995 Janet  Jackson Janet The  Velvet  Rope All  for  You 1993 1997 2001 Toni  Braxton Toni  Braxton Secrets The  Heat Snowflakes More  Than  a   1993 1997 2000 2001 Woman              2002 Whitney  Houston The  Preacher’s   Waiting  to  Exhale             My  Love  is  Your   Whitney:  The   Love,  Whitney Just  Whitney 1995 Wife                    1996 Love                    1998 Greatest  Hits  2000 2001 2002
  67. 67. @"A%;<#=,/,)@%08!3B/0#=,/,#/4 ;)!>>".4- <"5C.-!"#$%!&"#&$%(%)&"#&$%%*!"#! 6780",%!+#,-./01,"23#456780",/-#"4"9-:%;<#=,/,);.3#>?"00%>-#"4 D/EF< D%&) G$1H G./#&",N"& !"#$%&()!"#$%&()O.,!"#$%&(),N&) I?(23,JF,K(< ;":&$?(": T?$<,U$%3( O&2?"(/,*FE/( ,K1H%&:,O&2?"(/)$1 K1,;"&1E$+) T?(,V%")(% KW),T&<( X&%/),Y,*$.) I?(23,$FL,458M58966P($Q/(,&1,.$F%,:(Q"%<(1R,?(.,"/)$,/&3(SSS ;(F%1L,454658966 D/&2(,;&Q/(.R,"/S NF:+&H,#"1,*((?$#(1 0")$1,O"%" ,]$$:.,G?"+ Z([,$,Z$%<"/ *((?$#(1L,G.<Q?$1&(),A,Y,C KW<,U$F%) */"23)$1(,N(H"2. I?(23,$FL,458M58966 ;(F%1L,454658966*%$+)(,-&)$%.,!&/( 0"1(,0"23)$1, *":,;$<"12(, ;$23>;":&$?(":@ *$:,B./"1
  68. 68. Q?
  69. 69. DataContextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
  70. 70. Product• iDesign Competition (MLibrary + School of Information)• 5 of 7 teams submit their final design• 2 of 5 teams enter final• 1 people choice award
  71. 71. Video
  72. 72. Second Place Result
  73. 73. Reflection• Hi-fidelity prototype is important• It is the process that matter, not the result• The “real” process
  74. 74. The real experience Hi-fidelity prototype is important (CS majors, your skills are valuable!)
  75. 75. Learning by Doing Process matters, not the result
  76. 76. Idea (solution), finding,refine, and then prototype The “real” process
  77. 77. Fun Time!
  78. 78. How many CDs I havechecked out since I was in UM last September?
  79. 79. Just a simple and small anecdote
  80. 80. A process to reachperfect (local maximum) Human Center Design (HCD)
  81. 81. Other HCD Techniques• Affinity Diagramming• Story Boarding• Work Flow Analysis and Modeling• Speed Dating, User Enactment• Heuristics Evaluation• Comparative Analysis
  82. 82. Go Blue! Q &A

×