UI/UX CASE STUDY: MUSIC APP DESIGN

THE PROJECT

Design a music player. Consider the controls, placements, and imagery, such as the artist or album cover. Also, consider the device type that’s playing the music. A dashboard in a tour bus, a smartwatch, or via a web browser. Each device type will have different requirements, features, and restrictions to consider.

Task Breakdown:

1. Design a music player for mobile phones, websites, smartwatches, and tour bus dashboards.

2. While designing, put into consideration the requirement for each device type, features, controls, placements, and imagery (for the artists and album cover).

THE TEAM:

The Elegant Ten is SideHustle’s Bravo clan Product design team 2. The team has 10 members, all of whom were actively involved in the UX and UI design of the product. The names of the members are:

Oghenegare Isaac Asaevwe (team lead)

Salami Tokunboh

Kolawole Ibrahim

Muslimat Alausa

Anthony Okeke

Frank Offodile

Aderibigbe Ayomide

Tolushe Igbalasanmi Esther

Kingston Solomon Enoch

Alexander Arifayan

BACKGROUND:

Music is regarded as an art of sound in time that expresses ideas and emotions in significant forms through the elements of rhythm, melody, harmony, and colour. It is an important part of our lives as it plays a huge role in expressing feelings and emotions. Music has been brought closer through technology and its many perks.

THE PRODUCT: MUSICLIP:

Musiclip is a music streaming app and player that allows its user to surf through songs, download songs, and create playlists as well as share songs and playlists. This is an app with mobile (smartphones) and website versions (tablets and computers) that subsequently works on other devices like smartwatches and tour bus dashboards. Musclip enables music lovers to access a vast variety of music.

TIMELINE: 5 days

TOOLS: Figma, Figjam and Google form

OVERALL GOAL:

To design a music player app that users would find easy to use and navigate on any device.

Target audience: listeners of music and users of music player app

OBJECTIVES:

Taking into consideration the purpose of the app, the following objectives were set out:

1. To create an aesthetically pleasing, user-friendly app
2. To create a music app with mobile and website versions that also functions just as well on a smartwatch and tour bus dashboard.
3. To have features that will improve users’ experience on the app.

These features include:

1. Welcome message
2. Translation feature
3. Share button
4. Themes

DESIGN PROCESS: DESIGN THINKING:

The design thinking process was adopted in the course of this task. Design thinking is a process for solving problems by observing, with empathy, how people interact with their environments and employs an iterative hands-on approach to creating innovative solutions.

1. EMPATHIZE

Through empathy, we were able to observe and analyze the user's needs and experiences with their respective music apps. This was achieved through user research.

USER RESEARCH

An online survey was done using Google Form to understand the users. The objectives of the research were

1. To know the type of music app they use
2. To know the features they like and dislike on the app
3. To understand their needs and pain points.

RESULT

A total of 13 responses were obtained from the survey. The questions with their answers are:

1. Do you have a Music App?

2. What is the name of the Music player App?

3. How often do you use it?

4. Is it easily navigable?

5. What are the problems you experience while using your Music Player app?

6. What Features do you Love in Your Music Player App?

7. Do you have any features you will love to have to be added? If you do please list them.

2. DEFINE: from the data obtained from the survey, the list of users’ pain points are:

1. The music app isn’t easily navigable
2. The app has no lyric translation for non-english music
3. Unable to share songs
4. Lack of a dark theme
5. Ability to mark many songs when adding to a playlist
6. Absence of a welcome message

User Persona

3. IDEATE AND PROTOTYPE: at the ideation stage, we brainstormed on how the features the app would have and its overall look. The ideas chosen were based on the users’ needs and pain points.

Information Architecture, users’ workflow, and low, mid, and high-fidelity wireframes were designed.

USER FLOW

WIREFRAME

PROTOTYPE

MUSICLIP FEATURES

1. Log in and registration page
2. Search button: enables users to search for songs
3. Navigation: the app has clear navigation and interface
4. Music categorization: Musiclip is so flexible that songs are categorized based on artists, albums, genre, recently played, favourites.
5. Music collection: Musiclip enables users to curate playlists based on artists, albums, and genres.
6. Music player: with this feature, users can play and shuffle between songs, and download and share songs.
7. Homepage and Menu Option: the mobile and website version of Musiclip has a homepage where users to easily access other sections like recently played, genre, albums, artists, etc. Other pages have the menu option too. Therefore, the app is easily navigable
8. Download/Save option: no doubt, this feature would ease users’ experience. Users can easily download songs with the download button on the play section and access songs offline.
9. Sharing Option: the app has a share button to allow users to share all kinds of music with friends on social media platforms.
10. Lyrics and Translation Button: not only do users want to listen to songs, but they also like to read and learn the lyrics of songs. On Musiclip, users have access to the lyrics of songs and also translation to English for non-english songs. This feature is only available on the mobile version.
11. Ability to stream on other devices: Musiclip enables its users, to stream songs on multiple devices. It is available on smartwatches, mobile phones, websites, and dashboards of a tour bus.
12. Download button: Users of Musclip have access to music offline, this feature allows users to download songs.
13. Theme: This feature enables users to change the default theme of the app to a dark theme and any colour of their choice. The dark theme reduces blue light exposure and also conserves battery.
14. Welcome message: every time users log in or open the app, there is always a welcome message on the homepage of the website version.
15. Podcasts: users of Musiclip can create and listen to podcasts.

MOCKUPS