Unveiling an Intuitive Mobile Music Experience for Seamless Melodic Journeys

My Role

UI/UX Designer

Tools

Figma

Year

2022

Overview

In the realm where music enhances daily life, I’ve undertaken the task of designing a mobile music player, acknowledging the challenges faced by users in media player applications. Engaged as a freelancer, I collaborated with a small dev team, emphasizing minimalism in wireframes to ensure intuitive organization (albums, favorites, playlists). Crucially, the project’s confidentiality necessitates withholding the actual music player’s name, underscoring a discreet yet impactful approach to address typical challenges.

Typical issues on a Media Player:

  • Complex Navigation: Navigating through the various options and menus of a media player can be confusing, particularly for users who are not tech-savvy.
  • Poor User Interface: A poorly designed user interface can make it difficult for users to find and manage their music collection.
  • Limited Customization: Users often want to customize the appearance and functionality of their media player, such as changing the theme or adding new features, but they are unable to do so.
  • Accessibility: Users with varying levels of technology skill and ability may face accessibility issues while using a media player.
  • I’ve looked over different stores and saw that almost all music players were very bloated or had a very outdated interface, so I wanted to design some fresh, modern but very minimalist UI.

User Persona

Meet Sarah

Sarah is a busy marketing coordinator who commutes to work by public transport.

She is 24 years old and works as a Marketing Coordinator.

Sarah technology skill level is moderate.

Needs and Goals

Want to listen her favorite music using her smartphone during her commute and running sessions.

 

Sarah prefers streaming services.

 

The Music Player must recommend her new music.

Behaviour

She has a daily commute and has a full time job for 10 to 18.

 

From time to time she is running in the nearby park.

 

She likes to discover new music through curated playlists

User Flow

A user flow is a visual representation of the steps that a user takes to complete a task on a website or app. It is a way of understanding how users interact with your product and identifying any areas that may be causing problems.

Wireframes

A wireframe is a low-fidelity, visual representation of the layout of a website or app. It is a quick and easy way to sketch out the basic structure of a page without worrying about the details of the design. Wireframes are often used in the early stages of the design process to help designers and stakeholders collaborate and get feedback on the layout of a page.

 

I’ve meticulously crafted wireframes, emphasizing minimalism while empowering users to organize music seamlessly—be it by albums, favorites, or playlists. The user-centric design extends to account creation, ensuring access to favorite tunes across devices.

Typography

For this project, I chose a sans serif font named Noto Sans because it is a high-quality, open-source font that is available in over 1,000 languages. Noto Sans is a versatile font that can be used for a variety of purposes, from headlines to body copy. It is also easy to read on screens and in print.

Colors

I also considered color blindness when creating the colors. The following are the outcomes of the Adobe Colors – Color Blind Safe Tool:

Prototype

Prototype is a working model of a product that can be used to demonstrate and test the product’s functionality and user interface. In the case of this particular design, the prototype showcases the various features and interactions of the app, allowing users to see how it would look and feel in action. By providing a tangible representation of the design, the prototype helps to communicate the project’s vision and provides valuable feedback for further development.