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
   

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Photo credit: Kerstin Joensson
   

   View Slide

7. WARNING
   MUSIC IS HARD
   

   View Slide

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”
   

   View Slide

9. WHAT DO I WISH I’D KNOWN
   WHEN I STARTED DESIGNING
   MUSIC PRODUCTS?
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

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
    

    View Slide

14. 1. TOOLS
    

    View Slide

15. PRESENTATION EDITORIAL
    

    View Slide

16. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    

    View Slide

17. View Slide

18. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    

    View Slide

19. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    

    View Slide

20. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    

    View Slide

21. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    

    View Slide

22. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    2012
    

    View Slide

23. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    2012
    2013
    

    View Slide

24. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    2012
    2013
    2014
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. THESE FOUR AREAS OF
    KNOWLEDGE ARE YOUR
    DESIGN TOOLKIT
    

    View Slide

29. View Slide

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
    

    View Slide

31. View Slide

32. Han
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

35. What do you want?
    Why do you want it?
    FIRST ASK
    

    View Slide

36. INVESTIGATING
    (WHAT, WHY)
    PRODUCING (HOW)
    Turning the
    ‘creative corner’
    

    View Slide

37. AND THEN OF COURSE, TRY IT OUT,
    FAIL FAST, AND DO IT AGAIN.
    Not all products are hits.
    

    View Slide

38. IS LEARNING TO ASK THE RIGHT
    QUESTIONS AT THE RIGHT TIME.
    50% OF MAKING
    

    View Slide

39. 2. STRUCTURE
    !"
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. Credit: Alvaro Carreras, Rovane Durso, James Cipriano – Dribbble
    

    View Slide

46. View Slide

47. MUSIC IS MESSY
    

    View Slide

48. LET YOUR USERS USE
    AND ABUSE WHAT
    YOU MAKE.
    Photo credit: Nimrod Kamer
    

    View Slide

49. LET YOUR USERS USE
    AND ABUSE WHAT
    YOU MAKE.
    Photo credit: Nimrod Kamer
    

    View Slide

50. LET YOUR USERS USE
    AND ABUSE WHAT
    YOU MAKE.
    Photo credit: Nimrod Kamer
    

    View Slide

51. View Slide

52. THE SONG
    YOU LOVE
    SONG SHARING ON THIS IS MY JAM
    

    View Slide

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.
    

    View Slide

54. 2M JAMS .5M SONGS
    » .5M NEW

    SCREENS
    = =
    RICH NEW
    INTERACTIONS,
    CONTENT &
    DISCOVERY
    

    View Slide

55. View Slide

56. View Slide

57. 3.CONTEXT
    

    View Slide

58. Is largely fragmented, contextless and ephemeral.
    SHARING SONGS
    

    View Slide

59. Is largely fragmented, contextless and ephemeral.
    SHARING SONGS
    

    View Slide

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
    

    View Slide

61. Hype Machine Stack The Fader Daily Stones Throw newsletter
    

    View Slide

62. LISTENING TO SONGS
    Takes 3.5 mins, requires headphones or speakers and frame of mind
    

    View Slide

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)
    

    View Slide

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.
    

    View Slide

65. 4. LOOK & FEEL
    A designer is a planner with
    an aesthetic sense.
    – Bruno Munari
    #$✒️
    

    View Slide

66. INDUSTRY/DOMAIN
    KNOWLEDGE IS A MUST.
    

    View Slide

67. View Slide

68. DIGITAL MUSIC IS ONLY AS
    VISUAL AS YOU CHOOSE TO
    MAKE IT.
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. VISUAL ALCHEMY
    The ingredients we had (for
    the most part) were dodgy
    metadata and terrible quality
    thumbnails.
    

    View Slide

80. View Slide

81. 5. INTERACTIONS
    Listening / Discovering / Socializing
    '()*
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

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.
    

    View Slide

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
    

    View Slide

89. In a London pub
    Photo credit: David Emery on flickr
    

    View Slide

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…
    

    View Slide

91. In a London pub
    1. The quality of music recommendations
    went way up
    2.The quality of the pub conversation
    went up too
    

    View Slide

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
    

    View Slide

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
    !
    

    View Slide

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
    

    View Slide

95. MUSIC PRODUCTS HAVE THE
    POTENTIAL TO AMPLIFY & CREATE
    MUSIC CULTURE, NOT JUST
    CHANGE BEHAVIOR.⚡️
    

    View Slide

96. FOLLOW ME ON TWITTER
    @han
    GE T IN TOUCH
    han@hannahdonovan.com
    TH ANKS!
    

    View Slide