Feature Enhancement

Project Details

CLIENT: Spotify

TIMELINE: June - July 2019 (2 weeks / 80 hours)

DELIVERABLES: iOS Mobile Prototype

TEAM: Self + feedback provided by my design mentor and others

ROLE: UX/UI Designer

TOOLS: Sketch App, Marvel, Pencil, Paper

Background

Spotify, a leader in the music streaming space, wants to make a move into helping that connection further. It already has some core capabilities, like following artists or friends, and a basic feed of activity
, however, they want to improve engagement and retention in the app.

Goals

  • To design engaging features for Spotify's existing mobile app

  • To integrate the features into the current experience in a way that is natural and discoverable

  • To abide by Spotify's design guidelines and existing patternsiliat

Process

01. Empathize

GOAL: Understand the current trends and audience in the music streaming space
DELIVERABLES: Market Research, Competitive Analysis, Heuristic Evaluation, User Interviews

 

MARKET RESEARCH 

To get a better understanding of the music streaming space and target audience of Spotify I started off with doing market research online. I also took a look at current and past implemented features and discovered that they had sunset an internal messaging feature due to lack of use. With this in mind, I knew a greater focus would need to be placed when considering solutions for increasing engagement.

COMPETITIVE ANALYSIS

Due to the increasing popularity of music streaming, it was important to analyze other competitors within the space to understand their approach and how Spotify sets themselves apart. I looked at statistics on users, device usage breakdowns, user loyalty, and frequency of use to see how Spotify stacked up against other players in the space and to better understand their users' behaviors and usage patterns. Since Spotify had more mobile-only users I chose to focus on adding new features to mobile in order to engage more users. 

HEURISTIC EVALUATION

Next, I decided to conduct a heuristic evaluation with the current mobile app using Nielsen's usability principles to analyze Spotify's current offerings and user experience on mobile. It allowed me to analyze the user interface and how it complies with usability principles, and take inventory on existing features and screens. Many of the current offerings focus on providing music recommendations to users and giving them the agency to explore their music tastes. 

USER INTERVIEWS

I conducted user interviews with 6 users of Spotify to learn about their experiences and behaviors revolving around music. It helped me realize what Spotify users' expectations were when it came to how they interact with the product.

Number of participants: 6
Gender: 3 males / 3  females
Age range: 20 - 31

Subscription: All participants were paid users of Spotify premium who converted from the freemium service

02. Define

GOALIdentify the target audience of the business and their needs, wants, frustrations, and goals
DELIVERABLES
: Empathy Map, Persona, POV Statements + HMW Questions

EMPATHY MAP
The observations from my user interviews seemed to show that users used a variety of services in addition to Spotify for music listening and discovery. To better understand the specifics around what current users' frustrations, motivations, and expectations were, I created an empathy map organizing the various findings obtained from each participant, focusing on how to increase user engagement. 

​INSIGHTS

  • Users find artists’ engagement on Spotify is low

  • Users leverage Spotify playlists to discover music

  • Users put a lot of thought into how they curate their music library

​NEEDS

  • To feel personally connected to artists on Spotify

  • To have options for discovering new music outside of playlists

  • To be supported when organizing their music

PERSONA

Taking the synthesized insights gathered from my interviews and empathy map, I crafted a persona named Enrique Vilchez. Enrique represents the millennial target audience of Spotify who feels that music is a huge part of his life and is always looking to discover new music as his musical tastes expand. Through personifying the interview findings and providing additional context, we can ensure that all design decisions are made with the target user in mind. 

POV STATEMENTS + HMW QUESTIONS

After defining and contextualizing Enrique,  I shifted over to focus further on defining Enrique's needs and problems that our designs would solve. Using both the insights and needs extracted from our empathy map, I created POV statements and "How Might We" (HMW) questions to define the direction for ideating potential solutions.

 

03. Ideate

GOALBrainstorm ideas for the app's information organization, flows, and features
DELIVERABLES
Group Brainstorming, Product Roadmap, Sitemap, Task Flow, User Flow

GROUP BRAINSTORMING

Having defined the problems that represent Enrique's needs we want to solve for, I organized and facilitated a group brainstorming session with 4 friends in order to further expand upon my individual brainstorming ideas. I led the session by presenting our persona and encouraging everyone to focus on quantity over quality while having fun and encouraging creative thinking. 

PRODUCT ROADMAP

After gathering all the ideas produced from both individual and group brainstorming sessions, I created a product roadmap to outline the key features that would be implemented considering both resourcing and time constraints. Consideration took into account practicality, effort-to-impact ratio, and the probability of seamless integration.

APP MAP

I then constructed an app map to visually represent the general information architecture of Spotify's mobile app. This allowed me to better understand the relationship between the various screens and where within the existing architecture our new features would intuitively integrate into.  

USER FLOW

To gain insight into the various ways users could interact with the new features, I mapped out 3 user flows with our persona, Enrique, referring back to the findings from the user interviews during research. Breaking down each flow into sequential steps helped inform the relationship each screen and new feature should have and how to best optimize discoverability for each.

TASK FLOW

