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
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.
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
GOAL: Understand the current trends and audience in the music streaming space
DELIVERABLES: Market Research, Competitive Analysis, Heuristic Evaluation, User Interviews
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.
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.
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.
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
GOAL: Identify the target audience of the business and their needs, wants, frustrations, and goals
DELIVERABLES: Empathy Map, Persona, POV Statements + HMW Questions
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.
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
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
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.
GOAL: Brainstorm ideas for the app's information organization, flows, and features
DELIVERABLES: Group Brainstorming, Product Roadmap, Sitemap, Task Flow, User Flow
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.
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.
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.
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.
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.
GOAL: Create high-fidelity iOS mobile wireframes in line with Spotify's design pattern guidelines
DELIVERABLES: Sketches, Style Tile, High-Fidelity iOS Mobile Wireframes
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.
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.
GOAL: Prototype the designs and obtain usability feedback through testing
DELIVERABLES: Interactive high-fidelity iOS Mobile Prototype, Usability Testing
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:
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
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
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.
GOAL: Iterate on the high-fidelity designs based on usability feedback
DELIVERABLES: Affinity Map, Revised High-Fidelity iOS Mobile Wireframes + Prototype, UI Kit
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.
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.
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.
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.
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