UX Teardown of Soundcloud

A UX Teardown of Soundcloud.com, where we’ll think about who their users are, what their goals are, and how well those goals are achieved by the website.

To learn more about UX, web design and web development, check out the Viking Code School at http://vikingcodeschool.com.

Transcript

1. Demo: A UX
   Teardown
   A brief walkthrough of the UX of
   soundcloud.com
   1
   

   View Slide

2. Our Goals
   1. Demonstrate an approach for deconstructing
   the UX of a website (at least partially).
   2. Help you think more critically about the sites
   you visit.
   3. Maybe throw in a couple helpful suggestions for
   Soundcloud :)
   2
   

   View Slide

3. Questions
   1. Who is the key user?
   2. What is that user's number one critical goal when using the site?
   3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?
   4. What is the approximate information architecture of the site? (sketch it out)
   5. What is the flow through that architecture for the user who is accomplishing the critical goal you
   identified above?
   6. What style(s) of navigation is/are used? Do they answer the three key questions (Where am I and
   how did I get here? Where should I go next? How do I get there?)?
   7. What key interactions does the user have? Are they clear and usable?
   8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with
   good satisfaction?
   9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and
   with good satisfaction?
   3
   

   View Slide

4. Let’s Dive In…
   4
   Screenshot
   

   View Slide

5. 1-3: Users and Goals
   1. Who is the key user?
   1. An active music listener, probably younger
   2. What is that user's number one critical goal when using the site?
   1. Listen to music ASAP
   2. Secondary — explore for (and save) new music
   3. What is likely to make that user's experience particularly positive (i.e. provide good
   satisfaction)?
   1. Clear and continuous sound quality
   2. Feeling like part of a vibrant community
   3. Great recommendations for exploration
   4. A “cool” factor
   5
   

   View Slide

6. 4. Information Architecture
   6
   Home Page
   My Stream
   Settings
   Profile
   Search
   Explore
   Notifications
   Tracks
   People
   Playlists
   Data:
   Feed / Results
   Feed / Results
   Feed / Results
   Upload!
   Footer Stuff
   

   View Slide

7. 5: Navigation Flows
   7
   Goal: Find and play music ASAP
   Home Page
   My Stream
   Settings
   Profile
   Search
   Explore
   Notifications
   Tracks
   People
   Playlists
   Data:
   Feed / Results
   Feed / Results
   Feed / Results
   Upload!
   Footer Stuff
   Play!
   

   View Slide

8. 6: Navigation Critique
   1. Busy navbar, but it’s got the main actions we
   want to use.
   8
   (not signed in)
   

   View Slide

9. 6: Navigation Critique
   Where am I and how did I get here? Looks good — shallow architecture helps.
   Where should I go next and how do I go there? It’s a bit tough to say what the
   next step is since the play buttons are so small, but there are other CTAs on the
   page (like add to playlist). Clicking the sound wave pattern plays the track too
   though.
   9
   

   View Slide

10. 6: Navigation Critique
    Moment of confusion: Clicking on the track title leads
    to the track page instead of immediately playing it
    10
    

    View Slide

11. 7: Interaction Critique
    Playback… how do I change the volume!?
    11
    

    View Slide

12. 7: Interaction Critique
    The track changed, where did the new one come
    from!?!?
    12
    ???
    

    View Slide

13. 7: Interaction Critique
    13
    …You get the idea.
    

    View Slide

14. Secondary Goals: Explore
    14
    LOTS of possible navigation paths and CTAs!
    

    View Slide

15. 8: Overall Wins
    1. Once you know what to click, navigation is quite
    rapid to get playing fast. Our stated goal is
    achieved effectively, efficiently, and with
    satisfaction (barring a few critiques).
    2. The product experience itself is smooth — fast
    website, good playback (mostly).
    3. The site feels high budget … because it is. It’s
    mostly an example of a well thought out layout
    that’s trying to serve lots of different needs.
    15
    

    View Slide

16. 9: Overall Critiques
    1. They’re jamming a lot of stuff together — you can tell they’re trying to serve
    lots of goals and that’s still a problem.
    2. CTAs all over the place! Click panic…
    3. Playback controls are hard to find and use. Need a callout or something when
    you interact (e.g. playing a new track)
    4. The data hierarchy wasn’t clear at first — users, playlists, tracks, groups, likes
    16
    

    View Slide

17. Go Explore!
    17
    

    View Slide