Music App Redesign

mobile app prototype

Fall 2016

Timeline: 2 Weeks
My Role: User Researcher, UI/UX Designer, Visual Designer
Tools: Adobe Photoshop, InVision

Methods: User Interviews, Competitive Analysis, Rapid Prototyping, Wireframing

How do you make something that is "good" even better?

There are plenty of music streaming apps that currently exist, but none that totally knocks the others out of the waters. Two other UCSD students and I, enrolled in UCSD’s COGS 187A: Usability and Information Architecture, set forth to design everyone’s dream music streaming app with consideration of the apps that are used now.

The design process included user interviews, comparisons of user experiences and workflow, competitive analysis, and finally the redesign (from low fidelity to a working prototype). I participated throughout the whole process but especially specialized in the actual creation and design of the prototypes (drawing out on paper and creating all the screens in Adobe Photoshop for InVision).

View our functional InVision prototype here.

1/6

User Interviews

To first get a feel of what type of users exist and what their music listening habits were, we interviewed 9 fellow UCSD students who actively used music streaming apps. The interviews were structured around a list of main questions which prodded the users to reveal their needs and uses for the music streaming app. We also went further with think-alouds to observe how users create, manage, and share their music content to take note of the flow or potential glitches. Ultimately, we collected a handful of user case scenarios and a list of user likes and dislikes for their current music streaming app of choice. This information would later on aid us in our design decisions with creating an adequate music streaming app.

Comparisons of Flow

With pointers from the user interviews, we compared different aspects of music streaming apps side-by-side (mainly centered on scenarios of creating playlists, managing playlists, and sharing playlists). We realized the existing apps were already decent in what they do, but were able to distinguish “good” from “less good” in user experiences and workflows from those scenarios. We would later use the better workflow in our redesign.

For example: Creating a playlist from the playlist page

Competitive Analysis

Upon closer inspection, the navigational structures of music apps is something that involves a lot of design decisions- what should the labels be so users understand what they are, where should items be placed in order for users to find them… and so forth. The more functionality a music app has, the more intricate their navigational structures are. To get an idea of how organization works in a music app, we created hierarchical sitemaps with key page details for Spotify, Soundcloud, and Google Play. From these sitemaps, we learned where it is most natural to place items as well as what to label things.

Example: Spotify sitemap

Redesign

Rather than recreating a whole app, we redesigned according to scenarios gathered from user interviews from before.

The scenarios we focused on for our redesign were:
1. Creating a playlist for a specific artist to familiarize themself to prepare for a rave
2. Deleting songs from a playlist that the user no longer likes

We began with sketching out different screens of the app on paper and made design decisions along the way:

After confirming most of the design decisions on the paper sketches as a group, I created the app screens in Photoshop and then imported in InVision. View our functional InVision prototype here: https://invis.io/PX9L4RQE9

Major homepage decisions:

3 main sections of commonly desired functionalities: “Recently Played”, “Recommended for You”, “Trending Among Friends” to reduce clutter
Stream option (similar to Soundcloud) because sharing music with others is an important social feature as well as a key component of successful music apps
Navigational bar at the bottom narrowed down to “Home”, “Search” and “My Music” to show the most often used features, which provided sub-levels for other pages
Categories on the home page would be more personal to the user while the ones on the search (browse) page would be more general (ex: “Recommended for you” vs. Charts and Trending”

Major Creating Playlists decisions:

Search results divided into grouped sections (People/Albums/Songs/Playlists)
Giving users the option to either go to a newly created playlist or back to the user’s original location

Major managing playlists decisions:

Separating user-created playlists from liked playlists for clarity and easier editing purposes
Confirmation statuses for adding and deleting songs that were clearer (ex: popup after a song was added to a playlist that allows users to choose between going to the playlist it was added to or back to the page where they interacted with the song)

Major general decisions:

Naming “People” as a category in “Search” and “My Music” because of the fact that it can include both artists and friends without being vague
Reduction of album cover on album/playlist pages to show users songs without scrolling down

Conclusion

I never truly realized how complicated information or navigation architecture could really be until I faced the intricacies of a music streaming app. The most challenging part of this project was to find even better ways to do things than from what already exists and then basing design decisions off of that. Our final redesign of a music streaming app is something that we hope will fulfill every user’s needs, but doing so in a sleek and intuitive way even moreso than the technologies that exist now. From the redesign project, I’ve learned industry approaches to problems of design beyond just how an app looks while getting more practice with industry tools for UI/UX design such as Photoshop and InVision. I’m looking forward to further put my design and Photoshop skills to work!