SoundCloud
— Redesigned
Overview —
This SoundCloud redesign is focused on improving the overall user experience in terms of navigation and interaction. By enhancing existing features and adding new ones, we were able to showcase the elements that differentiate this platform from its competitors.
Visual interface, redesigned.
A completely new look & feel, but keeping the core elements that define SoundCloud as a music platform.
Navigation, simplified.
Filter music in a simple way and navigate quickly through the content.
Quick options, redefined.
Add to the queue, share, like, repost and other quick options are available just with one tap.
DJ sets, reinvented.
SoundCloud recognizes songs inside music mixes or DJ sets to help the user discover new music.
Project goal
Improve the overall interface design and navigation from the mobile application. We focused on refining elements that make users choose SoundCloud over similar applications and adding new features to turn the platform into a unique experience.
— Skip the Design Process
Design Process —
Process & Context
SoundCloud is a music and podcast streaming platform that allows users to listen to millions of songs from around the world, or upload their own. Users (we included) use this platform for it’s easy to access electronic music, DJ sets, and underground music.
As regular users we always got frustrated by some design aspects and navigation problems, so as music lovers and designers we decided to redesign it, knowing that there was room for improvement.
Interface analysis
After creating a screen flow, we did an analysis of the visual elements and the information display. We found one main issue: lack of consistency. Soundcloud uses too many ways to visualize elements and this visualization changes in every screen. We used this analysis to point out elements that needed to be changed in the redesign.
Navigation analysis
Along with the screen flow, we visualized the information architecture to analyze the navigation, which also had two main issues: repeated content and unnecessary steps. We also used this analysis to focus on which navigation elements we had to focus on while creating the redesign.
User analysis
We decided to create some target users to get a clear view of who actually uses this platform, that would help us to create and develop a redesign that could cover this user needs. As regular users, we also had some needs and ideas, so we also took them into consideration.
SWOT analysis
Before the design phase, we did a SWOT analysis (Strengths, Weaknesses, Opportunities, and Threats) as a way to group all the results from the previous analysis and get a clear idea of what we wanted to change in terms of interface and navigation, focusing on the user needs. We decided to keep the strengths, focus on improving the weaknesses and turn the opportunities into features. This analysis gave us a clear path and the final content for the redesign.
New Information Architecture
The new information architecture was based on the new elements we wanted for the platform, along with the features we wanted to develop and improve due to the previous analysis. The main goal of this analysis was to simplify the navigation path and the amount of screens needed. This visualization also allowed us to change some content titles and names to make it more clear and easy for the user to understand.
Paper first
Once we defined the content and the elements we wanted to improve, we started sketching wireframes and concepts. While doing all this we were discussing the pros, cons, and "what-ifs" of each sketch. After this phase, we ended up with several concepts and concept features which were already looking like what we wanted to achieve.
User testing
Before digitalizing our sketches we did some paper prototyping with future users to test if we were on the right path. The results helped us to define some interface elements and to validate the information architecture we had.
Wireframing
At this point, we already had all the screens that we needed to create a screenflow that could work already as an MVP (Minimum Viable Product). We focused on digitalizing those screens to start working on the functional elements and get an early version of the final visual interface.
Look & feel
One of the biggest challenges for the visual interface was to stay a bit far from what was “trendy” at that moment (gradients and pastel colors) and try to create a design that could look interesting on its own. We did some mood boards to get visual inspiration for colors, shapes and graphical elements that could work for the new features.
Final concept validation
We created a digital high fidelity prototype to test with some target users the final navigation again and the interface elements from the first user test, to finally develop a functional and good-looking solution for the overall visual interface. It’s important to highlight that every time we found a navigation or interface issue, we went back to the wireframes to solve it. This iteration process was key to achieve the final design.
Redesign focus —
Cornerstones
Before getting into the final screens is necessary to highlight the key elements in which we focused this redesign process: the navigation, the social aspect, and the content coherence. These elements are our approach to the Weaknesses identified in the SWOT Analysis.
Navigation & Filters
This is probably the main aspect of the new design. In the content analysis, we identified the same content (tracks, playlists, etc) repeated in every screen, but it was always mixed or in random order. We renamed and reorganized the four main screens in the main menu and created a tab bar filter that could be applied in all of these screens. Every filter in the tab has its own label and icon to help the user recognize the icon along with the new interface.
Social Options & Information
Users liking and reposting new music and upcoming artists are SoundCloud’s core differentiator. If the social aspect is so important, why not enhance it? We decided to add these interactive options along with information like the number of reproductions or the length, based on what was really important to show depending on each content category.
Content & Coherence
When we first analyzed the visual design, we found a really important issue: inconsistency. SoundCloud had at least three ways of showing the same content (tracks, playlists, etc) and this changed in every screen. That’s why we focused on creating a design that could work for most of the content to help the user recognize each content category easily.
Final Result —
Final Design
Showing the old screens intends to demonstrate how the main navigation screens were redefined to create the new SoundCloud design. These screens try to enhance the Strengths identified in the SWOT Analysis.
Login & Register
The first impression is always important. Quickly change between Sign In or Sign up or just choose a social media account to start using SoundCloud. This step can be skipped and done later.
Stream
The new SoundCloud focuses on the social environment. Stay updated with the latest activity from artists and other followed users and filter this activity on each category with the tab bar filter.
Discover
Get all the suggestions and content from the old Home screen, but this time focused on discovering new music and artists based on previous activity.
Search
Empty screen? Not anymore. Quick access to recent searches and results or just tap in the search bar to start exploring.
Library
Here is where all the content marked as “Liked” goes, but now it’s filtered and displayed by categories. The recently played content will be always available here too.
Now playing
A tribute to SoundClouds iconic fullscreen combined with a music lovers classic: the vinyls. Get all the important information from the current song and quick options to Like or Repost the current track.
What's new —
New features
Once the final design was defined, we focused on how to improve the usability by adding features that could create a completely new experience for this redesign. The whole design is full of small new features, but these are the most important ones. These features are inspired by the Opportunities identified in the SWOT Analysis.
Current track, minimized.
Instead of a menu tab to go the Now Playing screen, SoundCloud shows a minimized version of it with quick options to pause or skip the current song or simply go back to the fullscreen mode.
Quick options, simplified.
Share a playlist or add a track to the queue just by tapping on the three dots in any content element and accessing the quick options. These options change depending on the category of the selected element.
Search experience, redesigned.
Searching is now an easy task. While typing, SoundCloud recommends results based on previous searches or popularity and also informs the category of each element with a simple icon.
DJ sets, redefined.
The coolest feature of the new design. SoundCloud is able to recognize songs inside DJ sets to redefine the way you discover music. The checkpoints in the playing bar show when there's a new song coming.
Final thoughts
With this project, I try to showcase the importance of the analysis phase and the user experience. The analysis of the existing SoundCloud gave the project clear goals in terms of navigation, interface design and possible opportunities to create new features. Focusing on the user experience we were able to improve those elements mentioned before and create a user centered approach.
Project Details —
A project like this is full of details and elements that take an important part in the final design, so here are some extra details that deserve to be shown.
Icons
All the icons were redesigned to keep with the consistency mentioned all along the process. It was important to create an icon family that could look like unified when it was displayed on the screen. Every icon was created based on a “pixel perfect” grid, to maximize the sharpness of the stroke and allow them to scale in any screen size.
New logo
As an extra task, we created a quick logo redesign to make it look simple and similar to the overall new design. We kept the cloud abstraction with smooth round corners and simplified the sound wave elements. This new logo was used to create the icons for different mobile operating systems.
HfG Schwäbisch Gmünd, Application Design — 2017