The iOS app SoundCloud should be designing — a UX case study

The iOS app SoundCloud should be designing — a UX case study

An end-to-end experience design proposal.

While I was in the process for an Experience Designer position at AirBNB, they asked me to choose an app I was familiar with (in a different industry than AirBNB) and expose my end-to-end design skills in only 5 days .

The presentation has then been selected by internal AirBNB designers and enabled me to move forward in their recruitment process.

In this article, you’ll find the complete methodology I’ve used as well as tips & tricks to help you nail down your next app redesign exercise!

Let’s go! :fire:

Design planning

To accomplish a complete design exercice,

I had to set myself deadlines. Here are the methodology and structure I’ve used for the 5 days.

Day 1/5 — Research/Observe

“Want your users to fall in love with your designs?  Fall in love with your users.”

Dana Chisnell

1.1 Generate information architecture benchmarks

Looking at the main competitors’ app is always a great way to start this kind of exercise, it allows you to browse the existing solutions, download new apps, audit them and generate screenshots .

It was, most importantly a great way to spot differences in the hierarchies to detect patterns. The first step towards understanding the product you’re analyzing.

App benchmark included Apple Music, Deezer, Podcast & Spotify.

I’ve used which is super efficient and creates great visuals.

1.2 Collect insights

Hunting the web for hours is necessary to find valuable insights from existing users. Another complementary angle is to directly ask friends to share their feedback and conduct user tests with people not familiar with the app.

Main sources of insights included:

  • App Store reviews
  • SoundCloud iOS Forum
  • Articles from former SoundCloud designer
  • Existing case studies
  • Friends feedback
  • User test sessions with new users

Take screenshots and start writing your first ideas!

1.3 Send a qualitative survey

Take some time to write valuable questions around today’s frustrations, blockers, enablers or suggestions and send it around. You have around 48 hours to collect as much feedback as possible. Sharing the final results with them later should help you get more results. is your best friend here!

1.4. Write down ideas and prioritize them

Writing down ideas is a continuous process that needs to be done in parallel to the analysis. Once my ideation phase was over, I decided to prioritize ideas from importance to their end-user and feasibility.

Then link the user feedback to the ideas, it was clear for me which problem I had to tackle. works well here when you don’t have whiteboards and post-it at home!

Day 2/5 — Define Problem

“A problem well stated is a problem half solved.”

Charles Kettering

2.1 Define the main issues

After hours of analysis and user test sessions (4), here are the 5 main issues I’ve found.

2.2 Create Personas and Customer Experience

Designing good personas take time but it is essential to create empathy over your targeted users.

Creating their Customer Experience enables you to find opportunities, new ideas, and additional frustrations.

Figma file in action

For you to gain time on your UX research, I’ve created a customizable, symbolized templates that I invite you to use for your Personas and Customer Journey creation.

:sparkles: Get the Sketch and Figma files

2.3 Audit the current version

The analysis is based on user tests and insights previously seen.

There is the structure I’ve used:

  • App screenshot
  • Screenshot content analysis
  • Main issues found
  • Creative output
  • Link with a personas quote

Home screen

Stream screen

Search screen

Library screen

GO + screen

Player screen

Day 3/5 — Explore & Iterate

“Creativity is allowing yourself to make mistakes.  Design is knowing which ones to keep.”

Scott Adams

3.1 Find inspiration

3.2 Sketch out ideas

3.3 Create your first components

Clear components for Playlists, Songs, Albums and Artists

3.4 Design Wireframes

Concepts for a 2-layer app with the content below and the player above

Day 4/5 — The Solution

“The ability to simplify means to eliminate the unnecessary  so that the necessary may speak.”

Hans Hofmann

4.1 Create clear UX rules

Your rules should be innovative and obvious

4.2 Reveal macro-level changes

Today’s Main Navigation

Main Navigation Updates

New Main Navigation

4.3 Present final design

Home is what’s new

What’s new, what’s hot is only on the home page.

That’s what SoundCloud is all about.

Search with ease

By empowering the user with suggestions, this new search page makes discovering content super easy.

Content, organized

Each content has a clear UI. Content is clearly sorted removing confusion.

Join the Pros

Understand the premium features in context.

Take Control

The player embraces the artboard colors, reveals clear touch zones to give back control.

A player with options

Easily add to a playlist, cast to a device or share with friends in a consistent experience.

Go Dark

Reveal your content with Dark Mode.

Enjoy the Figma interactive prototype below (recommend to open it full screen).

Mobile friendly link

:black_large_square: To enjoy Dark Mode click on “Access my profile” from the GO+ tab

Day 5/5 — Retrospective

5.1 Measure success

Using the prototype with new users and:

Generally speaking

:point_right: Measure the impact of the update on real users.

:point_right: Validate hypotheses and iterate.

Potential implementation

:point_right: A lot of technical constraints and screen states have been omitted considering the timing and would need to be reconsidered.

:point_right: Progressive rollout to beta users.

:point_right: Ask quantitative feedbacks to validate hypotheses and iterate.

5.2 Outcomes & lessons

Things I would do better next time:

  1. (User tests) :point_right: Perform additional user test sessions with existing users.
  2. (Include branding analysis) :point_right: Reflect SoundCloud values through the new concept.
  3. (Include marketing/platform analysis) :point_right: The business reality of the platform should be considered.
  4. (Include font and icon) :point_right: Include font and icon design in the analysis.
  5. (Micro-interactions) :point_right: Animate the most important micro-interactions.

Final proposal

Thank you for your curiosity!

The learnings listed above are some key points that I’ve found important while making the exercise. They may not apply to all case studies and they may be things that I’ve forgotten to cover here that might be super important for yours. However, I hope that it can help some designers out there who are looking for a great app redesign inspiration. I wish I had found this kind of content before starting the exercise, hope it will be useful for you too!

Micka Touillaud

UX Design consultant

Website | Linkedin | Twitter | Email