A DESIGNER’S GUIDE TO MUSIC PRODUCTS (ft. Ħ▲N)＼(◎o◎)／HD/HQ premiere [OFFICIAL]

Currently working on, or thinking of building a music product? This talk is for you.

Over the last eight years, product designer Hannah Donovan has worked with Last.fm, The Echo Nest, This Is My Jam, Drinkify and MTV. In this session, she’ll be your guide to designing for one of the most crowded spaces in the tech biz, online music.

From the general, like how to position your brand – to the very specific, like messy metadata, (what!?) as well tips and tricks on designing for playback, discovery and social connections, Hannah will tell all. Parental advisory, explicit content.

Transcript

1. A Designer’s Guide to Music Products (ft. ĦN)
 (o)
   HD/HQ premiere [OFFICIAL] HANNAH DONOVAN 4 SEP, 2014
2. I’m a product designer, and I work in music. I love making things that create culture and nurture self-expression. Hello, I’m
6. Photo credit: Kerstin Joensson
7. WARNING MUSIC IS HARD
8. •It’s a crowded space, competition is tough •Rightfully so, many investors are wary of it •There are a lot of constraints, and they’re not your users’ problem •There are also a lot grey areas… •“mobilus in mobile”
9. WHAT DO I WISH I’D KNOWN WHEN I STARTED DESIGNING MUSIC PRODUCTS?
13. 1. TOOLS Your design toolkit for music & how to use it 2. STRUCTURE Designing information 3. CONTEXT Music is situational 4. LOOK & FEEL Music is pop culture 5. INTERACTIONS The triad of listen, share & discover
14. 1. TOOLS
15. PRESENTATION EDITORIAL
16. PRESENTATION EDITORIAL AUDIO/VIDEO DATA
18. PRESENTATION EDITORIAL AUDIO/VIDEO DATA
19. PRESENTATION EDITORIAL AUDIO/VIDEO DATA
20. PRESENTATION EDITORIAL AUDIO/VIDEO DATA
21. PRESENTATION EDITORIAL AUDIO/VIDEO DATA
22. PRESENTATION EDITORIAL AUDIO/VIDEO DATA 2012
23. PRESENTATION EDITORIAL AUDIO/VIDEO DATA 2012 2013
24. PRESENTATION EDITORIAL AUDIO/VIDEO DATA 2012 2013 2014
25. There is no “one vs. the other” There is “both”. ! Good design is about having as many tools in your toolkit as possible, and using them appropriately.
26. There is no “one vs. the other” There is “both”. ! Good design is about having as many tools in your toolkit as possible, and using them appropriately. PRESENTATION EDITORIAL AUDIO/VIDEO DATA
27. Design knowledge: how to source and present the way music looks music looks, what the trends are. ! Legal knowledge: how to source audio/video ! Editorial knowledge: how is music journalism created? What’s the formula behind radio playlists? ! Technical knowledge: what APIs/data are available
28. THESE FOUR AREAS OF KNOWLEDGE ARE YOUR DESIGN TOOLKIT
30. AREA RIPE FOR EXPERIMENTATION + AREA OF A LOT OF DIALOGUE = AREA OF MANY CONSTRAINTS Here’s the stuff you can get, and here’s the format you can get it in, you can include these bits. •What parameters can have? •How expensive is it to get this data? •What can we reasonably compare this data to? •No? Let me show you what I’m thinking… TECHNICAL KNOWLEDGE
32. Han
33. What do you want? Why do you want it? FIRST ASK This is ‘the brief’ (questions you ask together with your client, users, colleagues) – whether you’re working for yourself or someone else.
34. What do you want? Why do you want it? FIRST ASK This is ‘the brief’ (questions you ask together with your client, users, colleagues) – whether you’re working for yourself or someone else. How to do it? THEN DECIDE This is for you and your colleagues to choose. This is not for your users or clients to decide.
35. What do you want? Why do you want it? FIRST ASK
36. INVESTIGATING (WHAT, WHY) PRODUCING (HOW) Turning the ‘creative corner’
37. AND THEN OF COURSE, TRY IT OUT, FAIL FAST, AND DO IT AGAIN. Not all products are hits.
38. IS LEARNING TO ASK THE RIGHT QUESTIONS AT THE RIGHT TIME. 50% OF MAKING
39. 2. STRUCTURE !"
45. Credit: Alvaro Carreras, Rovane Durso, James Cipriano – Dribbble
47. MUSIC IS MESSY
48. LET YOUR USERS USE AND ABUSE WHAT YOU MAKE. Photo credit: Nimrod Kamer
49. LET YOUR USERS USE AND ABUSE WHAT YOU MAKE. Photo credit: Nimrod Kamer
50. LET YOUR USERS USE AND ABUSE WHAT YOU MAKE. Photo credit: Nimrod Kamer
52. THE SONG YOU LOVE SONG SHARING ON THIS IS MY JAM
53. Every song is carefully hand-picked, creating a network effect of a small catalog of only the best songs. Focus is on cutting through all the choice in music today.
54. 2M JAMS .5M SONGS » .5M NEW
 SCREENS = = RICH NEW INTERACTIONS, CONTENT & DISCOVERY
