Overview

This case study is for an app I designed that seeks to introduce musicians to one another, based on common musical goals and interests.

The Challenge

A term that is used fairly often is “one man band” - signifying an individual is completing a task by performing multiple roles. However, completing a musical project is typically difficult when one is left to their own devices.

Most local musicians work full time jobs in something other than music, sparing little time to build relevant connections - thus making it difficult to complete musical projects that require outsourcing.

The Solution

Harmony Hive aspires to create a way for musicians to network efficiently. Harmony Hive will accomplish this goal by providing a place for musicians to easily search for, connect and communicate other users who have similar aspirations.

My Role

I completed the project for my Springboard UX/UI Design course. My job was to complete primary and secondary research, design low-fidelity wireframes, high fidelity prototypes and complete user testing.

The Process

Empathize - screener survey, user interviews
Define - empathy maps, personas, jobs-to-be-done, how-might-we statements
Ideate - brainstorm, user stories
Prototype - sketches, low-fidelity wireframes, style guide and high-fidelity prototype
Test - conduct usability tests

Empathize

Screener Survey

Screener Survey - Prior to interviewing participants, I sent a screener survey to potential candidates to ensure I was interviewing appropriate candidates for the app. The ideal candidate would be someone who is currently active, or seeking to be active, in their local music scene.

User Interviews

I interviewed 5 participants, lasting 30 minutes. The purpose of the interview was to see how important musicians felt networking was. The interviews validated my initial hypothesis - musicians find value in connection, but networking is time consuming and therefore, frustrating.

Key Insights

Musicians want to expand their network and believe it will lead to more opportunities
Musicians value connections with others
Musicians like to network at events
Most musicians work within their current circle
Musicians believe communication and goal-setting will lead to a positive outcome

Prioritized Frustrations

Musicians do not have a big enough network to meet current goals
Musicians do not have enough time to finish projects
Other musicians work primarily within their own network
Lack of communication can lead to negative outcome while collaborating

“Connections are very important. You need to have a connection to people in the scene to help build you from where you are now”

“It is absolutely important to build connections”

“You can have great music, but if nobody knows it, you’re not getting anywhere”

Define

Empathy Map

I created an empathy map as a visual guide to organize consistencies among those who I had interviewed. This helps to visualize values, pain points and characteristics of my app’s target user.

Personas

In order to design with my target user’s needs, problems, motivations & goals in mind, I created a persona.

Jobs-to-be-Done

Jobs-to-be-Done is a statement that designers write and use to focus on what the users want to accomplish. I wrote three jobs-to-be-done for this app.

Tim, a musician, uses the app to post about his current projects in hopes to find potential collaborators.
John, a talent buyer, uses the app to seek out new talent so he can book more concerts.
Taylor, a producer, uses the app to seek out musicians who are in need of production for their music in order to create a full-time income.

How Might We Statements

How Might We statements define the problem that the app seeks to solve

How might we expand a musician’s network, in order to introduce more opportunities?
How might we encourage attendance at live networking events, in order to provide musicians with more networking opportunities?
How might we encourage musicians to work with people outside of their current circle, in order to enhance the sense of community within the music scene?
How might we encourage communication in order to foster connection between musicians?

Ideate

Brainstorm a solution idea

I used my How Might We statements to brainstorm potential solutions to the problem space -

How might we expand a musician’s network, in order to introduce more opportunities?

Social networking site featuring user’s profile

User’s profile will foster credibility, as it shows current connections and completed projects

Social networking site with a “job posting” board

Visibility to who created the job posting
Message feature to message whoever created the job posting
Tags enabled to search and find specific projects/job postings

How might we encourage communication in order to foster connection between musicians?

Create a chat feature

User Stories

Creating a user story enabled me to take the information from my user’s persona and prioritize the tasks from most to lease important.

Prototype

Sketches

I sketched out the red routes, or critical design paths, on paper. The first red route was registering for an account, the second was to make a post.

Testing Takeaways
from round 2 of testing

Though the participants were able to complete the tasks, it was apparent that there was room for improvement. I organized the feedback by what I thought was most to least critical. I look forward to providing clearer copy and consistent casing throughout the app, among other changes that will positively impact the overall user experience.

Low-Fidelity Wireframes

Next, I created Low-Fidelity Wireframes of my red routes by using Figma.

Mood Board

Before creating a prototype, I took time to build a mood board in order to determine what visual direction my app should take.

Style Guide

After building the mood board, I was able to define how I wanted the app to look - including primary colors, font style and photos.

High-Fidelity Prototype

Once the style guide was defined, I was able to add style to my wireframes, and then produce a prototype. I changed my red routes from my sketches and wireframes in order to offer a more valuable insight to the purpose of the app - the first red route was to make a post, the second was messaging another user on the app.

High-Fidelity Prototype

Click here for the functioning Harmony Hive Figma Prototype.

Testing

Usability Testing

Throughout the process of building Harmony Hive, it became clear to me how imperative it is to conduct user testing early and often. I had done a series of 3 moderated usability tests - one of my sketches, one of my high-fidelity prototype, and another of my high-fidelity prototype after I made important and relevant changes brought to my attention during the first round of prototype testing.

After my first round of tests using my sketches, I decided to incorporate a more involved flow for my red routes. While sketching, my red routes, or critical flows, were the registration process as well as uploading a song. Since one of the app’s major intentions is building and fostering connections, I decided to build out a flow for messaging other users on the app, and introduce that to users the next time I tested. I am happy to have done this, as concentrating on relevant flows during the testing process gave me invaluable feedback from the participants.

Testing Tasks: High-Fidelity Prototype: round 1

To validate my design, I conducted 5 moderated in-person tests with musicians who live in the city of Erie, Pennsylvania. The participants were asked to walk through the prototype on Figma. The tasks I asked the participants to complete included

Red Route 1: Search and message another user on the app
- Search for another user on the app
- Add the user you just found as a friend
- Message the user you just found as a friend
Red Route 2: Upload a new song
- Post a new song to your profile that you have downloaded to your phone
- Add album artwork for the song you have just uploaded
- Add a caption to the song you have just uploaded
- Confirm the post
- View song on your own profile page

After asking the participants to complete the tasks, I was sure to ask for any additional feedback - was the site easy to navigate? Was the text clear and easy to read?

Testing Takeaways
from round 1 of testing

All of the participants were able to complete the tasks. However, I did get some valuable feedback regarding UI. I organized these features by priority and made changes to the prototype. I looked forward to amending the designs and seeing what feedback I got for my next series of usability tests.

I took the feedback I received from the participants and made changes to my prototype, focusing first on the critical priorities that I outlined from my user interviews.

I added a feature so a user is able to make a post while viewing their profile.

I added timestamps to the chat feature.

Testing Tasks: High-Fidelity Prototype: round 2

I had 5 new participants complete the same tasks that I had asked the previous 5 participants.

The participants were able to complete the tasks, however I did gain feedback that differed from my first round of usability tests on the prototype.

Next Steps

I will be sure to take the second round of usability test results into consideration when amending my design. In order to offer a better experience for users, I plan on

Amending the “make post” module on a user’s profile page for a more intuitive experience when uploading a song
Ensure casing is consistent throughout the app

Harmony Hive Case Study: