Adding Social features
Timeline: Oct-Nov 2018, 2 weeks
Deliverables: iPhone app prototype
Team: Solo, with mentor guidance
Role: UX/UI Designer
Tools: Sketch App, Illustrator, Marvel
Spotify is a leading music streaming service with a mission to help people listen to whatever music they want, whenever they want, and wherever they want. To improve engagement and retention, they want to expand on their social capabilities within their mobile app.
To design social features for Spotify’s mobile app
To follow Spotify’s existing design patterns
To smoothly integrate the new features into the current app for a seamless user experience
Note: This is a speculative project, and I am not affiliated with Spotify.
Goal: To research Spotify’s business, product, and users
Process: Market Research / App Audit / Competitive Analysis / Contextual Inquiry Interviews
I started off with market research to gain a general understanding of the music streaming industry and Spotify’s user demographic. I also looked into Spotify’s current and past social features to identify potential challenges.
Next, I analyzed the current app design from the perspective of a Premium member. While exploring the features, I documented notes of all the main and social features.
I then compared Spotify to other top music streaming services, focusing on statistics of their user demographics. The comparison allowed me to better understand how Spotify users may differ from the average music-listener in their behaviors.
Contextual Inquiry Interviews.
To gain primary research data, I conducted contextual inquiry interviews with 6 Spotify users about their music streaming experiences and social experiences with music. By the end, I was able to learn more about who Spotify users are and what experiences they seek through Spotify.
Number of Participants: 6
Gender: 3 male / 3 female
Age: 18-30 years old
5 Premium members / 1 using free plan
Goal: To define the target user and understand their needs, goals, and frustrations
Process: Empathy Map / Persona / POV Statements + HMW Questions
I organized data points from each interview participant into an empathy map in order to empathize with users. I then rearranged the data points into related groups to gain insights about the target user’s needs.
Next, I created a persona “Jasmine” to represent the user needs synthesized from the empathy map. Jasmine’s goals, motivations, and frustrations also reflect the majority of data points collected from participants. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
POV Statements + HMW Questions.
To translate Jasmine’s needs into actionable tasks, I framed them into point-of-view statements and how-might-we questions.
Goal: To ideate website features, information architecture, and flows
Process: Group Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow
To start ideating possible solutions to the how-might-we questions, I conducted a group brainstorming activity with four friends. We started with independent brainstorming and then moved into collaborative brainstorming. In the end, we grouped the ideas into categories to identify major themes.
Using the how-might-we questions as goals, I decided on several features to prioritize in the design. The features were chosen from the brainstorming activity based on feasibility, how many users it would affect, and ease of integration within the current app design.
Next, I created a sitemap in order to visualize how the new features could be placed within the app’s current information architecture such that the user can intuitively navigate through the app.
To analyze the flow of the new features, I mapped out three user flows based on common scenarios I found from the user research.
I then explored the flow in more detail by constructing a task flow about a user who wants to browse music from their social network after opening the app.
Goal: To design high-fidelity wireframes following Spotify’s design patterns
Process: Sketches / Branding / High-Fidelity Wireframes
I started designing the UI of the new features by roughly sketching out ideas. I then made cleaner versions of the sketches, paying close attention to Spotify’s existing design patterns.
Before creating wireframes, I analyzed Spotify’s branding guidelines to make sure I follow them. I also created a mood board to familiarize myself with Spotify’s visual design direction.
I then created high-fidelity wireframes in Sketch for mobile. I used design patterns of Spotify’s current mobile app while creating the screens. For UI elements such as the “Friends Weekly” and “Shared With You” playlist covers, I took inspiration from Spotify’s visual design direction.
Goal: To prototype the new features and gain usability feedback
Process: Prototype / Usability Testing
To prepare for usability testing, I created a iPhone X prototype in Marvel using the high-fidelity wireframes. Feel free to interact with the prototype using the button below.
To test if users can accomplish tasks successfully
To identify areas of inconsistency within the design
To determine the overall usability of the new features
I asked participants to complete tasks based off different scenarios. Here are the basic tasks:
Find a playlist where you can listen to what your friends are listening to
Find a friend’s playlist that’s recommended for you by Spotify
Enable the Shared With You feature
Navigate to the Shared With You playlist
Identify a song through your phone’s microphone
I conducted usability testing at local coffee/tea shops with 7 participants within the age range of 15-32. I gathered data from direct observation and audio recordings.
Goal: To iterate upon the design using usability data
Process: Affinity Map / Revised Wireframes + Prototype / UI Kit
I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. This allowed me to better understand the usability of the current design.
Revised wireframes + Prototype.
Finally, I revised the high-fidelity wireframes to reflect the recommendations from the affinity map. Feel free to view the screens in Marvel using the button below.
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference.
In conclusion, we were able to add new social features to Spotify’s mobile app. By considering the goals of Spotify and its target users, we designed features that promote engagement through social connections while maintaining Spotify’s seamless user experience. Moving forward, I would want to collaborate with developers to iterate a design that considers technical constraints.
Work with developers to identify any technical limitations
Conduct research that would predict engagement levels of the new features
Continue organizing design deliverables for handoff