Music Player Mobile App

Role: UI and Visual Design

Timeline: 1 month (Jan 2020)

Overview
Music has always been a huge part of my life. It helps reducing stress, improving my mood and ability to focus on tasks. As I enjoy listening to different types of music based on how I feel and what I am doing, I like using music player apps to help me with exploring playlist and broadening my musical horizon.
Context
While pursuing my UI Design Certification at Career Foundry, I was tasked to create an intuitive and engaging mobile user interface that evolves users’ emotions. Music player app has come on top of my mind - I was motivated to create a visual-appealing and easy-to-use music app!
Challenge
The challenge was to create an intuitive mobile user interface that evolves user’s emotions with engaging visual design.
Tools:

Sketch, Adobe Illustrator

Deliverables:

Low-to-Mid Fidelity Wireframes, Icon & Logo Design, Final Design Mockup

Design for the future, while balancing your design with your users’ present stage of skills and mind set.
- Raymond Loewy
MAYA Principle

The Process

01 Define The Problem
Raymond Loewy’s MAYA Principe has taught me the importance of creating advanced designs while balancing users’ well-known present. To identify common patterns that users are familiar with, I analyzed the design and app structure of existing music apps on the market to identify the key functionalities - my design problems for the project. I then determined the appropriate UI patterns to help me with solving each problem.
Key Functionalities & UI Design Patterns
02 Ideation
Low-Fidelity Wireframes
Mid-Fidelity Wireframes
03 Visual Design
Icon Inspiration
Rounded corners and lower cases are used in logo and icon designs to bring friendliness to the app. Evolving an inviting and engaging vibe.
Logo Design
Icon Design
Color Palette
I decided to use a purple hue as the dominant color of my music app, as purple evokes sensuality, and is associated with creativity and individuality. I think this strongly aligns with the functionalities of my music app and the emotion I wanted to create - I wanted the music app to be inspiring and personalized.

I added a bright aqua color as an accent colors to complement the violet-purple, creating a color palette in a cool tone. The Gradient added energy and vibrancy.

I created a neutral color palette made of different shades of grey to complement the vibrant color palette. These neutral colors are primarily used for text copies and background in the app.
Typography
I paired Nunito, a rounded terminal san serif with Proxima Nova, a non-rounded terminal san serif to create contrast between headers and texts.
04 User Interface Design
Landing Screens

Introduce users to the app. Users can
create a new account or log in through their email, Google or Facebook account.

Landing Screens

Introduce users to the app. Users can
create a new account or log in through their email, Google or Facebook account.

Personalization
Profile Setup

Users can share their music preferences and favorites to receive personalized music experiences.

Home Screen / Feed

Users receive customized playlist recommendations based on their profile, browsing history and listening activities.

Recommendations
Search

Users can search and discover music by typing in keywords in the search bar or by categories like Artists, Genres, Activities and Moods.

Discovery
Organization
Library

Users can organize music by creating playlists based on listening habits and preferences. A summary of music collection and activities is available on their profile dashboard.

Social

Users can meet and connect with like-minded music enthusiasts.

Social Networking
Music Streaming
Minimized Music Player

Allow users to continue
browsing and discovering
while enjoying music.

Music Player

An interactive music control panel allows users to play music, and navigate between playlists, albums and artists.