Project overview
The product:
Unison Music Network is a responsive website where musicians, artists, producers, and music enthusiast can: search, network, collaborate and repeat. With a streamline profile creation flow, Unison allows users to quickly update their profiles to narrow down more niche discoverable results and searches.
The problem:
Musicians outside of the music industry lack the necessary time needed to find other niche musicians.
Project duration:
November 2021 to February 2022
The goal:
Design a responsive website & app that streamlines the profile creation flow so users can quickly update their profiles for more narrow niche discoverable results and searches.
My role:
UX designer designing a music networking responsive site & app from conception to delivery.
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:
I conducted interviews to understand pain points that users have with music networking sites and apps. I created empathy maps and personas to better understand the users and their needs. A primary user group identified through the research were musicians and artists with professions outside of the music industry that want more from music networking sites.
​
During my research, I keyed in on my prompt, “Design a profile creation flow for a networking app for musicians”, and made this one of the main user flows. I had users go through the profile creation process initially, then had them revisit their profile and make updates.
Pain points:
1
Time consuming:
2
Navigation:
3
Ad Heavy:
Users want a music network that allows them to easily change profiles in order narrow searches and results.
Platforms have confusing interfaces that are not intuitive.
Users do not want a network that is filled with advertisements.
4
Privacy:
Users want the ability to make certain post only viewable to a certain set of users.
Persona: Rich E
.png)
Problem statement:
Rich E is a busy mechanical engineer who needs a networking app that streamlines the profile creation flow because they want balance connecting with other musicians and spending time with their family.
User journey map:
Mapping Rich E’s user journey revealed how helpful it would be for users to be able to update their profiles to narrow search results.
![Google UX Design Certificate - User Journey Map [Template] (1).png](https://static.wixstatic.com/media/c0ea45_243a2e05f0a34c42954cdc2f50d11d27~mv2.png/v1/fill/w_841,h_473,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20User%20Journey%20Map%20%5BTemplate%5D%20(1).png)
Starting the design
Paper wireframes:
Brainstormed the homepage layout for multiple screen sizes.
Digital wireframes:
While designing, I chose to make the homepage a mixture of the two main pages, the discover and network page. I designed the page this way so users could have the option to discover other users that match their profile interests, or navigate to their personal network after logging in.
Digital wireframes:
I made the same design choices, but had to line the discover and network sections into one column to adapt to the screen of a mobile device.
Low-fidelity prototype:
I used the digital wireframes to model my low-fidelity prototype. The main user flow of the site was centered around the the profile creation and update process, so I connected this flow in order to study this process in the usability study.
Usability study: parameters
Study type:
Unmoderated
Location:
Participants:
Remote, US
Three males, two females between the ages of 30-45.
Duration:
5-10 minutes
Affinity map:
Usability study findings:
The findings from the usability study aided the direction I took to change my wireframes to mockups, then to the high-fidelity prototype.
Findings:​
1
Users needed clear instructions to know what do during the profile creation flow.
2
Users wanted a to enter and exit the profile creation flow.
3
User wanted the site automatically resize to their mobile device screen.
Refining the design
Mockups:
In my initial design, I created an “update profile” button. After the study, I created a Flyout menu so users could enter the profile update flow on different pages.
Mockups:
Demographic Information, Homepage, Discover, and Network pages for the website and app.
High-fidelity prototype:
The website and app final high-fidelity prototype presented a clear profile creation and update flow. I also flushed out the discover, network, and Miguel’s profile page.
View the Unison Music Network:
Accessibility considerations:
1
Accessibility was considered through the color palette choice and contrast. The colors in the app were tested and align with Web Content Accessibility Guidelines.
2
Accessibility was considered throughout the user flow in the prototypes when making connections. Multiple ways were created to navigate through the app.
3
Accessibility was considered by ensuring that hotspots were connected to reasonably sized elements.
Going forward
Takeaways:
Impact:​
The responsive website and app allow to users to connect with other musicians and network a streamline and efficient way that saves time.
Quote from peer feedback:​
“I like that it gives the name and a quick profile summary or biography...”
What I learned:​
While designing the Unison Music Network responsive website and app, I learned making apps to match the site takes work and is not an automatic process.
Next steps:
Conduct another round of usability studies to confirm that the last iterations addressed the users pain points, and iterate design according to the findings from the usability study.