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.
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.
A number of deliverables were required for the project, including:
The new design of the app provides users with the ability to:
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.
Our user research consisted of four steps:
A key insight from our screening survey was how many users listened to podcasts whilst travelling:
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.
Our findings showed a couple of key pain points:
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…"
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.
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.
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:
From the design studio process and the app map, we created a wireflow.
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.
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:
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.
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.
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.
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.
Using the style guide, we then developed a high-fidelity mockup of the app.
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.
This shows the podcast discovery flow, with users arriving on the home screen before browsing and finding content on history.
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.
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.
Moving forward, my recommendations for the future of the SoundCloud app include: