SPOTIFY

Header

PROJECT OVERVIEW

ROLEUX/UI Designer, Design Strategist
CLIENT:  Spotify*
TIMELINE: 80 hours over two weeks

*Please note this is a fictional project chosen for my DesignLab capstone

CHALLENGE:
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.

OUTCOME:
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.

BACKGROUND:
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.

DESIGN PROCESS:

Design-Process

RESEARCH

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:

  • None of Spotify's direct competitors have an in-app messaging/sharing feature
  • All of Spotify's direct competitors allow users the ability to follow, like, and/or comment on music and/or artists
  • Location-based features are becoming more popular
  • Millennials, Spotify's target demographic, are interested in connecting with brands and influencers

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:

  • When and how do users stream music?
  • Why do users choose to stream music with Spotify?
  • Through what platforms do users connect with others over music?
  • How do users currently share music with others?
  • Why do users share music with others?
User Interviews-01

“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"

RESEARCH SYNTHESIS

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.

Empathy Map-01
Empathy Map-02

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.

Persona-01

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:

  • How might we provide a safe way for users to access their music while driving?
  • How might we help users feel connected to others at their workplace?
  • How might we provide a way for users to add songs in Spotify that they hear in their daily lives?
brainstorming_1
brainstorming_2
brainstorming_3

INFORMATION ARCHITECTURE

TOOLS USED: Application Map

The highlighted screens in my Application Map represent the screens I will design for the new features and include only the two top priority features that I decided on. Since the Map feature will be something that helps users discover music, I placed it under the Browse screen and Search screen.

Application Map

INTERACTION DESIGN

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.

Low Fidelity Wireframes-04

USABILITY TESTING

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

USER INTERFACE DESIGN

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.

Descriptive-Hi-Fi-Wireframes
Spotify_home_optimized
Spotify_map_optimized
Spotify_starbucks_optimized
Mobile-perspective-Mockup-gradient

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.