CASE STUDY
BandLab Application Design
Many musicians seek to collaborate with others on projects or form bands, however they often struggle to find partners that share their vision, proficiency and goals. BandLab seeks to connect music creators with compatible collaborators, fostering a vibrant community of artists who work together.
ROLEProduct Strategy, UX Research, UX/UI design, Visual Design, Project Management.
User Interviews
Affinity Mapping
Competitive Analysis
Storyboards
Task flows
User flows
Wire flows
Sketching
Wireframes
Prototyping
Usability Tests
A competitive analysis explored existing solutions and helped refine the value proposition, it revealed the following about the market:
- Many musicians use community boards and social media platforms (Reddit and CraigsList) to find collaborators, however these platforms do not offer a tailored solution specifically for the purpose of finding like minded partners.
- Many existing solutions are exclusively targeted towards professionals, therefore inaccessible to amateur and aspiring musicians.
- Some existing solutions are bundled within expensive proprietary software, making it harder to access for amateur musicians.
Therefore, an opportunity exists for an easy-to-use solution that helps connect both aspiring and professional musicians.
I developed a research plan, screener and field guide, conducting five, 45 min long 1:1 user interviews with professional and amateur musicians. A supplementary Google Survey with 33 respondents, identified the following pain points and needs in the target user group:
- Successful collaboration requires similar musical tastes and interests.
- Successful collaboration requires complementary skill-sets and proficiency.
- Successful collaboration requires an alignment of goals and commitment.
- Successful collaboration requires compatible personalities, openness to feedback, flexibility, organization and responsiveness.
With this in mind, a feature set was developed to help users reach their goal of finding collaborators:
- User profile: a public facing page describing a user’s capabilities, goals, and interests.
- Search engine: used to search profiles by genre, goals and skill sets.
- Search results list: used by users to narrow and evaluate profiles.
Three personas and journey maps were created, concentrating on the goals, tasks, and pain points of the target users. This groundwork facilitated the development of task and user flows and supported the ideation phase. At this point, given the time constraints, the project's scope was narrowed to focus on amateur musicians.
Optimized User Journey Reveals Opportunity for Enhanced Collaboration Matching
A sprint map flow was developed to uncover key steps in the user journey like creating a profile page and searching for partners. A key step and opportunity emerged: What would users need to evaluate other musicians? And could the platform match compatible collaborators and filter out incompatible ones for the user?
A sprint map flow was developed to uncover key steps in the user journey like creating a profile page and searching for partners. A key step and opportunity emerged: What would users need to evaluate other musicians? And could the platform match compatible collaborators and filter out incompatible ones for the user?
Comprehensive User Flow Design Integrates Onboarding, Profile, and Matching Processes
A detailed user flow outlined the steps for each feature and connected them, including an onboarding questionnaire based on key collaboration attributes from discovery research. These attributes would be used to match compatible users via search. Secondary flows, such as account creation, search result filtering, profile editing, photo adding, and contacting collaborators, also emerged.
A detailed user flow outlined the steps for each feature and connected them, including an onboarding questionnaire based on key collaboration attributes from discovery research. These attributes would be used to match compatible users via search. Secondary flows, such as account creation, search result filtering, profile editing, photo adding, and contacting collaborators, also emerged.
Defining Key Interactions In The Happy Path With Wireflows
I then started fleshing out screens by mapping out the happy path, from completing the questionnaire to contacting a potential collaborator, with wireflows. Key actions were added to the wireflows, such as saving, filtering capabilities, and search box criteria, creating a framework for more detailed screens.
I then started fleshing out screens by mapping out the happy path, from completing the questionnaire to contacting a potential collaborator, with wireflows. Key actions were added to the wireflows, such as saving, filtering capabilities, and search box criteria, creating a framework for more detailed screens.
Refining Screen Details and Generating Ideas with Sketches
Additional sketching helped generate ideas and further establish the interactions, functionality details, and relative content priorities needed for each screen and it’s components. The wireflows and sketches established a basis for a detailed prototype.
Additional sketching helped generate ideas and further establish the interactions, functionality details, and relative content priorities needed for each screen and it’s components. The wireflows and sketches established a basis for a detailed prototype.
Mid-Fidelity Prototype Developed for User Testing and Concept Validation
To test the sign-up, questionnaire, profile creation, and search flows, I quickly developed a mid-fidelity prototype based on my sketches. I skipped low-fidelity wireframes as I had gathered substantial peer feedback on the sketches. This approach allowed me to test user flows, words, and visual elements, providing extensive feedback on the entire app experience.
To test the sign-up, questionnaire, profile creation, and search flows, I quickly developed a mid-fidelity prototype based on my sketches. I skipped low-fidelity wireframes as I had gathered substantial peer feedback on the sketches. This approach allowed me to test user flows, words, and visual elements, providing extensive feedback on the entire app experience.
Early Usability Tests Suggest Enhanced Filtering for Better User Experience
In the first round of moderated usability tests with three target users who were recruited from the participants in the discovery research, feedback was solicited on the flows and overall experience. A key recommendation from these tests was to enable filtering for remote or in-person collaborators at the beginning of the search process, rather than only after the initial search, highlighting how users prioritize and approach their search for collaborators on the platform.
INSIGHTUsers suggested that a filter be placed at the start of the search process to filter out major sub groupings.
‘Maybe you can have a filter that helps narrow down the search results before I get there.’ -JT
RECOMMENDATION:- Add an ‘In-person, Remote, Both’ filter to the first search bar step.
INSIGHT
Users reported several specific cases of language that were ambiguous, unclear, or too formal.
‘I’m not sure what ‘reviews’ mean - are these submitted by people that have worked with this musician or other users who may like his songs or style, for example? ’ -GC
RECOMMENDATION:
- Change ‘Reviews’ to ‘Recommendations’ or ‘Endorsements’.
- Replace formal language like ‘collaborators’ to more casual and conversational language.
- Change technical language like ‘Technologies’ to be more descriptive and conversational.
- Consider implementing a help system.
INSIGHT
Users reported that it would be helpful to have the location and a music track to listen to on the search results cards; that it was unclear what match rankings are or why someone is in one category and not another; and that they may want to share the profile with someone else.
‘What I really want is to know where they are located, what they’re wanting to achieve overall, and sample their music.’ -GC
RECOMMENDATION:
- Change the match ranking system to a more accurate percentage rating.
- Add an audio sample and location.
- Consolidate actions together. Add a share button.
INSIGHT
Users indicated that the search bar fields in the filter tab were difficult to use as it didn’t contain enough visible characters and cut off their entry.
‘I didn’t like that my search text was cut off. What if there is a spelling error that the system doesn’t recognize?’ -AA
RECOMMENDATION:
- Allow for longer text entries by providing a larger search field that can be hidden.
Second Usability Test Confirms Improved User Experience and Feature Functionality
After recommendations from the first usability test were made, a second unmoderated test via Maze was conducted on 5 users. Participants were given the task of creating an account, answering the questionnaire, completing the profile page and searching for collaborators. The second tests indicated that there weren’t any severe or moderate issues with the features. Participants were recruited from a screener posted on a songwriters Reddit subgroup as well as the designers personal contacts.
After recommendations from the first usability test were made, a second unmoderated test via Maze was conducted on 5 users. Participants were given the task of creating an account, answering the questionnaire, completing the profile page and searching for collaborators. The second tests indicated that there weren’t any severe or moderate issues with the features. Participants were recruited from a screener posted on a songwriters Reddit subgroup as well as the designers personal contacts.
I developed a design system based on brand traits tailored for a youthful, energetic, and creative audience, tapping into the history of popular music and capturing the communal essence of music culture. Key brand traits included: bold yet welcoming, aspirational yet grounded, and functional yet energizing.
Comprehensive UX Design and Testing Yield User-Centric Prototype for Creative Music Platform
After thorough usability testing and iterations, I confidently addressed the pain points and developed a comprehensive visual design and design system. Key insights from the testing phases, such as the early filtering for remote or in-person collaborators and incorporating conversational language, were integrated, leading to a more intuitive user experience. The final prototype showcases a cohesive, user-centric platform that not only meets the functional requirements but also resonates deeply with its intended audience.
Guided prototype walkthrough
After thorough usability testing and iterations, I confidently addressed the pain points and developed a comprehensive visual design and design system. Key insights from the testing phases, such as the early filtering for remote or in-person collaborators and incorporating conversational language, were integrated, leading to a more intuitive user experience. The final prototype showcases a cohesive, user-centric platform that not only meets the functional requirements but also resonates deeply with its intended audience.
Guided prototype walkthrough
This project was developed as part of the Masters in UX Design program at the Maryland Institute College of Art. Special thanks to my classmates and MICA UX MPS faculty advisors (Christine Chiang, Arkadiy Avrorov, Logan Perez) for providing valuable feedback and expertise.