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.

1. Design Process
Experience Sharing
Pei-Yao (Perry) Hung ( )
peiyaoh@umich.edu
http://perryhung.com

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. Q?

4. Aoide
A music browsing interface for
MLibrary music collection

5. Outline
• Problem
• Approach to the solution: the process
• Result: Competition
• Reflection

6. M
Library?

8. Problem?

9. People don’t go to the
library!

10. Solutions?

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. Q?

14. Contextual Design
Human-Center Design

15. Context?
Contextual Design

16. Data
Contextual Interpretation
Prototyping Product
Inquiry &
Consolidation
Understand
Recommendation
User
Contextual Design

17. Interview

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
• How they get new music?
• What affects their choice of music? Why?
• Perform a simple task using library’s
existing interface and gain feedback

22. Free
Finding from student

23. Key word search
as the start
Finding from student

24. No Exploration
Finding from student

25. Artist
Finding from student

26. Genre
Finding from student

27. Friends
Finding from student

28. Classmates
Finding from music student

29. Anonymous
Finding from technical librarian

30. History
Finding from music student & librarian

31. Composer-Performer-album
Finding from music librarian & music student

32. Q?

33. Data
Contextual Interpretation
Prototyping Product
Inquiry &
Consolidation
Understand
Recommendation
User
Contextual Design

34. Persona & Scenarios

35. “The User”
What is “Persona”?

36. Fake it!
How?

37. User without our design
Persona

38. User with our design
Scenario

39. Who we design for
Persona with scenario

40. Focus & Agreement
Persona & Scenario’s Goal

41. Persona & Scenario
• 3 Personas with scenarios
• Bio + Goal + Challenge
• Slogan

44. Q?

45. Data
Contextual Interpretation
Prototyping Product
Inquiry &
Consolidation
Understand
Recommendation
User
Contextual Design

46. Informative space
that encourages Exploring
Our Goal

47. Prototyping
• Lo fidelity prototype
• Hi fidelity prototype
• Usability Testing

48. Rough Idea
Lo Fi Prototype

49. Sketch it! (Paper)
How

50. Communicate ideas
in the team
Paper Prototype’s Goal

58. Prototyping
• Lo fidelity prototype
• Hi fidelity prototype
• Usability Testing

59. Look real & Interactive
Hi Fidelity Prototype

60. Experience
Hi Fidelity Prototype’s Goal

61. Hi-Fidelity Prototype
• HTML + CSS + JavaScript
• Flash/Flex
• Adobe Fireworks
• Axure
• ...

65. Q?

66. Prototyping
• Lo fidelity prototype
• Hi fidelity prototype
• Usability Testing

67. Testing the prototype
Usability Testing

68. Let users interact with
the prototype
How?

69. Experience & Learn
Usability Testing’s Goal

70. Usability Testing
• 10 students
• Assign them tasks to do
• Ask them to “think out loud”
• Observe and ask follow up question

71. What do you think?

72. What’s wrong?

73. Prototyping
• Lo fidelity prototype
• (Mid fidelity prototype)
• Hi fidelity prototype
• Usability Testing

74. Mid Fidelity Prototype

75. Look real,
Not Interactive
Mid Fidelity Prototype

76. Set Standard of layout,
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. Q?

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. Video

86. Second Place
Result

87. Reflection
• Hi-fidelity prototype is 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. Fun Time!

92. How many CDs I have
checked out since I was
in UM last September?

93. Just a simple and small
anecdote

94. A process to reach
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