57. 3.CONTEXT
58. Is largely fragmented, contextless and ephemeral. SHARING SONGS
59. Is largely fragmented, contextless and ephemeral. SHARING SONGS
60. ENCOURAGING CONTEXT To encourage people to create jams that were more beautiful and personal, we made a choice to add more friction to the posting process (number of jams posted stayed even) 28% 34% 40% 46% 52% Oct 2012 Nov Dec Jan 2013 Feb Mar Apr May Jams with written descriptions
61. Hype Machine Stack The Fader Daily Stones Throw newsletter
62. LISTENING TO SONGS Takes 3.5 mins, requires headphones or speakers and frame of mind
63. Recent Stations Your Personal Stations Popular Stations Tag Stations Your Personal Stations [Name] Radio [Name] Radio [Name] Radio Last.fm Kinect Library Radio Mix Radio Recommended Radio Popular Stations Artist Radio Last.fm Kinect Tag Stations Tag Radio Last.fm Kinect Artist Radio Artist Radio Tag Radio Tag Radio Artist Radio Artist Radio Artist Radio Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist Artist icon icon ico Xbox Kinect Navigation Selecting stations Controls: User selects a tile by “holding” their hand States: Personal stations will be empty (and need a help screen) until the user has listened to x tracks; pull recent stations from user’s LFM history. e starts equires lay icon ting these a “folder” not have a play icon)
64. upload.wikimedia.org/wikipedia/commons/f/fa/IPhone_5.png http://upload.wikimedia.org/wikipedia/commons/f/fa/IPhone_5.png IN THE RIGHT CONTEXT, GREAT MUSIC PRODUCTS DON’T EVEN NEED MUSIC.
65. 4. LOOK & FEEL A designer is a planner with an aesthetic sense. – Bruno Munari #$✒️
66. INDUSTRY/DOMAIN KNOWLEDGE IS A MUST.
68. DIGITAL MUSIC IS ONLY AS VISUAL AS YOU CHOOSE TO MAKE IT.
79. VISUAL ALCHEMY The ingredients we had (for the most part) were dodgy metadata and terrible quality thumbnails.
81. 5. INTERACTIONS Listening / Discovering / Socializing '()*
87. Every user interview I’ve done confirms the best music recommendations come from friends. ! Usually people have (or had) between 
 1 – 5 people who share music with them.
88. DISCOVERY IS WORK While working on the Last.fm iPhone app in 2010, we also re-branded the radio stations, including adding a new one – My Mix Radio, a mix of your existing favs + new stuff
89. In a London pub Photo credit: David Emery on flickr
90. In a London pub Matt was tired of coming home from the pub with long lists of “bands to check out” after badgering friends for tips. So he started asking this instead: “What one song I should listen to when I get home?” Two things happened…
91. In a London pub 1. The quality of music recommendations went way up 2.The quality of the pub conversation went up too
92. Reactions: better music, better conversation. Chris Thorpe @jaggeree
 @ThisIsMyJam is closest thing I've felt for a while to the John Peel show I remember from youth. You may not like all but discovery is key. 27 Jan 12
93. TO WRAP UP ! Music is hard, and you should be intimately familiar with the domain/industry to do it well ! Use the best tool for the job, regardless of trends. Use the what/why brief and then decide how ! Music is messy, plan for and embrace the chaos from an information design perspective !
94. Music requires the right context and constraints to be enjoyed; The design of social music ≠ social networking Music represents pop culture and thrives on visual language; digital music is only as visual as you choose to make it Design from day one for the interlinked triad of music interactions – listening, discovering and socalizing
95. MUSIC PRODUCTS HAVE THE POTENTIAL TO AMPLIFY & CREATE MUSIC CULTURE, NOT JUST CHANGE BEHAVIOR.⚡️
96. FOLLOW ME ON TWITTER @han GE T IN TOUCH han@hannahdonovan.com TH ANKS!