An end-to-end application for musicians to network, promote their work, and find gigs.
Jams
DURATION
3 months | 100+ hours
CLIENT
Student project @ DesignLab
TOOLS
Figma, Maze
UX RESEARCH
UX DESIGN
UI DESIGN
USABILITY TESTING
BACKGROUND AND BRIEF
Design a mobile app that connects musicians to clients.
Being a musician is more than just making music. To make a living from it, before one even earns a penny from doing actual music, countless hours are spent networking, promoting their music, and powering their social platforms. In practice, it also requires having people willing to pay for a performance, song, or part of a song.
Remember CDs? Well, the music industry has gone through a lot of changes over the past two decades.
Indie musicians are gaining territory with the rise of internet platforms, and live performances are making a full return in the wake of the Covid-19 pandemic.
With this project, I want to understand the demands and constraints of the industry to design an end-to-end mobile application that caters specifically to this market. It will be a space where musicians will be able to connect, find new gigs, and promote their music.
DISCOVERY AND RESEARCH
Two problems, one solution
The first step in the research was to clearly identify which problems we are trying to solve.
The first problem I identified is that there is no relevant platform that connects musicians and others in the music industry. Imagine LinkedIn, but for musicians. Musicians currently fill this gap with standard social media platforms like Instagram and Facebook.
The second problem spotted is the absence of a platform dedicated to hiring musicians. the main source of inspiration for a potential solution was to look at digital work/freelance marketplaces.
With this in mind, how can we unite the end-to-end experience of work marketplaces with a networking platform?
COMPETITIVE ANALYSIS
How do digital work marketplaces work?
The number of work marketplaces is increasing as a global wave of online freelancers of several specializations seeks one-off jobs, and companies are now understanding the benefits of hiring freelancers.
Some of the most popular names in the industry today are Fiverr, Upwork, and Freelancer, however, these are broad freelancing websites that are used for multiple areas of work.
Some of the aspects that they have in common are:
-
Separate tracks for sellers and clients.
-
A step-by-step onboarding experience to create a user profile
-
Personalized job feeds according to selected preferences
-
Job pages with the available information at hand
-
User profile (some may also have exclusive pages for jobs they offer)
-
100% online application
EMPATHY RESEARCH
What do our users think?
I initially grouped our users into two main categories: musicians and people looking for musicians. However, due to time constraints, this research and development will focus only on the primary user group: musicians.
To empathize with our users and understand their pains, needs, and motivations, I conducted three user interviews with musicians.
They are all aged between 29-33 and live in Rio de Janeiro, Brazil. All of them are professional musicians, including a singer/guitar player, an instrumental musician/music producer, and a DJ.
The key insights taken from the interviews include:
-
Most musicians struggle with promoting their music online. Frustrations with the internet come from: being too self-critical, it doesn't always pay off, no patience.
-
Connecting with other musicians, even if just to practice together, is seen as essential.
-
Most jobs come through recommendations instead of actively searching.
-
Having side jobs is common among musicians.
-
Before agreeing to a gig, it is important to know: the hours, date and location, fees, and tech/material support.
-
The Internet is mostly used as a communication and promotion tool instead of earning money directly.
Using these insights and other findings from the interviews I designed our persona, which served as a compass guiding our design decisions.
IDEATE
HMW & priority features
I used the How Might We framework to help visualize the ideation process. After the solutions were clear, I mapped out the priority features for the musician app experience.
Priority features
-
Personalized feed with search and filter features
-
Apply to job opportunities
-
Manage current contracts
-
Grow network: add contacts / private message
-
Be reviewed after ending a contract.
-
Update profile page: experience, music, videos, etc.
-
2 paths: "I am a musician" / "I am looking for a musician"
-
Log in with social log in option
-
Create a musician profile (step-by-step)
-
Upload profile photo
-
Link social media accounts
INFORMATION ARCHITECTURE & INTERACTION DESIGN
Interface structure & flow
I designed a map for the interface's structure for a user's first access - which includes the profile page setup onboarding process.
With the map in hand, I designed two task flows for our persona, Sergio. the first task was relative to the onboarding and profile creation, and the second included networking and applying for a job. I later developed a user flow that would compile all interactions possible within the two tasks.
WIREFRAMES
Time to start building!
With the task flows ready, I proceeded to sketch the screens for the app and later built mid-fidelity wireframes from them. It was interesting to note that not many changes were made from the initial sketches to the final UIs. I consider this possible due to the pattern research conducted before I started designing each screen.
UI STYLE GUIDE
Let's bring it to life!
For this step, I started by creating a name for the brand and a logo inspired by its homonym sweet sister.
The UI colors were chosen inspired by retro color combinations of red, yellow, and blue, but giving it a modern twist and more contrast by combining lighter and darker shades. Since red is the brand's primary color but is a controversial choice for UI, I used it only as an accent color for CTAs.
The typographic duo, Ubuntu and DM Sans, were selected for being classic UI choices with enough contrast and readability.
USABILITY TESTING
Test & iterate
Ten usability tests were conducted via Maze to understand how easily users manage to navigate through the app and get direct feedback through opinion scales and open-ended questions.
Users performed all tasks well, presenting a high average on the opinion scale for every task. A few suggestions were made to improve the overall experience and design.
Also, some testers had difficulty because they had never participated in prototype testing, which is common, however, can modify some of the statistics presented in the Maze report.
Fixed scroll position of "skip" and "next" buttons
The notification button is now on all app screens.
KEY LEARNINGS
What can I take to the future from this project?
Test natively
Since mobile apps have native interactions, they should be tested using mobile devices. Users perform several tasks mechanically while using a mobile device, and when translated to a desktop experience they may get lost.
I made the mistake of testing this prototype via Maze, which only worked on computers. Several people who tested it were confused by simple interactions they would have performed instinctively on mobile (such as pressing "Go" on the keyboard after typing a search).