Bringing the World's Musicians Together
Bringing the World's Musicians Together
Embedded Files
Tune is an app that brings together all of the world's musicians in one place, allowing the user to find the right artist for their needs.
Project Overview
The Problem
Users were not able to enjoy their family functions as the musicians were not up to their needs.
The Goal
Create a Tune app that allows users to book musicians depending on their specific requirements.
My Role
UX Designer designing an app for booking a musician
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
UNDERSTANDING THE USER
User Research
Summary
I conducted interviews and created empathy maps to understand the users. I’m
designing an app for their needs. A primary user group identified through research was people who would like to enjoy their family functions through music.
This user group confirmed initial assumptions about Tune, but research also revealed that this is not the only reason. But most of the users also want to showcase them or to make their function a memorable one.
Pain Points
Enjoy - People are not able to enjoy functions through the music
Accessibility - Mostly many users were not able to find the best musicians nearby them
Cost - Even while musicians were available, their rates were prohibitively expensive.
Personas
Persona - 1
Persona - 2
Problem Statement of Persona-1
Priya is a student who is frequently irritated by loud and rowdy music and prefers that their functions be held with calm and humble music.
Problem Statement of Persona-2
John is a lawyer who likes rap and gaming music but prefers emotional music for their functions.
User Journey Map
Mapping Priya’s user journey revealed how helpful it would be for users to have access to a dedicated Music World app
Starting a Design
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy booking process to help users save time.
Close Up Story Board
The sketches in each panel concentrate on the product rather than the user experience. Here is a Close Up Storyboard for our Tune App.
BigPicture StoryBoard
It thinks about how people will use the product throughout their day and why that product will be useful. Here is the Bigpicture StoryBoard for our Tune App.
Digital WireFrames
A wireframe is a diagram or a set of diagrams that consists of simple lines and shapes representing the skeleton of a website or an application's user interface (UI) and core functionality.
Here are two examples of digital wireframes created with Figma.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and booking a musician, so the prototype could be used in a usability study.
You can access the Digital WireFrames and Prototype Here :-www.figma.com/file/KZnMfAn8TrOk5lpDjYrSa1/App-Prototype?type=design&node-id=3%3A2&t=KWRH1sKGBwxqaWmB-1
Usability Study
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Here is a usability study that was conducted and recorded the findings in an Excel sheet
Here is an affinity diagram that recorded the findings in a Jamboard
And the Round 1 findings and the Round 2 findings are shown below
Round 1 findings
User wants to book a musician quickly
User needs options for booking
User wants a location option
Round 2 findings
Users want to go to their profile and edit.
User wants to keep the current location
Refining the Design
Mockups
A mockup is a static wireframe that includes more stylistic and visual UI details to present a realistic model of what the final page or application will look like.
Here are some Mockups and the Mockups that are refined after the usability study.
Early designs allowed for some customization, but after the usability studies, I added additional options to go to the profile and can edit. I also revised the design so users see all the options when they first land on the screen.
The second usability study revealed frustration with the location. o streamline this flow, I consolidated the Location by adding a “Current Location Option” to it.
High-Fidelity Prototypes
The final high-fidelity prototype presented cleaner user flows for booking a musician and checkout. The Prototype can be accessed here : www.figma.com/file/KZnMfAn8TrOk5lpDjYrSa1/App-Prototype?type=design&node-id=87%3A4&t=LY5e0Qd8zAVlmZ0t-1
Accessibility considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Used detailed descriptions of each musician for their clear understanding.
Going Forward
Takeaways
Impact:
The app makes users feel like Music World really thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy and fun to book my own musician for my family function so that I can enjoy a lot through the music.”
What I learned:
While designing the Music World app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Page updated
Google Sites
Report abuse