SoundCloud | A UX Design Case Study

Adding podcasts to the world's largest music platform

The categories screen of the Today app with iPhone on a green background

Project Overview

Summary

This project focused on adding podcasts to the existing app of the world’s largest music and audio platform – SoundCloud – enabling users to browse and discover new podcasting content, share custom audio clips, and add and view comments for podcast episodes.

My role

Working as part of a three person team, my role was to lead the design for a conceptual SoundCloud music and podcasts app. I followed the British Design Council's Double Diamond process with its four phases: Discover, Define, Develop, Deliver.

Key deliverables

A number of deliverables were required for the project, including:

Results

The new design of the app provides users with the ability to:

The SoundCloud logo.

Design Process

Competitive analysis

We started the project by understanding our client – SoundCloud – and their competition. We analysed 12 competitors in the podcasting space, with three identified as direct competitors, offering both music and podcasts. The analysis also showed we needed to design for the native app rather than a web player. Unique selling points were identified, with sharing custom audio and co-listening of content not available in any of the 12 apps; however, we needed to find out if users wanted these.

The logos of Spotify, Deezer and Mixcloud
Spotify, Deezer and Mixcloud - the three direct competitors

User Research

Our user research consisted of four steps:

A key insight from our screening survey was how many users listened to podcasts whilst travelling:

A bar chart showing survey results about podcast listening contexts

Results also supported our choice of platform with 89% of respondents listening to podcasts on mobile. Results also highlighted the importance of podcast browsing and discovery, with 41% of respondents regularly listening to 5 or more podcasts.

In total, we conducted 12 semi-structured user interviews. A key challenge during this process was identifying users who were available at relatively short notice to conduct interviews.

Synthesising our findings

Our findings showed a couple of key pain points:

Our affinity map of our interview findings
Our affinity map of our interview findings

Another key finding was that nearly all users listened to podcasts whilst multi-tasking, especially to enhance potentially boring activities (such as commuting or housework).

We also found many users listen to podcasts primarily as a method of learning rather than entertainment.

"Podcasts for me are all about learning something. I consider podcasts to be in the same category as articles and books…"

Stepping into our users shoes

Michaela, our persona.
Michaela, aged 25–35, living in London.

From our findings, we created the persona of Michaela. Doing so allowed us to keep the user at the centre of the design process, ensuring we met her goals. We created two scenarios in order to frame the problem and focus on the user needs as we moved forward.

Ideating

Conducting two rounds of design studio, we explored some ideas for the scenarios, subsequently using a feature prioritisation matrix to refine what should be included in the MVP. This showed there were unwanted features that were very time consuming and costly. Co-listening was in this category and was therefore dropped from the design.

Four early, and quick, sketches of initial ideas for the app.
Some very quick sketches of early ideas for the app.

Navigation

We identified that users found the 'Stream', 'Collections' and 'Search' tabs in the current music focused SoundCloud app very confusing. In order to clarify the app, we removed these, modifying the information architecture of the app to either move this content into other more logical areas or remove the content entirely. The updated app map is below:

An early app map for the podcasts segment of the app.
The early app map for the podcasts segment of the app. Later usability testing resulted in the removal and / or merging of some elements.

Improving rapidly

From the design studio process and the app map, we created a wireflow.

The wireflow of our initial design
The wireflow of our initial design.

We developed this into a paper prototype, conducting usability tests, iterating and testing repeatedly. This showed the ‘discovery map’ – our initial idea for helping users to discover new content – was very confusing; this was problematic as research showed we needed to help users discover new content. Owing to time limitations, we dropped it, working instead on a simpler alternative: a ‘see similar’ button. Testing validated this alternative.

The paper-prototype screen showing the 'discovery map' for the now playing podcast.
The (culled) discovery map, displaying content related to the current podcast.

We developed a mid-fidelity digital prototype, conducting further usability tests and refining the design before moving it into a high-fidelity mockup. Examples of this iteration process are as follows, with the early designs on the left and the mid-fidelity versions on the right:

Three pictures of the now playing screen, showing the development and improvement of the app over time.
Iterations of the now playing screen.

Usability testing showed, for example, the sleep timer was confusing. Removing it from this screen allowed us to implement a more important feature that increased user engagement: the ability to view and add comments.

Three pictures of the share screen, showing the development and improvement of the app over time.
Iterations of the share screen.

Above is another example; testing showed users were unsure whether the correct part of the clip was selected; a preview button was added accordingly. Following its implementation, however, users were overlooking and missing the share button beneath it. In the high-fidelity version the share button became more prominent.

Branding

As our role was to add a new functionality to the existing app, it was really important that we understood SoundCloud and their current branding and brand values. From our research, we understood the three core values of SoundCloud to be:

Using these core brand values, we created a mood board.

A collage of images reflecting the SoundCloud brand identity.
Our mood board for the SoundCloud app.

Considering the app's core role was significantly changing, we didn't want to disorient existing users by changing SoundCloud's established styling. The changes we made were subtle: increasing font-sizes for readability and adding gradients.

The style guide, showing the colours and typeface to be used in the app.
The style guide.

Using the style guide, we then developed a high-fidelity mockup of the app.


Solution

The design process described above resulted in a high-fidelity prototype of the app made using Sketch and InVision, with the preview element animated in Principle to display that functionality. Some of the key flows of the app are shown in the GIFs below.

An animation of the discovery flow.

This shows the podcast discovery flow, with users arriving on the home screen before browsing and finding content on history.

An animation of the now playing flow.

This shows the now playing flow, including how users can share custom clips. Use of the system share dialog increases familiarity for the user, increasing their level of confidence when using the app.


Outcome

The re-designed SoundCloud app was received very positively by both the client and users. Users stated the app was not only simple and 'clean' but helped them feel more confident when finding new content.

Future recommendations

Moving forward, my recommendations for the future of the SoundCloud app include: