Legato
A social application made for musicians with collaboration in mind.
Role
UX Researcher, UI/UX Designer
Tools
Sketch, Adobe Illustrator, InVision Studio, Miro
Duration
3 Months
Problem
There is no concise way for musicians to meet with other musicians. The tools musicians currently use are too broad and don’t facilitate in creating a connection between users. I wanted to create something more personable, something that showcases a musician’s personality and allows them to engage in meaningful connections.
Discovery
I’ve identified what problems musicians face when searching for people to work with and what their primary influences are when choosing a musician through secondary research, competitive analysis, and user interviews.
Competitive analysis was applied to: Flint, BandFriend, Vampr, and Bumble.
SYNTHESIS OF USER RESEARCH
Participants included musicians that have experience working with other musicians. I wanted to gain insight on these questions:
What is your usual process when it comes to looking for other musicians to work with?
What do you look for when picking someone to work/play with?
What information would you like to see when searching for a musician?
KEY INSIGHTS
Collaborations are usually created based on similar taste in music and creative vision
“Choose friendship over musicianship”, Most participants believed that personality is more important than musicianship, so they’d like to be able to see the other musician as a friend
Profile descriptions usually include: music position, genre, favorite artists/influences, and samples of own music (age and location varies depending on the user)
AFFINITY MAP
I took the information gathered from the interviews and mapped them out into an affinity map.
HOW MIGHT WE…?
From the information gathered, I formulated these How Might We questions:
How might we provide a personable way for musicians to connect?
How might we present a profile for musicians that best represent them?
How might we help streamline the search for other musicians?
How might we provide a way for musicians to share their work?
How might we provide a safe environment for musicians to meet with other musicians?
PERSONAS
I generated two personas from the information gathered from the user interviews, Local Amateur and Remote Veteran.
Ideation
After doing research and interviews, I mapped out potential user stories and goals to help solve the How Might We questions. Stories highlighted in green signifies the application’s minimal viable product (MVP).
SOLUTION
The goal of the application is to streamline the process of searching for a musician to collaborate with. Given the MVP user stories, I finalized these key features of the application:
1. Comprehensive profile generation that best displays the user’s musical style and skill
2. Filtered search capabilities
3. Messaging system to create connections
4. Favorites system to keep track of standout profiles
SITE MAP
USER FLOWS
I created user flows for 3 major red routes based on the information gathered from the user interviews. I focused on how a new user would create a profile and what actions they would take when searching and picking for a musician to work with.
Design
SKETCHES
I started off designing my red routes with some paper sketches, drawing up the screen designs for the onboarding process and the following application screens. These sketches set up the foundation for my wireframes.
GUERILLA TESTING
After designing my low fidelity sketches for the red routes, I put them to the test with 5 rounds of guerilla testing. The designs were tested with users from the target user group: musicians. This was to see how users react to the designs and understand how they interact with the current user flow. Feedback from the users was taken to account in the next design updates.
KEY INSIGHTS
Some participants felt that a heart icon for Favorites is too closely associated with dating applications
Some participants had trouble connecting the plus icon with filtering in the search bar on Discover
Participants commonly ignore the informational page when on the onboarding screens
LOW FIDELITY WIREFRAMES
Following the guerilla testing, low-fidelity wireframes were created based on the feedback from the participants.
BRAND & STYLE GUIDE
A brand identity was created for the application. The name Legato was given because, in music terms, legato is a notation in music for musical notes to be played smoothly and connected. I want that to represent how my application “smoothly connects” musicians together. As a brand, I wanted Legato to be a shared space for musicians to showcase their unique talents.
HIGH FIDELITY WIREFRAMES
High Fidelity Wireframes were then designed with the brand standards in mind.
Testing
1ST ROUND OF USABILITY TESTS
The first round of usability tests was conducted to identify usability errors and issues in the first iteration of the prototype. Five moderated usability tests were conducted to identify pain points and gather feedback from users. Each participant was given a list of objectives to complete.
Objectives
Complete the onboarding process as a new user
Describe what is shown on the first profile on the Discover page
Search for a profile that contains “band”
Favorite the first profile on the Discover page and navigate to the Favorites page
Send a message to the first profile and navigate to the Messages page
1ST ROUND TEST RESULTS
From the first round of usability tests, all participants had no problems with the search and messaging features. However, some areas for improvement were exposed. The table on the right tallies the usability by severity and task.
Takeaways
A few participants preferred to be able to add more than one song on their profile, to show a variety of their musical skills
Recommendation: Add the ability to add multiple songs to their profile
See more button was commonly missed on initial view
Recommendation: Add an icon to the see more button so that it is more noticeable
Some participants noted that full favorites profiles would be too overwhelming if they have too many (10+)
Recommendation: Add a toggle to switch views between full profile cards and previews
ITERATIONS
For the user profiles, I added a down arrow icon to the “see more” link so that it would be more noticeable for the user and gave them the ability to add multiple songs to their profile. For the Favorites page, I added a toggle to condense and expand the user profiles depending on how much visibility the user wants and added a Sort By feature to allow the user to sort the profiles.
2ND ROUND OF USABILITY TESTS
The second round of testing was done with 3 more participants. All tasks were completed with little difficulty and overall performance showed better usability compared to the first round of testing. Participants also gave additional feedback.
Takeaways
A few participants would like to be able to search/see a user based on what category they are looking for
One participant mentioned that it would be nice to be able to put their favorites into groups for more organization
Retrospective
Summary
After much research, design, and testing, I created a product that I am proud of. I was able to create a product to help musicians find other musicians with their perspectives in mind. I loved interacting with the users to understand their needs and applying my creative side in the design process. Every person I had interviewed said that they’d love to see this product in the market.
Lessons Learned
I learned how important user feedback is in the design phase and to be adaptable in all situations as some users could have different opinions. I needed to be able to focus on the features that are important to the user and not get lost in various ideas. I learned to create designs that are understandable for everyone.