Frame 129.png
MOCKUP2.png
Group 7.png

Context

Based on Career Foundry
UI student program.
My job was to define a mobile music app inspired by the 80’s, that included a clear digital UI and branding direction.
Primarily for 35 to 55 year old audience, allowing 3 viable key functionalities.

Search & analyze of similar music app
Defined Key functionalities
Visual design inspiration board
Low-to mid fidelity 4+ wireframes
Creation of UI element and Icons
Color palette & Typography stylesheet
Useflow
High-fidelity wireframes

 

Role
UI design

Tools
Figma

Timeline
1 month (Part-time)

Goal

01
Go in depth with UI tools learning.
02
Appropriate use of mobile design patterns.
03
Avoid visual overload : Establish a consistent visual contrast & hierarchy.
04
Create a smooth user experience.

Competitor research

I conducted a search and analysis of similar music apps by :

CR1.png
CR2.png
CR3.png
CR4.png
CR5.png
CR6.png
CR7.png

Key functionalities

Key functionalities

Defining main key functionalities for a minimum viable product experience.
Assimilate UI fundamental and tools technics efficiently.

KF4.png

The sign in gathering input is the first impression of a mobile product. How this pattern looks and works will be directly related to the kind of task at hand.

KF1.png
KF5.png

The search pattern offers solutions for data to be found easily. Designing an effective user-friendly search pattern is key to helping users quickly locate specific content. In the context of the music app, it will allow to use a consistent pattern for multiple searching tasks : artists, albums, tracks, playlists and more.

KF2.png
KF6.png

Another way to deal with data & data management patterns is to give the user the possibility to collect and organize their own music preferences into playlists.

KF3.png

This is a great way to improve users’ interactivity, engagement, and behaviors. By creating a playlist, users can engage socially with other users: share, save, or like the content.

On the user experiencespoint of view, it might help the product design team to improve the user needs.

Final result

80’s music mobile app
FN1.png

Final result

Sketching a lot and understanding visual patterns, helped me to complete an optimized UI design for this project.

The most challenging part was to find the right colour palette that would allow clear readability of the typography and great incorporation of the images into the design.

This project has been re-iterated after the hand-off because it was the first project of the program and I wanted to show a better version of its process making and UI details.

Thank you!