Group Playlist
project details
Client: Spotify (This is a speculative project I did alone and was not hired by Spotify)
Timeline: 2 weeks
Team: Self-directed with feedback from mentor and peers
Deliverables: Mobile app feature prototype and branding
Role: UX Design / UI Design / Feature design
Tools: Sketch, InVision, Spotify
Problem: Spotify wants to expand their social capabilities. I will be helping them define the best way to move forward in that direction, and provide them with a prototype of the feature(s) integrated seamlessly within the rest of the app.
Objective: Design and integrate a social feature to Spotify using current Spotify assets; without altering Spotifys platform.
You can find my high fidelity prototype here or at the end of this case study
Empathize
Research Goals
Understand current social media trends featured within existing software
Understand what draws social engagement in a non-social-media specific sphere
Gain insight into the mobile use of Spotify as a whole
Discover ways in which users interact and share Spotify's library
Discover what social feature Spotify users are excited about
Identify and evaluate the competition
Identify motivations, goals, needs and pain points of Spotify Premium users
Market Research
It was imperative to get data on Spotify and the current state of social media, beginning with market research. There is just a wild amount of data on social media out there! Who knew.
Spotify claims 36% of the global streaming market, with 44% of users listening to music through Spotify on a daily basis
There is a similarity of usage across different age groups on social networks. Social networks appear to be at a state of maturity where they give opportunities to reach all age groups and gender groups. The exceptions to this are Instagram and Tumblr which screw to a younger demographic.
Competitive Analysis
By looking at the competition I was able to gain insight of the current market, and where I might be able to draw patterns or identify problems, I also made a point to focus on their social aspects.
PROVISIONAL PERSONAS
I had enough data to make a hypothetical group of people I might encounter during my user interviews. This group wasn’t just fun to make, it prepared me for my encounter with Arturo and Kim who fit the Vinyl is Better Guy persona and Retail Employee with Speaker Access perfectly.
HEURISTIC EVALUATION
Time to take a deep dive into Spotify and evaluate it against Jakob Nielsens 10 heuristics for user interface design. This reveals to me that Spotify is clearly not designed for social interactions; Following or being followed is confusing and finding friends isn’t totally clear, but as these are not high priorities for Spotify, it is easy to understand why they seem hidden.
1 on 1 User Interviews
Walking around north Brooklyn, I encountered five people willing to share their thoughts with me. Going off a pre-written script, I asked the participants the same questions, making alterations where necessary. The participants all verified they have Spotify Premium and use Spotify with high frequency.
After the interviews, data was synthesized with points from each participant and arranged into an empathy map
My groupings uncovered patterns that gave me insight toward what the feature would need. Many of these patterns seemed obvious; Connecting must be enjoyable, for example. However other patterns began to shape the feature more definitively, like the need for users to have productive use of their time.
With the needs of our users derived from the empathy map and the demographic information gained through interviews, I aggregated the data into one fictional person to act as our user persona. Rob is my guy. He is motivated, ambitious and expects reliability. He commutes often and music is an integral part of his day.
Define
POV STATEMENTS & HMW QUESTIONS
Taking the needs of my persona, Rob, and looking at the insights of the empathy map, I generated point of view statements which lead to the projects, “How Might We?” questions. The formula is simple:
POV = (User Needs + [because Insights])
BRAINSTORMING
I took 2 to 3 minutes to brainstorm answers to my HMW questions. I did not limit myself and let my answers come to the page without hesitation. I love brainstorming, it comes naturally to me and this session was an integral part of the decision to allow for users to comment in the design to come.
GROUP BRAINSTORMING
I gathered a group of four friends and asked them to answer the four HMW questions without limitations on creativity or concept. It was important to me that the group process the questions uniquely. I avoided any clarifications, or follow up explanations, of what was meant by any of the questions purposed.
I wanted the group to feel we were accomplishing something together. I did this by asking them to write their answers on a sticky note and placing it on a piece of paper where the HMW question was printed. By the end of the session, we had a very satisfying “pile” of group brainstormed answers!
I took our collective ideas and put them in order on my whiteboard at home. Then I took each idea and bounced it off “Rob” my persona, and found which ideas were the strongest.
The feature is really starting to take shape, after all the research so far it seems clear that Spotifys new social feature will be Group Playlists
BUSINESS & USER GOALS
Gotta lay out what everyone needs, there is always common ground and that common ground is a great focal point when writing up a feature roadmap. Spotify has an incredible mission statement; having both business and user share altruistic goals is rad as rad can be.
FEATURE ROADMAP
The features is getting more defined by the moment, this is a perfect time to generate some priorities, before any feature creep can set in! This is where I define my feature; Group Playlists. You and your friends build playlists together, voting on songs to keep and commenting along the way!
Ideate
SITEMAP
How will the new feature fit into Spotify? Where would it go? I don’t want to change Spotifys landscape, so I think it would be best situated within the meatball menu and by the new playlist section.
UI REQUIREMENTS
This document is the starting point for what our users will eventually interact with. It details what is required for the user interface in order to function. This document will change as the design continues, but for now it’s a great start.
TASK FLOW & USER FLOW
I need to understand the flow. Task flow and user flow can illustrate a map for me in this way.
LOW FIDELITY WIREFRAME SKETCHES
Ive got a solid understanding of how the feature works and how it will be implemented. Its almost time to start building so let me lay some visual ground work. Fast and loose is how I like my low fidelity sketches! Get ideas down, make them work then iterate. Fast.
HIGH FIDELITY WIREFRAMES
Taking my design, I gathered resources for Spotify. Color palette, typography, guidelines and a whole mess of home made icons. I spent too much time looking for Spotify assets and many of them looked off, so I took the opportunity to practice my UI creation. With the exception of the Home screen, all the elements on my screens are hand made.
Prototype
With my high fidelity wireframes itching to see some thumb action, I use Invision to create a functional prototype. Though I didn’t create a storyboard, I had a user journey in mind for Rob my persona. Rob is off to the Caymans for vacation and is creating a playlist for his week in paradise with his friends. Clearly, Eddie Money’s Two Tickets to Paradise is the right song to kick off this group playlist.
Test
Usability Testing
Test Objectives:
Main functions of the app are clear and communicative
Observe areas of delight
Observe expectations vs design
Discover opportunity to enhance user flow
Observe any areas of hesitation, confusion, difficulty, etc.
I was fortunate enough to go walking on a very nice fall day in NYC and found a lovely group of people who were gracious enough to run through my prototype. They were each given a scenario for context and a list of tasks to complete. The test was moderated, in person using a think out loud method. Below are my findings.
AFFINITY MAP
My usability test resulted in another round of useful data; collected, clustered and organized here on an affinity map. My usability test revealed that my design for voting needed work as well as affordances and signifiers for each task.
MOOD BOARD
Ive got some revision to make and I want to integrate as seamlessly as I can so I put together a spotify mood board to solidify the look and feel of the feature Link Here
STYLE TILE
Normally, I would make a style tile with elements I plan to create. However, all of the assets I will be using are already in use in Spotify, so I instead leaned in on a bit of branding and marketing.
UI KIT
My home brew UI Kit of the assets for Spotify!
HIGH FIDELITY REVISIONS & PROTOTYPE
Finally, my revisions are made and implemented in a new prototype ready for testing! Feel free to mess around with the current version here
Reflection
I loved this project. Like many people who wish popular software would work better for them, I was very excited to see what I could add to enhance such a great program like Spotify. Throughout this design, I fought the urge to run with my personal desires and trusted in the process. The result was a design that I am very proud of and am excited to show it to anyone who will look!