Next, I explored the flow further by taking a closer look at the steps and decisions a user would take when using the app to discover and explore new music they might like. This helped me uncover the sequential interactions and the thought process of how a user would accomplish various specific tasks.

04. Design

GOAL: Create high-fidelity iOS mobile wireframes in line with Spotify's design pattern guidelines
DELIVERABLES
: Sketches, Style Tile, High-Fidelity iOS Mobile Wireframes

 

SKETCHES
I first began by using pencil and paper to sketch out potential ideas for the basic layout and architecture of several screens including and surrounding the new features. While sketching different layouts and ideas, I made sure to take inspiration from existing UI elements used within the iOS app to ensure a seamless integration and leverage users' familiarity with the current product. 

Scan.png

STYLE TILE

Prior to digitizing my sketches and crafting higher fidelity wireframes, I wanted to get a strong understanding of what Spotify's design patterns and guidelines were to ensure that the new features would yield a comprehensive and consistent overall experience. I accomplished this by reading Spotify's developer and branding guidelines and creating a mood board to represent the brand's UI and imagery.

HIGH-FIDELITY iOS MOBILE WIREFRAMES

Referencing my low fidelity wireframe sketches and screenshots of existing screens in the Spotify iOS app, I was able to mock up higher fidelity wireframes of the screens with the new features integrated in a way that follows similar patterns seen throughout the existing UI. 

05. Prototype

GOAL: Prototype the designs and obtain usability feedback through testing
DELIVERABLES
: Interactive high-fidelity iOS Mobile Prototype, Usability Testing

HIGH-FIDELITY PROTOTYPE
Using the high-fidelity wireframes created earlier, I developed an interactive iOS mobile prototype using Marvel. This helped me to conduct effective testing with participants and gather usability feedback. To play around with the prototype please click below:

USABILITY TESTING
Objectives:

  • Test to see if users can accomplish given tasks successfully

  • Identify areas of difficulty and opportunities for improvement from hi-fi wireframes

  • Evaluate the usability of the features designed thus far


Tasks:

  • Find the “Song of the day” recommendation and play the track

  • Locate your collection of artists and sort them by most frequently played

  • Navigate to your “social settings” and enable the artist streaming feature

  • Find the track the artist is currently listening to and play it


Results:
Using the interactive hi-fidelity prototype, I conducted usability testing with 5 participants at a nearby coffee shop and was able to make observations and take notes on their behaviors and interactions. The tests provided valuable usability feedback on what would need to be iterated and further refined for clarity.

06. Iterate

GOAL: Iterate on the high-fidelity designs based on usability feedback
DELIVERABLES
: Affinity Map, Revised High-Fidelity iOS Mobile Wireframes + Prototype, UI Kit

AFFINITY MAP
I crafted an affinity map which helped me synthesize my usability test findings, identify patterns, and organize the feedback in a way that was easier to extract design recommendations from. Since my results demonstrated that all participants completed each task successfully, I chose to focus on further iterating on the functionality and discoverability.

​INSIGHTS
 

  • Users felt it wasn’t as easy to know to enable the live artist listening feature in settings and expected it should be already enabled
     

  • Users expect more specific control for which of their followed artists they would get push notifications for when live streaming on Spotify
     

  • Users felt the copy for the Song of the day was too wordy and would skip past it even though it was at the top

RECOMMENDATIONS (Highest Priority ↔ Lowest)
 

  • Enable the live artist streaming feature by default and move the settings into ‘Notifications’ settings instead of ‘Social’ for clarity
     

  • Create a specific settings page for live artist listening feature that displays a list of toggles for followed artists
     

  • Trim down the copy for Song of the day to just “Your ‘Song of the day’” so that it’s easy to parse

HIGH-FIDELITY WIREFRAME + PROTOTYPE REVISIONS

Referencing the comments and design recommendations revealed from the affinity map, I made corresponding changes to the initial wireframes and prototype to reflect the collected usability feedback. See below for the main changes and additions made to the initial designs.

sp_case_study_revisions.png

UI KIT

While finalizing the wireframe and prototype, I curated a UI kit to organize the various elements and patterns used throughout as a reference guide for future use. I created each element from scratch on Sketch to ensure comprehensive and consistent visual quality across my designs.

Reflection

I found this project to be a realistic take on how most design projects in the real world are since a majority seem to focus on adding new features to existing products and flows. This project also helped me hone my design skills by focusing on integrating new features with existing design pattern guidelines. Within the research phase of the project, we identified that engagement and maintenance requirements were key deciders of whether a feature would be successful or scalable. Moving forward, It would be crucial to track users' interactions with the new features through metrics and also focus on having engineers think about implementing the features in a way that can easily scale. 
 


Next Steps
 

  • Collaborate with engineers to handoff final mockups and discuss any technical considerations

  • Release feature to a small subset of target users and begin collecting metrics to see how new features impact overall usage patterns and behaviors

  • Conduct further usability testing with hi-fidelity prototype and collect usability findings

  • Iterate on designs based on synthesized feedback and update UI kit accordingly

© ALVIN KUANG 2019