ROLE: UX/UI Designer, Design Strategist
TIMELINE: 80 hours over two weeks
*Please note this is a fictional project chosen for my DesignLab capstone
Introduce a new social feature that furthers users' connections with music and enhances their Spotify experience. The new feature should embed seamlessly into the Spotify platform.
A Map feature for the Spotify iOS platform that allows users to take a look at what businesses, establishments, and public places nearby and around the world are playing. Users also have the ability to follow these places to stay up to date on what music is on rotation at that location.
Spotify is a music streaming service that launched in 2008 and has since become a leader in the industry with 71 million users as of mid-2018. As Spotify continues to grow, they are exploring the idea of adding a social feature to its platform. This social feature should enhance the special connection between humans and music and be music-centered.
TOOLS USED: Market Research, Competitive Analysis, App Audit, User Interviews
First, I conducted secondary research to gain a deeper understanding of the music streaming industry, Spotify's direct competitors, and what features Spotify already offers to its users. From market research and competitive analysis, I uncovered the following key findings:
A summary of my secondary research is available here.
For user interviews, I recruited five interview participants who fit Spotify's target demographic (millennials) and who use Spotify. My interviews were guided by the following high level questions I sought to answer:
“I like that I don't have to download music anymore"
"I listen to Spotify everyday at work"
"There's no other way to listen to my favorite band right at that moment"
"Listening to music helps me get into a different mental state"
TOOLS USED: Empathy Map, Persona, Research Findings Report
The Empathy Map I created helped me visualize the data collected in my user interviews and further empathize with the user experience, and from here I was able to uncover patterns in user behaviors or thoughts which allowed me to uncover insights and user needs.
What was most interesting to me is that 80% of the participants I interviewed said they rarely share music or discuss music with other people. One participant put it nicely when he told me "I generally have a private approach to music listening". For a more in depth review of my secondary and primary research, you can view my complete Research Findings Report.
DEFINE, IDEATE, & STRATEGIZE
TOOLS USED: POV Statements & HMW Questions, Brainstorming, Business and User Goals Diagram, Product Roadmap
To define the user pain points, I crafted How Might We Questions based off my research:
TOOLS USED: Application Map
TOOLS USED: UI Requirements, User Flow, Task Flow, Low Fidelity Wireframes, Wireframe Annotations, High Fidelity Wireframes
I used a User Flow diagram to help me visualize the path our persona would take when interacting with the Map feature. From here, I created several Low-Fidelity Wireframes sketches to familiarize myself on a more detailed level with the elements, layout, and visual hierarchy in the app. If interested, you can view my Annotated Wireframes for additional notes and details. I then created High-Fidelity Wireframes, recreating all the icons, text, and elements from ground up.
TOOLS USED: Prototype, Usability Testing, Usability Findings Synthesis, Affinity Map
Going into the testing phase, I was especially interested in knowing where users would navigate to access the new Map feature, if they would use the feature, and if the concept of the feature made sense. With those goals and my Limited Functionality Prototype, I conducted usability testing with five participants who use Spotify. Using an Affinity Map, I uncovered insights which led me to the following design recommendations in order of highest priority:
Ability for users to follow a business to see what music is on rotation at that location
Only show music being played by "verified" or official business accounts in the Map feature
Add a Playing Near You section with thumbnails to the Browse screen
Introduce "verified" or official business accounts/profiles
TOOLS USED: Mood Board, Style Tile, UI Kit
I made a Mood Board and Style Tile to communicate Spotify's brand aesthetic and also created a more comprehensive UI Kit with guidelines and examples that detail how elements need to look in the Spotify app for consistency across all screens.
Lastly, I completed a second iteration of the design with the priority design recommendations and updated my interactive Spotify prototype. With this second iteration, users have a new Playing Near You section on the Home screen, a Map feature they can access to see what businesses are nearby and what they are playing, and the ability to follow a business to stay updated on what people are listening to there.
PROJECT TAKEAWAYS & NEXT STEPS
As a music lover and avid Spotify fan, I had a lot of fun with this project. It was eye-opening learning about people's music listening habits and what role music plays in their daily lives. The most intimidating aspect of this project was recreating the screens from scratch, but this turned out to be my favorite part of this project. Given more time, I would definitely like to explore how the Map graphic and the green indicator dots would scale when zooming in/out and address any user concerns regarding the location tracking feature and their privacy on one of the key screens.