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 :
Key functionalities
Key functionalities
Defining main key functionalities for a minimum viable product experience.
Assimilate UI fundamental and tools technics efficiently.
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.
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.
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.
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
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.
