Musician APP/WEB
This app is a tool that is used to help fellow musicians connect. The goal was to make the connection process easy and enjoyable.
Role: Lead UX Designer for hypothetical product
The Problem
Currently, musicians have a difficult time finding other fellow musicians. Current music connections tools have cluttered information, plus comparing and keeping track of musicians is tough.
The Solution
This product aims to help musicians easily find other compatible musicians.
UNDERSTANDING THE USER
User Persona
Pat is an experienced musician who needs to find a band because he enjoys playing music with other people.
Age: 28
Education: Bachelors
Hometown: Derry NH
Family: Parents
Occupation: Cabinet Designer
Pain Points
Research Summarization
Most users play music as a hobby or as a part-time job. Most that want to meet with other musicians have a strong passion for music. After conducting interviews, I’ve concluded that users are frustrated when they get matched with incompatible Musicians. Users want to know the level of commitment that another musician is willing to make and where their passion for music lies. Users are frustrated with how cluttered the information can be on some music sites and how they can't compare and contrast other musicians.
Starting the Design
Site Map
For other music connect apps, the main issue was navigation. My goal was to separate and organize the information to make the information given clear.
Paper Wireframes
When wireframing, I kept in mind of the pain points, the needs of the consumer and made sure that the information was organized to promote easy navigation.
With the wider screens, I took advantage of the space by rearranging the information to help the consumer read through the page quicker.
Digital Wireframes
These profile cards give the user an easy to digest synopsis of the user. If the user wants to know more about a musician, all they have to do is click on the card, and it will take them to the user's profile.
Low Fidelity
To prepare for usability testing, I created a Low Fidelity prototype that shows how a user will connect with a fellow musician.
key Pages
page 1: Used to connect with musicians
page 2: Used to create and view profile
page 3: Used to Filter search results
page 4: Used to keep track of matches
page 5: Used to message user
Usability Study
After creating Wireframes and a Prototype, the next step was to do unmoderated usability. I asked 3 participants to complete different tasks in the app. The goal was to gather feedback from participants to figure out what in the design worked well or what didn't.
Pain points gathered from usability study
Refining design
Web Design Changes
What Changed?
Based on the usability study, I used contrasting colors to indicate when a button has been pressed. Changing the type input field shape allows the user to have an easier time distinguishing the different features. Both of these changes allow the user to easily and quickly understand the functions of the filter.
Before Usability Study
After Usability Study
What Changed?
Based on the usability study, I added a time of message sent to help guide the user. I also added an option to delete messages to help the user clean up the screen and stay organized.
Before Usability Study
After Usability Study
Phone Screen
Computer Screen
High Fidelity
This video visually demonstrates how a user would interact with the APP/Website.
Impact:
Users were happy with how intuitive and user friendly the app was. They liked how you could filter through musicians and that the information was based on a hierarchical structure.
What I learned:
I learned that even the smallest changes to an app can make a big difference in the overall experience.
Next Step
