NitroMusic App
This is a music sharing app created for users who are music lovers and would like to have the full music experience in one app by listening and downloading music, buying concert tickets and chatting with other music lovers.
Role
UX researcher, UX designer, UI designer
Client
Student Project for the Google UX Design Course
The Problem
People spend a lot of time switching through apps in search of music-related content. This also causes a decrease in storage space on their phones by trying to accommodate the different apps.
Responsibilities
User research, wireframing, user interface design, low and high-fidelity prototyping, usability testing.
Project Duration
May 2021 - July 2021
The Goal
To create a music sharing app for users to listen and download music, purchase concert tickets and chat with other users on the app.
Research
User research was conducted through online surveys. The app was originally supposed to be an app for a specific Music Artist / Group but 70% of people who took the survey said they will not be interested in having an app for just their favourite music groups or artists. This caused a change in the scope of the project and I decided to broaden the focus into a music sharing app for all music artists and groups. The pain points identified are as follows;
-
Users find it time-consuming to switch between apps to listen to music and buy concert tickets
-
Users felt it was hard finding the right kind of music to fit their mood.
-
Users who work in the music industry find it to be too expensive to deal with various organizations for artist promotions.
-
Users find it difficult to find people who have similar tastes in music.
Personas were created to define each user group and help build empathy.
Problem Statement
Ijeoma is a young outgoing student who needs a way to discover new music and get the latest music updates because she will like to spend less time searching for music-related content all over the internet
Problem Statement
Tumelo is a record label executive who needs an easy way to promote his artists’ songs because he will like to spend less money dealing with various organizations.
User Journey Map
A user journey map was created for the user flow of buying a concert ticket to help identify edge cases and to create an obstacle-free path for users.
Ideation
A competitive audit was conducted to identify the opportunities and gaps of the direct and indirect competitors in the music and ticketing industry. These competitors were Spotify, Soundcloud, Boomplay, Ticketmaster, and Backstreetmerch. The goal was to compare the user experience of their app and website.
Some opportunities identified were to provide a quick and easy way to search and make purchases, provide rewards or perks for returning users, provide a personalized playlist, and offer the ability to listen to songs offline.
Crazy 8's
The Crazy 8's ideation exercise was done carried out to get as many ideas as possible for the app.
Storyboards
A Big Picture storyboard and Close-up storyboard were created to help understand how the app will be used in the users' everyday life.
Big Picture Storyboard
Close-Up Storyboard
Wireframes and Low-Fidelity Prototype
Iterations of each screen of the app were drafted on paper and elements that will be well-suited to address the user pain points were marked using an asterisk. This was done till the main wireframe which will be used in the digital wireframe was created.
Paper wireframes
After creating paper wireframes for the app, iterations were made and refined in the digital wireframe format. I made sure to base screen designs on feedback and findings from the user research.
The home screen displays the different music categories for users to choose from and also the menu for navigation.
The Low Fidelity Prototype connected the menus and the main user flow of playing a song from the playlists and buying a concert ticket. View the Music Sharing App Low Fidelity Prototype
The swipeable feature for the music player makes it fast and easier for users to change songs.
Usability Study Round 1
An unmoderated usability study was conducted on the low-fidelity prototype in round 1 of testing where 5 participants took part in the study, The goal of the research was to determine if users can complete the core tasks in the app. The Key Performance Indicators (KPIs) measured were Time on task, conversion rate, and System Usability Scale. An affinity diagram was used to organize the findings of the research. These are as follows,
-
Users need more information to understand the pages in the app.
-
Users had difficulty finding their way around the profile page.
-
Users need more information about the ticket buying process of the app like a call to action in a better location.
Mockups and High-Fidelity Prototype
Early designs allowed for customization and the high-fidelity screens of the app were created. Based on the usability study findings, I created a better layout for the profile screen to make it easier for users to understand.
Before Usability Studies
After Usability Studies
Menu Screens
Usability Study Round 2
An unmoderated usability study was conducted on the high-fidelity prototype in round 2 of testing where 5 participants took part in the study, The goal of the research was to determine if users can complete the core tasks in the app. The Key Performance Indicators (KPIs) measured were the same as the previous round. The findings are as follows,
-
Users had difficulty knowing whether to select “add to cart” or “buy now”.
-
Users need a way to know how many songs are in a playlist.
I changed the “add to cart” button so users can easily select the most important action.
Before Usability Studies
Before Usability Studies
After Usability Studies
After Usability Studies
I changed the “Play All” button to increase the amount of space for me to add the total amount of songs in a playlist
The High Fidelity Prototype connected the menus and the main user flow of playing a song from the playlists and buying a concert ticket. View the Music Sharing App High Fidelity Prototype
Music Player Screens
Ticket Purchase Screens
Promo Videos
Accessibility considerations
-
The colour palette passed the WCAG 2.0 for both AA and AAA.
-
I used icons to help make navigation easier.
-
I used detailed imagery for songs and playlists to help all users better understand the designs.
Takeaways and Next Steps
The app makes users feel like they’re in control of their music. One quote from peer feedback says “The app made it so easy for me to multitask by having these features all in one app. I’ll definitely be downloading this app if it launches”.
I learned that the design process is not just a straight line. With each usability study and iteration, the design gets better and closer to solving a user problem.
The next steps will be to conduct further research to determine any new areas of need and to conduct another round of usability studies to validate whether the user pain points have been addressed effectively.
