![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 Recommend
Nirvana U2 Radiohead Lady Gaga Ricardo Arjona](https://image.slidesharecdn.com/agenthcdsharingaoider-110519230414-phpapp01/85/Design-Process-Experience-Sharing-78-320.jpg)
![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 2002
ns Mariah Carey Music Box Merry Christmas Day Dream Butterfly #1’s Rainbow Glitter Chambracelet
1993 1994 1995 1997 1998 1999 2001 2002
ous 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](https://image.slidesharecdn.com/agenthcdsharingaoider-110519230414-phpapp01/85/Design-Process-Experience-Sharing-79-320.jpg)
![@"A%''''';<#=,/,)'''''@%08'''''!3B'/'0#=,/,#/4'''''
;)'!>>".4-' <"5'C.-
!"#$%
!&"#&$%'(%)&"#&$%%*'!"#!
6780",%
!'+#,-./0'1,"23#45'6780",/-#"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%")(% K'W),T&<( X&%/),Y,*$.)
I?(23,$F'L,458M58966
P($Q/(,&1,.$F%,:(Q"%'<(1'R,'?(.,"/)$,/&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,$F'L,458M58966
;('F%1L,454658966
*%$+)(,-&)'$%.,!&/(
0"1(',0"23)$1, *":,;$<"12(, ;$23>;":&$?(":@ *$:,B./"1](https://image.slidesharecdn.com/agenthcdsharingaoider-110519230414-phpapp01/85/Design-Process-Experience-Sharing-80-320.jpg)
Uploaded byPEI-YAO HUNG
Design Process Experience Sharing
The document outlines the design process for 'Aoide', a music browsing interface for the University of Michigan's library, shared by Pei-Yao Hung. It details the steps taken, including interviews, prototyping, and usability testing to address the problem of students not visiting the library, ultimately highlighting the importance of the design process over the results. The project culminated in a competition where the team secured a second-place finish and a people's choice award, showcasing the value of user-centered design techniques.
Design Process Experience Sharing
- 1. Design Process Experience Sharing Pei-Yao(Perry) Hung ( ) peiyaoh@umich.edu http://perryhung.com
- 2. About Pei-Yao • Interestedin 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.
- 4. Aoide A music browsinginterface for MLibrary music collection
- 5. Outline • Problem • Approachto the solution: the process • Result: Competition • Reflection
- 6.
- 8.
- 9. People don’t goto the library!
- 10.
- 11. Approach to reach solution... • Interview • Persona & Scenarios • Lo fidelity prototype • Mid fidelity prototype • Hi fidelity prototype • Usability Testing
- 12. Aoide Design Process Video
- 13.
- 14. Contextual Design Human-Center Design
- 15.
- 16. Data Contextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
- 17.
- 18. Ambush people!!! How?
- 19. Behavior & Need Interview’s Goal
- 20. Interviewees • 6 students:music , business, library science, and art and design • 1 technical librarian • 1 music librarian
- 21. Student Interview • Howthey get new music? • What affects their choice of music? Why? • Perform a simple task using library’s existing interface and gain feedback
- 22.
- 23. Key word search as the start Finding from student
- 24. No Exploration Finding from student
- 25.
- 26.
- 27.
- 28.
- 29. Anonymous Finding from technicallibrarian
- 30. History Finding from musicstudent & librarian
- 31. Composer-Performer-album Finding frommusic librarian & music student
- 32.
- 33. Data Contextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
- 34.
- 35. “The User” Whatis “Persona”?
- 36. Fake it! How?
- 37. User without ourdesign Persona
- 38. User with ourdesign Scenario
- 39. Who we designfor Persona with scenario
- 40. Focus & Agreement Persona & Scenario’s Goal
- 41. Persona & Scenario •3 Personas with scenarios • Bio + Goal + Challenge • Slogan
- 44.
- 45. Data Contextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
- 46. Informative space that encouragesExploring Our Goal
- 47. Prototyping • Lo fidelityprototype • Hi fidelity prototype • Usability Testing
- 48. Rough Idea LoFi Prototype
- 49.
- 50. Communicate ideas in the team Paper Prototype’s Goal
- 58. Prototyping • Lo fidelityprototype • Hi fidelity prototype • Usability Testing
- 59. Look real &Interactive Hi Fidelity Prototype
- 60.
- 61. Hi-Fidelity Prototype • HTML+ CSS + JavaScript • Flash/Flex • Adobe Fireworks • Axure • ...
- 65.
- 66. Prototyping • Lo fidelityprototype • Hi fidelity prototype • Usability Testing
- 67. Testing the prototype Usability Testing
- 68. Let users interactwith the prototype How?
- 69. Experience & Learn Usability Testing’s Goal
- 70. Usability Testing • 10students • Assign them tasks to do • Ask them to “think out loud” • Observe and ask follow up question
- 71. What do youthink?
- 72.
- 73. Prototyping • Lo fidelityprototype • (Mid fidelity prototype) • Hi fidelity prototype • Usability Testing
- 74.
- 75. Look real, Not Interactive Mid Fidelity Prototype
- 76. Set Standard oflayout, Look and Feel Mid Fidelity Prototype’s Goal
- 77. Gap between imagination &realization (or you & team)
- 78. 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 Recommend Nirvana U2 Radiohead Lady Gaga Ricardo Arjona
- 79. 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 2002 ns Mariah Carey Music Box Merry Christmas Day Dream Butterfly #1’s Rainbow Glitter Chambracelet 1993 1994 1995 1997 1998 1999 2001 2002 ous 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
- 80. @"A%''''';<#=,/,)'''''@%08'''''!3B'/'0#=,/,#/4''''' ;)'!>>".4-' <"5'C.- !"#$% !&"#&$%'(%)&"#&$%%*'!"#! 6780",% !'+#,-./0'1,"23#45'6780",/-#"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%")(% K'W),T&<( X&%/),Y,*$.) I?(23,$F'L,458M58966 P($Q/(,&1,.$F%,:(Q"%'<(1'R,'?(.,"/)$,/&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,$F'L,458M58966 ;('F%1L,454658966 *%$+)(,-&)'$%.,!&/( 0"1(',0"23)$1, *":,;$<"12(, ;$23>;":&$?(":@ *$:,B./"1
- 82.
- 83. Data Contextual Interpretation Prototyping Product Inquiry & Consolidation Understand Recommendation User Contextual Design
- 84. 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
- 85.
- 86. Second Place Result
- 87. Reflection • Hi-fidelity prototypeis important • It is the process that matter, not the result • The “real” process
- 88. The real experience Hi-fidelity prototype is important (CS majors, your skills are valuable!)
- 89. Learning by Doing Process matters, not the result
- 90. Idea (solution), finding, refine,and then prototype The “real” process
- 91.
- 92. How many CDsI have checked out since I was in UM last September?
- 93. Just a simpleand small anecdote
- 94. A process toreach perfect (local maximum) Human Center Design (HCD)
- 95. Other HCD Techniques •Affinity Diagramming • Story Boarding • Work Flow Analysis and Modeling • Speed Dating, User Enactment • Heuristics Evaluation • Comparative Analysis
- 96. Go Blue! Q &A