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 full-size 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 full-size slide

  3. Photo credit: Kerstin Joensson

    View full-size slide

  4. WARNING
    MUSIC IS HARD

    View full-size slide

  5. •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 full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. PRESENTATION EDITORIAL

    View full-size slide

  9. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA

    View full-size slide

  10. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA

    View full-size slide

  11. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA

    View full-size slide

  12. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA

    View full-size slide

  13. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA

    View full-size slide

  14. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    2012

    View full-size slide

  15. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    2012
    2013

    View full-size slide

  16. PRESENTATION EDITORIAL
    AUDIO/VIDEO DATA
    2012
    2013
    2014

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. THESE FOUR AREAS OF
    KNOWLEDGE ARE YOUR
    DESIGN TOOLKIT

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 2. STRUCTURE
    !"

    View full-size slide

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

    View full-size slide

  30. MUSIC IS MESSY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

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

    SCREENS
    = =
    RICH NEW
    INTERACTIONS,
    CONTENT &
    DISCOVERY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

  40. Hype Machine Stack The Fader Daily Stones Throw newsletter

    View full-size slide

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

    View full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

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

    View full-size slide

  45. INDUSTRY/DOMAIN
    KNOWLEDGE IS A MUST.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

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

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

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

    View full-size slide

  58. FOLLOW ME ON TWITTER
    @han
    GE T IN TOUCH
    [email protected]
    TH ANKS!

    View full-size slide