Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Hannah Donovan
September 04, 2014

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.

Hannah Donovan

September 04, 2014
Tweet

More Decks by Hannah Donovan

Other Decks in Design

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
    [email protected]
    TH ANKS!

    View Slide