.png)
Project overview
The product:
LOCAL VOCAL, an app where local creatives - musicians, artists, producers - and music enthusiast can build community, connect, create & collaborate.
The problem:
Artists with demanding schedules lack time necessary to build a following.
Project duration:
March 2021 - October 2021
The goal:
Design an app that allows local creatives to collaborate and increase their online presence.
My role:
UX designer designing a music sharing 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 user have with regards to music sharing apps. I created empathy maps and personas to better understand the users and their needs. A primary user group identified through the research were professionals that were music enthusiasts who wanted more from their music sharing apps.
During my research, I revisited my prompt, “Design a music sharing app for a trendy musician”, before conducting my first usability study. I decided to pivot to more clearly defining the user as a musician. I did this to be more true to the prompt, because when the phrase, “music sharing app” was initially used it was mostly associated with music streaming apps like Spotify and Apple Music, which are more static; usually limited to only listening to audio. This pivot was not obstructive since the majority of the primary user group were musicians.
Pain points:
1
Personalized curation:
2
Offline mode:
3
4
Navigation:
Unique features:
Professionals want music that speak to their interest.
Platforms do not easily switch to offline mode when WiFi becomes unavailable.
Platforms have confusing interfaces that are not intuitive.
Offerings that separate the app from the other major music sharing apps.
Persona: Emma
.png)
Problem statement:
Emma is a System Administrator
who needs an app that will streamline the process of increasing their online presence because their job is time consuming and they don’t have time to build their presence from scratch.
User journey map:
Mapping Emma’s user journey revealed how helpful it would be for users to be able to tag music and filter feed.
.png)
Starting the design
Paper wireframes:
Brainstormed the layout of a screen that would be found in the app and the possible placement of elements on the screen.
.png)
Digital wireframes:
Brainstormed the layout of a screen that would be found in the app and the possible placement of elements on the screen.
Digital wireframes:
I choose to make the upload process- a main user flow- simplistic. The simplicity helps to make the app more user friendly.
Low-fidelity prototype:
I used the digital wireframes to model my low-fidelity prototype. The main user flow of the app was centered around the uploading process, so I connected this flow in order to study this process in the usability study.
View the Local Vocal:
1st Usability study: parameters
Study type:
Unmoderated
Location:
Participants:
Duration:
Remote, US
Three males, two females between the ages of 30-65. One participant was a person with a visual impairment.
5-10 minutes
2nd Usability study: parameters
Study type:
Unmoderated
Location:
Participants:
Duration:
Remote, US
Three males, two females between the ages of 25-50. One participant was a person with a visual impairment.
5-10 minutes
Affinity map:
1st Usability study
Affinity map:
2nd Usability study
Usability study findings:
I conducted two rounds of usability studies. The findings from the first usability study aided the direction I took to change my wireframes to mockups, then to the high-fidelity prototype which I used in the second usability study.
Round 1 findings:​
1
Users need a button to update their profiles.
1
Users want upload process to be more simplified.
2
Users want a more intuitive User Interface.
2
Users want a simple tour to familiarize them with the app’s features.
3
Users want more direction to execute the upload process.
Refining the design
Mockups:
In my initial design, I made the upload button a Floating Action Button (FAB) that was in the bottom right corner. After the usability, moved the upload button to the top of the screen for better visibility.
Mockups:
The second usability study revealed confusion with the main user flow- uploading audio. To improve the user flow, I got rid of the subcategory “A” & “B”,then had each action be identified under category “1 - audio” or “2 - destination”.
High-fidelity prototype:
The final high-fidelity prototype presented a clear upload process and flushed out the user flow for accessing the library, feed, menu, user profile, and the top five trending artists’ profile pages. I also made customizations to the home screen to auto scroll.
View the Local Vocal:
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 making sure both usability test included participants with visual impairments. Iterations were made to have larger hotspots for small elements for better accessibility.
Going forward
Takeaways:
Impact:​
The app makes users feel apart of community and considers how to help them grow their presence.
Quote from peer feedback:​
“This app is great…, It will help me to get my music out there.”
What I learned:​
While designing the Local Vocal app, I learned that there is a lot of planning and many iterations that go into the development process. Usability studies and peer feedback influenced my designs, and helped me to consider perspectives outside of my own.
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.