Harmonious
This project involved the design and development of Harmonious, an app created to help musicians efficiently find collaborators who share their musical vibe, values, and goals, fostering successful and harmonious working relationships.
Overview
I pitched the concept for Harmonious as part of a group project, driven by my curiosity about how to help musicians connect and collaborate with one another. As a team, we followed the complete UX/UI design process, from user research and ideation to wireframing, branding, and user testing. My primary role involved creating the app's visual identity, which included mood boards, typography, color palettes, and a design system that ensured consistency across the wireframes. The project focused on building an intuitive platform where musicians could easily form meaningful, long-term collaborations based on shared artistic goals.
Role
UX/UI Designer
Tools
Figma, FigJam, WCAG 2, Accessible Colors
Duration
4 Weeks
The Idea
Harmonious originated from a conversation with my friend Philip, a 27-year-old songwriter in Los Angeles who was struggling to find collaborators in the music industry. He observed that many people often prioritized working with individuals who had social clout over those with genuine talent, making it difficult for emerging artists like him to find opportunities. Philip needed vocalists, producers, and fellow creatives to help him develop his work, but without an established reputation, forming these connections remained a challenge.
Research
To understand how musicians currently find collaborators and to identify the gaps in their experiences, we started with a survey and collected 33 responses from musicians, singers, songwriters and producers that we found both through personal connections and forums like Reddit.
We discovered that 57% of users primarily sought collaborators, but only 50% were successful in finding them, and only 37% were satisfied with their collaborations.
Given the low satisfaction rate, it was clear that current solutions were inadequate. We aimed to delve deeper into the collaboration process among musicians to better understand their needs and pain points by conducting user interviews.
Research Problem
To understand the process musicians use to find collaborators.
Research Objectives
Uncover their reasons/goals for finding collaborators.
Discover the methods/and or tools they use to find collaborators.
Learn about the challenges they have faced while collaborating.
User Interviews
We interviewed six participants, including five musicians and one producer, aged mid-20s to mid-30s, at various career stages. This helped us gather diverse insights into the main problems they were facing.
Empathy Map
We initially created an affinity diagram to analyze the data from our user interviews. However, we discovered that users from different regions had distinct goals and challenges—Broadway musicians have very different objectives than those in Hollywood. This led to an overwhelming number of categories that were difficult to manage. To gain a clearer understanding, we switched to an empathy map, which provided a more personal view of our niche user demographic and helped us better grasp their stories, journeys, and aspirations.
Defining our Mission
After gathering insights from our user interviews, we developed a user persona and a storyboard to get into the mind of our user and define the problem we aimed to solve and who we were solving it for—all of which led us to create our mission statement.
Our Mission
How might we help musicians efficiently find collaborators who share their musical vibe, values and goals so they can establish successful and harmonious working relationships?
To solve this, we needed to understand our user.
Meet Amanda!
Amanda’s Story
Ideating a Solution
After solidifying our user and their needs, we were able to dive deeper into coming up with a solution. We started by conducting a competitor analysis to understand what already existed and where there were holes.
We landed on four key features.
We brainstormed possible solutions using the I Like, I Wish, What If method. We did dot voting to pick the features to focus on and then prioritized them according to must-haves and nice to-haves (we had to narrow down a lot)
Bringing Concepts to Life
User Flow
After deciding on our key features, we mapped out the bones of our app in a user flow.
Sketches
The team separately put pen to paper and sketched out initial ideas for how we each thought the design could look.
Wireframes
After comparing sketches, we pulled our best ideas together and built lo-fi wireframes.
Testing and Iterating
The next step was to conduct usability tests on our wireframes. We asked 5 users to complete 3 tasks.
Task 1: Find a guitarist and ask them to connect.
Task 2: Participate in the daily challenge.
Task 3: Accept an Invite
This task had a 100% task success rate, however, 40% clicked through at least one other tab before finding invites to accept. Because of this we:
Reordered the page tabs based off importance and frequency
Changed and removed the profile icon (the eye) and added copy to the accept invite icon for accessibility and clarity
There was a 90% success rate for completing this task, however, we received feedback from users that the instructions were not clear to them. Our solution was to:
Create step-by-step instructions to walk users through the flow of participating in the daily challenge. We also added a clear ‘submit’ button.
There were two different pathways to complete task one successfully. The first was through the ‘search’ icon on the navigation bar and the second was through the ‘discover’ page. Overall, there was a 90% success rate in completing the task; 60% from ‘search’ and 40% from ‘discover’. However, we noticed that users had to spend more effort than necessary to find the ‘connect’ icon at the bottom of the user profile and the search interface wasn’t what they expected. We wanted to iterate on these features so users could have a smoother experience.
We moved interaction icons to the top because we found that users had to spend more effort than necessary to find them at the bottom of the user profile.
Because some users felt that the search interface was not what they expected, we wanted to create a more recognizable solution. Instead of toggling between filters and results, our solution was to allow users to search for what they are looking for and filter preferences as needed.
UI Style Guide
For the UI style guide, I aimed to evoke a time when music was driven by talent, not clout—when it stood on its own before tech took over. The design needed to be clean, modern, and usable, while also carrying a sense of nostalgia and bringing creativity back to tech. I chose Work Sans as the main typeface for its readability and web-friendliness, but also because its character and movement made the design feel more creative. For the display font, Staatliches was selected for its bold, confident look, evoking sharp music levels, which also influenced our logo.
The color palette was inspired by concert posters and album art, using bold primary colors that can stand alone or blend, symbolizing collaboration—the heart of our app—where individual elements come together to create something new. We chose violet as our primary color because blue evokes trust, while purple represents power and ambition. We wanted users to trust us as they pursue their dreams, knowing we would help them achieve their creative ambitions.
High Fidelity Wireframes
After applying the UI Style Guide to the wireframes, our team retested the prototype to validate our design iterations. The results were clear: users achieved a 100% success rate in completing the same tasks from the previous round of testing.
