Client: Spotify
Role: Full End to End UX Design
Duration: March 2024 (4 weeks)
Process Deck 🚧
Contributer(s): Tyler Gustafson
DISCLAIMER: While Spotify is a real business please note that this project was completed to showcase my skills and how I might approach this case.
Spotify did not employ me during this engagement, but I do highly recommend their app!
Project Vision
I am proud to introduce Spotify Musician, a groundbreaking feature designed to transform how musicians interact with music on Spotify. This feature is aimed at growing the Spotify experience by providing musicians with real-time tools to play along with the songs they love.
Aimed at musicians of all skill levels, Spotify Musician enables listeners to quickly understand song structures, ask questions to experienced musicians, and build setlists with their band and friends. My vision with this feature is to seamlessly integrate these capabilities into Spotify's platform, taking the frustration out of learning new songs.
User Pain Points
1
App Switching
Musicians often have to exit Spotify and switch to different apps or websites to find the chords and keys for songs they love, disrupting their music experience.
2
Lengthy Searches
Users spend a significant amount of time scrolling through various sources to find the correct music data, which can be frustrating and inefficient.
3
"Isolated" Musicians
Musicians, especially those who are first picking up an instrument often find themselves alone to navigate learning bouncing from resource to resource.
4
Poor Band Coordination
In our research users shared that bands often face challenges in coordinating practices, sharing recordings, and communicating effectively.
A Musician's Journey
Play Where You Listen
A centralized hub
Spotify Musician merges listening and learning by providing a centralized hub where musicians can explore music while quickly accessing key song information to play along like chords, BPM, and keys. This seamless integration reduces distractions caused by app-switching, allowing artists to work on their skills more spontaneously and in a relaxing way. It bridges the gap between inspiration and education, transforming passive listening into an active, interactive practice.
Whether refining your skills or discovering new techniques, Spotify Musician enriches the experience by offering stats and tools right where you listen!
Manage Your Band
Simplified Collaboration
Empower your band with intuitive tools that simplify collaboration and streamline your practice. Spotify Musician makes it easy to synchronize song stats and resources, enabling every member to stay in tune with the band's setlist.
Whether you're sharing the next show's lineup, keeping everyone on the same page, or analyzing live performance trends, managing your band's progress has never been easier. Build stronger connections within your group by using powerful features that help you grow, improve, and deliver your best performance together.
Build Skills & Community
A Supportive Ecosystem
Grow your network and expand your skills in a supportive ecosystem designed for musicians. Spotify Musician connects you to a world of resources, tutorials, and fellow musicians, fostering creativity and collaboration. The platform's learning tools accommodate all skill levels, providing personalized pathways to mastery.
By sharing ideas and experiences within the community, musicians can inspire each other to keep pushing the boundaries of their art while making new friendships and connections.
Thank you
I appreciate you taking the time to look at my little passion project. This is an issue that I constantly face as a musician and in my research found I wasn't alone and there with other users with different problems that could benefit from this new feature.
Please see below for a couple more screen shots of the app design and please feel free to reach if you have any questions or collaboration ideas!
Standard Player
Musician Player
Tools (Tuner)
Learning Resources
Musician Profile
Band Profile
Band Messages
Community Posts
See the full design process
Understanding the User
-
User Research
-
Empathy Maps
-
User Journeys
-
Value Statements
User Research
Thanks for choosing the full design path! While the final design is always cool and interesting to look at, no one will ever use it if it doesn't align with the user needs! User research is the most critical step and it's crucial to remain empathetic and place users at the heart of the design process.
For this project, I drew on personal experiences and conducted interviews with several friends. However, in a full-scale implementation, a more thorough approach would be used to establish a comprehensive research base to better understand the customer. In this instance, the research process was condensed for practice purposes. For a detailed overview of the typical methodology I would employ, please refer to the following link: [🚧 link 🚧].
Empathy Maps
Empathy maps are vital because they can distill our user research findings into actionable insights, capturing what users say, think, do, and feel. In our case, we have already begun to see some pain points such as the hassle of using multiple apps to find music stats, difficulty deciding on what to play, and even some unexpected band communication issues!
This is a great tool when starting the journey to understand the user. Next, these insights can help in creating accurate user personas, providing a deeper understanding of user needs and motivations before designing the product.
User Personas
To ensure the Spotify Musician feature meets the diverse needs of its users, I developed from our research, detailed personas representing typical users who would benefit from this new functionality. These personas help in understanding the varying requirements and how different types of musicians might interact with Spotify to enhance their musical journey. Here we introduce two primary personas: Eli and Lisa, who are examples of the range of musicians that Spotify aims to support with this innovative feature.
Scroll Through
Based on these personas and insights, we can craft user stories that are essential for shaping product design. These stories will guide the development process and act as a checklist to make sure we're tackling the right issues for our users.
As an aspiring young musician, I want an app that has chords, keys, and all the song information I need for whatever music I'm streaming, enabling me to easily play along and practice new songs appropriate for my skill level, while also connecting me with a community of like-minded musicians. - Lisa
As a music teacher and performing artist, I want a versatile app that centralizes learning and fosters a music community environment. This is important to so that I enhance my teaching practices, while also continuing to grow with my band. - Eli
User Journey
From here we can take a closer look at their journeys and what emotions they might experience throughout them. This exercise is great for thinking through the frustrations of the user and what we can do to improve upon or surprise them with unexpected solutions. Below you will see an example of Lisa's journey when she's listening to music on Spotify as a musician:
Lisa's User Journey
We can already see some pain points in Lisa's journey. If we take a closer look at Lisa's journey through a slightly more detailed lens we can understand these key areas and the improvements that we should consider in our future designs.
We can see how Lisa could benefit from a solution that helps streamline her jamming-along process. However, Eli's journey looks a little bit different. Although he doesn’t show obvious pain points at first glance, upon closer examination, there are several opportunities to streamline his teaching approach and centralize his materials for students and band members.
Eli's User Journey
Eli definitely would benefit from a way to be able to communicate notes or share playlists. These exercises have helped us start to empathize with our users, let's take a shot at summarizing their frustrations.
User Pain Points
1
App Switching
Users often have to exit Spotify and switch to different apps or websites to find the chords and keys for songs she loves, disrupting their music experience.
2
Inaccurate Music "Stats"
When searching for song information, Users encounter multiple inaccurate or mismatched versions, leading to confusion and wasted effort.
3
Lengthy Searches
Users, especially those who are first picking up an instrument often find themselves alone to navigate learning bouncing from resource to resource.
4
Playback Disruption
By the time a User finds the right music information, the song has moved on, requiring their to restart and sync the song, interrupting their flow and enjoyment.
Value Proposition
After identifying the above user pain points with our user research, we can begin thinking about the potential benefits of our product that can help solve these user frustrations.
This consisted of spending time jotting down a preliminary brainstorm to explore options for a simple Spotify Muscian feature (roughly represented to the right). This is a crucial step to ensure that our product provides solutions that are closely aligned with the specific needs and problems faced by users.
After our brainstorming, we can group these benefits into our own value proposition consisting of four fundamental categories:
-
Integrated Music Insights: We can seamlessly deliver detailed musical analytics, including chords, BPM, and key, directly within the listening experience of the Spotify app.
-
Enhanced Tools & Collaboration: Here, we aim to equip our musicians with tools they need to learn and the resources to communicate with their band members, students or even the broader musice community.
-
Simple Informative Platform: Our objective is to offer a straightforward and user-friendly platform that provides essential information at a glance, minimizing complexity and enhancing usability.
-
Support & Community Engagement: While we support solo artists we like to think of our community as a band and create a supportive network where users can engage with other musicians.
Preliminary
Design
-
User Flows
-
Storyboards
-
Wireframes (Paper + Digital)
-
Lo-Fi Prototypes
User Flows
Understanding user flow is crucial, and here’s a preliminary path for a standard listener interested in playing along. This path mirrors the typical Spotify experience, but introduces an option to play along on the playback screen.
Users can then access the "Music Studio" to explore the song further and utilize features designed to aid teaching. From there, they can engage with various functionalities and delve deeper into any feature with a simple double-click.
Storyboards
To further enhance our understanding of the user flow is we can generate a storyboard to start to wrap our heads around what different features a user might use while using Spotify Musician.
Storyboards help in understanding how users might interact with the app in real-world scenarios, which is crucial for designing a user-centric application. This can be done at a big picture high level or a close up (in the picture is a close up).
Wireframes
It's crucial to review our low-fidelity (lo-fi) design of the feature at this stage. This early visualization allows us to determine essential elements that should be incorporated into our design.
By identifying potential issues early on, we can save significant time and effort, enabling quick iterations and refinements. Below is a paper wireframe of the design, which has undergone several iterations to optimize its functionality and user interface. This iterative process helps ensure that the final design meets our user's needs.
Standard Player
Studio Player
Resource Page
Musician Profile
Digital Wireframes &
User Feedback
The next step was to digitize these paper wireframes, creating a shareable version we could present to potential users for feedback. \Below we’ve showcased feedback from a small test group we conducted. You'll find a high-level summary of their comments, pinpointing specific areas within the digital prototypes.
This feedback is invaluable as it helps us pinpoint exactly where adjustments are needed to enhance usability and functionality. We're now using these insights to refine our designs, ensuring they meet user expectations and improve their overall experience.
Paper
Digital
"Would call it Theory & practice vs Teaching"
"Chord chart isn't really helpful down here - need quicker access"
STUDIO PLAYER
"Create a messaging space for people you might be learning with or your band"
MUSICIAN
PROFILE
"Inconvient to only be able to access your setlists here"
"CLICK"
"This is okay, but I would like a way to quickly find people I play with too maybe make a group "band" profile page as well"
SONG RESOURCES
"All these resources would be more helpful on the main screen - otherwise have to click twice just to get to the tools and back"
"CLICK"
"Teaching section is too broad - potentially split between tips and youtube tutorials"
"Community posts are great for finding different ways to play or get past tricky spots. Would move to the main screen at the bottom"
Okay, that was a lot of feedback, but we can boil it down to a couple of themes. To do this, we prioritized the most frequently mentioned issues by our users, focusing specifically on enhancements that try to solve their core problems we identified in our user research. Below are the three key themes that came out of the feedback review:
1
Minimize Clicking
2
Provide Effortless Tools
3
Enhance Communication
Low Fidelity Prototype
Now we can update the wireframes and turn them into prototypes based on this analysis while ensuring to incorporate these critical user themes into the new design. Below we can see a a prototype that is much more in line with solving the user needs.
Click to Watch
sTUDIO pLAYER
Updated Studio Player centralizes all pieces of the learning journey. From the main screen you can quickly access all resources all within one click without being overwhelmed. The ribbon at the top enables this along with containers for other actions such as being able to message band mates
pROFILES
The profiles were redesigned to more closely align with current Spotify profiles but with an overview built more for musicians. Users have access both to their musician profile and band profile within the studio player. Messaging has been enabled along with storage for band recordings.
tOOLS
Finally, tools were more throughly built out to support the musicians. The user can access their setlists (both solo and bands), a tuner for their respective instrument and a chord library to use as a reference tool.
.png){kind=small}
