Offbeat Music App
Offbeat is a one-stop shop for musicians to share ideas, collaborate, and gain a sense of community. Offbeat helps musicians to refine their skills. It also builds community through interactive game challenges. It’s a way for artists to network with each other, across all genres.
>> I like music! What’s this all about?
The musician’s journey is a mix of successes, plateaus, and sharing. While the majority of a musician’s time is spent practicing alone, their greatest reward is sharing their work with others.
But in an industry oversaturated with content, how can they connect with others and maintain a steady practice?
>> Idk, how?
Case Study
Product Vision
A web app for semi-professional musicians and producers to come together, share ideas, collaborate, and build community.
The short-term goal: get the website’s first 1,000 signups and enough donations to fund further development. The long-term goal: become the leading platform for practicing music and collaborating with others, earning money through premium service offerings.
Discovered User Problem
Songs rarely appear out of thin air. They instead form from bursts of creativity via hours of regimented practice. Making and practicing music is an often daunting process where musicians find it difficult to finish the songs they begin. Musicians who are able to share their progress with collaborators find it much more motivating to create.
Outcome
A web app where musicians can share their work to build a community and continue to refine their skills.
Process Overview
Project plan and responsibilities
Design Process
Research: competitive analysis, survey, user testimonials, social media audit
Analysis: personas, affinity diagram, customer journey map, flow diagram
Design: sketched mockups, user flow, responsive UI
Prototype & Test: high fidelity prototype, usability testing
Phase 1: Research
Competitive Analysis
I began my research by investigating the existing products for musicians to practice and collaborate with others. I scoured forums, websites, and social media chatter to determine five direct competitors in the US and one indirect competitor (Dribbble, a website for finding inspiration from designs). The goal was to better understand Offbeat’s unique value proposition—how competitors get users to sign up and give money, and to assess product design industry standards.
I examined the competition’s third-party offerings which included free beat-making samples, rent-to-own pricing models, in-platform messaging features, homepage call-to-action buttons, and main types of navigation.
>> I love competitions but let’s cut to the chase. Who won?
Well, it’s not that simple. Overall, BandLab is the best web app on the market in terms of fostering a community to engage musicians. You could say it’s the full package—it offers the ability to create beats and has a web app optimized for musicians to discover and collaborate with other musicians. The platform is engaging with articles, live content, top tracks, and more. It’s also personalized, based on the initial data one inputs upon registration.
I used these conclusions to help guide layout and content decisions; I knew from the assignment that a donation feature, game challenge, and musical networking feature were the most important to Offbeat’s business model. It was also helpful to see the information architecture (how a website is structured) of my competitors.
Survey
Next, I created a survey that was distributed to musicians across the US, UK, and EU, where I gathered 15 responses, primarily via social media groups. This data painted a clearer picture of what a musician’s inner monologue looks like when they tell themselves it’s time to practice or rationalize why their music might not be ready to share. Several subjects reported that the main reason they were motivated to continue practicing was their ability to share their creation with others. Those who didn’t have a community typically said they struggled with maintaining a steady practice.
User Testimonials
Since this was a personal project with limited budget and resources, I relied on YouTube reviews as a form of usability research to better understand the main pain points and use cases of Offbeat’s top two competitors uncovered during my competitive analysis—BandLab and Splice.
I discovered that users appreciated the ability to make music within the “studios” of these web apps since their freemium models invited users to test their commitment level and passion. Musicians also found inspiration from the samples their peers posted, claiming the robust catalog of music “sparks your creativity, if you don’t know what direction to take, you can open the app and there you go.” On the other hand, they expressed dissatisfaction with the pricing models and cautioned against relying only on samples to create music.
Social Media Audit
My detective work extended to Twitter conversations from the past two years around BandLab and Splice. I combed through social chatter to better understand the competition’s strengths and fallbacks.
Several BandLab users expressed feeling shy about sharing their music, whereas Splice users demanded better organization features to manage downloaded samples. This feedback was helpful in shaping the personalities of my personas.
Screenshots from my social media research and YouTube findings
Phase 2: Analysis
Personas
Now that I’d done my Sherlock Holmes-ing, I moved on to building out my personas. While keeping an open mind regarding the biases that were coupled with the kind of research I conducted, I combined Offbeat’s predetermined target audience of beginners/semi-professional musicians and my research to create two representative personas.
>> I’m going to pretend you did not just make Sherlock Holmes into a verb. You may continue.
Persona card #1
Persona card #2
Affinity Diagram
In order to best represent how my personas would flow through Offbeat’s website via a customer journey map (CJM), I sorted my research into an affinity diagram. This exercise provided insight into positives, pain points, thoughts, and actions along with different parts of the user journey. Overall, this exercise was helpful in better understanding my target audience and how information should flow.
Customer Journey Map
I used this information to map out what my personas’ user experiences for a music collaboration web app would look like. I identified their pain points, context, and goals—what they were expecting along each step of the way, and the business objective of generating signups and gathering donations.
In order to confirm I was best representing my two personas, the CJM sometimes displayed conflicting information represented in separate bullet points. Their projected emotions helped to dictate which screen states would need extra thought in order to assuage the user.
Flow Diagram
Using my customer journey map as a base, I consulted the business plan’s predetermined functionality to develop a “happy path” or ideal user flow that would encompass the necessary steps of signing up for the service, viewing the homepage, playing a game challenge, uploading a song track, and donating to the service.
Phase 3: Design
Sketched Mockups
Based on the screen states and actions in my user flow, I began sketching low-fidelity mockups to ensure I could quickly capture my ideas on pen and paper in a way that would allow me to focus on the big picture and easily make edits.
While sketching, I realized that some aspects of my original user flow would make more sense if I divided them into separate steps. For example, I edited my flow diagram to allow for different kinds of users to register—musicians and/or music lovers—and allowed them to skip steps during the signup process so as to not sacrifice drop out.
Low-Fidelity Wireframes
Creating low-fidelity wireframes helped me focus on visual consistency and the Gestalt design principles before applying UI styles. I incorporated common design patterns that were tested in my competitor’s products along with elements that directly addressed user’s goals, needs, frustrations, and motivations.
Low-fidelity mockups with red and gray lines representing page divides
High-Fidelity Wireframes
I built a design system to keep track of font styles and coloring, helping maintain consistency across my final designs.
>> And how did this all fare?
Phase 3: Prototype & Test
Usability Testing
I conducted remote usability tests on my prototype with two semi-professional musicians who’ve practiced music for over 10 years but had an unrelated day job to support themselves financially. Both were interested in finding other musicians so they could collaborate and share their music. Neither had a set practice regimen in place.
The usability tests uncovered insightful findings which led to final iterations of my prototype.
While the subjects were able to complete the “happy path” with minimal resistance, it became clear that the biggest confusion stemmed from the game challenge. Users liked the idea of playing a game to keep themselves motivated to practice and collaborate with others—but didn’t understand how it worked.
I got to editing. One user stated “I was confused what the [game] process was about. I didn’t understand if it was for creating a new track or collaborating.” That piece of feedback led me to create a clickable walkthrough explaining how to play the game. Another suggested the challenge could be more inspiring if it wasn’t so strict in its criteria. I changed the third category from recreating certain parts of songs to creating a song inspired by a certain mood.
Overall, the users expressed interest in using the final product.
Outcomes
Offbeat’s power of networking and community is favorable toward its ultimate goal of generating 1,000 signups. Simple interactions like inviting users to comment on the song uploaded for the daily challenge will generate interest from curious musicians.
Further development would require a strong business case to raise investment or a significant amount of early adopters to gain momentum. The website launch will need to be coupled with marketing efforts placing a strong emphasis on social media, given the nature of sharing music and getting feedback.
That said, I discovered musicians have a real desire to get feedback and share their work with others in their field. Offbeat is a unique opportunity to deliver networking value to users in a way that challenges their creativity and holds them accountable for their practice.
User testing revealed a real need for a centralized place for collaboration. I’m confident that after Offbeat gains the first 1,000 signups, there will be enough of a desire for users to pay for premium features if it meant they had a centralized place for collaborating with other musicians.
In the next iteration, I’ll place a stronger priority on sharing music with others, allowing users to upload their songs on social media at the same time as they do in Offbeat. I’ll also optimize user connections within the app so their work has a wider reach.
