top of page
iPhone 12 Pro.png

Music Player Redesign

The Prompt

Music streaming services have won user's hearts since their inception. First there were platforms such as Napster and Limewire, however nowadays you can catch most users using newer applications such as Spotify, Apple Music, and Pandora to listen to their favorite tunes. Although these programs provide the same service, each of them utilize a different UI to make their user's experience both efficient and intuitive. With this in mind, I set out to create my own music player that prioritized user's needs and goals.

icons8-person-64 (1).png
Solo Project
icons8-clock-96.png
1 day
icons8-devices-100 (1).png
iOS Mobile App
icons8-hammer-90.png
Figma, Invision, Adobe XD

The Design Process

Discover

search-3.png

  • Research

  • UI Analysis

Ideate

light-bulb-2.png

  • UI Inspiration

  • Sketching

Prototype

design-tools-2.png

  • Low Fidelity 

  • High Fidelity

  • Final Prototype

 — Discovery

Competitive Analysis

Since there are already various music player applications, I decided to take a look at the most popular ones at the moment, to see what I could learn from their designs.

Spotify

Group 2.png

  • 165 million users

  • Released in 2011

Apple Music

Group 3.png

  • 88 million users

  • Released in 2015

Pandora

Group 1.png

  • 8 million users

  • Released in 2005

UI Analysis

The next step in my process was analyzing each music player individually. Although they each look quite similar at first glance, I took into consideration what differences separated them from one another as well as what they had in common. This allowed me to assess what functions and features would be absolutely necessary in my design.

Frame 2.png

Spotify

Pandora

Apple Music

Main Functions

Play/Pause

Song Title

Album Cover

Previous/Forward

Artist Name

Time Elapsed

 — Ideation

UI Inspiration

After identifying the necessary functions of my design, I began to seek out inspiration for the interface before I began wire-framing. I found inspiration from the most popular wireframes mentioned previously in addition to other existing designs as well. I then placed images that captured certain features, designs, and concepts that I wanted to incorporate into my design into an inspiration board hosted on Invision.

uiinsdwo.png

Sketching

The next step in my process was to start drawing several sketches of the screens I needed. Sketching before I begin wire-framing allows me to use the inspiration I have gathered in a more experimental way, here I can brainstorm new ideas and try out different layouts.

Currently Playing Screens

Scanned Documents 9-1.png
Scanned Documents 10-1.png

Up Next Screens

Up Next-1.png
Scanned Documents 11-2.png
Scanned Documents 11-1.png

 — Prototype

Low Fidelity Wireframes

After getting my initial ideas and concepts out on paper, it was time to begin reconstructing my sketches into wireframes in Figma. I began by creating low fidelity iterations, which use a greyscale color palette to ensure the design's functionality is not dependent on colors, and instead utilizes consistent and familiar design to provide an intuitive experience to the user.

13 Pro - 1.png
13 Pro - 4.png
13 Pro - 3.png
13 Pro - 5.png

Currently Playing​

Currently Playing​

Up Next

Up Next

During the wire-framing process I experimented with several iterations of both the "Currently Playing" and "Up Next" screens. In the end it came between the 2 versions of each screen that are pictured above, I picked the following screens based on what would be the most instinctual to the users which involved using my observations from my UI Analysis and UI Inspiration Board to determine the most familiar layout.

High Fidelity Wireframes

After finalizing my low fidelity wireframes, I could begin the high fidelity version. This involved injecting colors, images, icons, and details onto the frames. 

13 Pro - 13.png

Song Title

Artist Name

Time Elapsed

Group 34.png

Pause/Play

Group 28.png

Up Next Menu

Previous/Forward

Add to favorites

Album Image

Additional Screens

13 Pro - 4.png
13 Pro - 5.png
13 Pro - 9.png
13 Pro - 7.png

High Fidelity Prototype

Now that I have demonstrated my design process, I invite you to test out the working prototype of my Music Player Redesign! View the demo video below or navigate through the prototype yourself by clicking the 'View Prototype' button.

Prototype Demo

Key Learnings

Don't Be Afraid to Get Inspired

as a designer it can be tempting to innovate previous designs, however it is important to know when to draw on inspiration from what has already been proven to work.

Prioritize Functionality

creating user-centered designs means taking into consideration how users will interact with your product in every step of the design process.

Familiar Design

including components in your design that mimic other designs or functions will allow users to use your designs in an intiuitive and efficient way

bottom of page