ROLE: LEAD UX&UI DESIGNER (RESEARCH, INTERACTION DESIGN, VISUAL DESIGN)
CLIENT: SPOTIFY
TIMELINE: 80 HOURS OVER 4 WEEKS

PROJECT DETAILS

CLIENT  |  SPOTIFY
ROLE  |  LEAD UX & UI DESIGNER (RESEARCH, INTERACTION & VISUAL DESIGNER)
TOOLS USED:

• Research: Secondary Research, Industry Research, Competitive Analysis, Provisional Persona, Interviews, Observation.

• Synthesis: Empathy Map, User Persona, Pencil & Paper.

• Product Strategy & Ideation: POV Statements & HMW Questions, Brainstorming, User & Business Goals, Product Roadmap, Site Map.

• Interaction Design & Testing: Low, Mid and High Fidelity Wireframes, Pencil & Paper, User Flow, Task Flow, Prototype, User Testing, UI Kit, Sketch App and Marvel.

THE CHALLENGE

Design a new feature that will seamlessly embed into Spotify's current mobile application.

THE OUTCOME

An embedded new feature that enhances the users experience with discovering new music.  

BACKGROUND

As a streaming music service, Spotify's mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” They want to improve engagement and retention in the app because there's a special connection between humans and music and Spotify, being the leader on streaming music, wants to make a move into helping that connection further.

RESEARCH & DISCOVERY

MARKET & INDUSTRY RESEARCH

I began this project with secondary industry research of market trends and a competitive analysis. This helped me understand Spotify's position in the music streaming space. I learned that Spotify used to have it's own messenger and inbox but the feature was removed due to the low amount of user interaction and business upkeep. It was a feature that was missed by users who did interact with it, some even asking if it could be adjusted instead of being removed. After further research I realized there were different features that users were requesting that would help their user experience. I was intrigued to find out that most of Spotify's users are millennials and most of their music streaming is through the mobile app. This along with the rest of my research led to a compilation of great information that would be helpful in the next steps.

Threats and Challenges

• Competition

• Integrating more of a social platform

• Using outside apps to provide added features

• Company effort versus user engagement

Opportunities

• About 170 million active users

• 75 million are paid subscribers

• 52% of Spotify listening takes place on a phone

• 55% of Spotify users link their account to Facebook

You can find the summary of my secondary research including the competitive analysis here.

PROVISIONAL PERSONAS

Guided by my secondary research, I based each persona around behavioral patterns for millennials. These provisional personas helped bring focus to my contextual inquiry questions and allowed me to have a good starting point for testing my assumptions.

CONTEXTUAL INQUIRY

Informed by my secondary research, I developed a list of questions and an interview guide to structure my contextual inquiry. My interview guide went through basic questions asking people about their experience with Spotify's mobile application. 

You can find my interview guide here.

ASSUMPTION I HOPED TO TO VALIDATE OR DISPROVE:

• Majority of customers use the free version of Spotify.
• Customers want to use Spotify for more social interactions.
• Customers use Spotify at peaks times during the day and night.
• Customers were upset when the messenger was taken away.
• The main customer focus is streaming music.

SYNTHESIS & DEFINING

UNCOVERING INSIGHTS & IDENTIFYING NEEDS

After completing the interviews, I created an empathy map to synthesize the information gathered during my contextual inquiry. I looked for patterns, similarities, and contrasts in order to uncover insights from my observations and move towards identifying user needs.

KEY INSIGHTS

• Users want to be able to share music efficiently through the app.

• Users like discovering new music from provided playlists.

• Users seem unhappy with the restrictions of the search capability.

PRIMARY USER PERSONA

The information I gained from the primary user persona that came from my research helped me to better understand the users goals, needs, motivations and pains.

POV & HMW

After establishing my primary user persona, I took Mia's insights and needs and translated them into Point of View Statements, then from those, crafted How Might We questions for each one. 

BRAINSTORMING & IDEATION

I conducted a group brainstorming session for each How Might We question. I gave an introduction to the participants and explained how the brainstorm would work. Soon after, there was a competition as to who could think of the most solutions. It was fun and a great way to generate new ideas quickly. This gave me a lot of options to review.

PROJECT STRATEGY

COMPARING BUSINESS & USER GOALS

For the next step of the defining process, I used a venn diagram to map out the overlaps of the business and user goals, and technical considerations. 

PRODUCT ROADMAP

Keeping the project goals in focus, I created a product roadmap that featured three of the mutual goals from the venn diagram and placed them in order of priority in terms of development, and importance to business and user goals. The roadmap also includes proposed metrics for measurement so the effectiveness of the features can be tracked and analyzed.

Sitemap

I created a site map to show the pages that make up the Spotify app and where my feature would live on the app.

INTERACTION DESIGN

USER PROCESS

With my sitemap in place, I moved towards the prototyping process. First I created a user flow, showing an example of how a user would come across the favorite feature in the Spotify app and how they would navigate through it. Then I created a task flow, showing how the favoriting task would be completed. By mapping out both flows, it helped me to think through each step and make sure the process flowed in a smooth manner.

USER FLOW:

TASK FLOW:

UI REQUIREMENTS

Referencing my site map and flows, I created a detailed list of interface elements for each of the pages. This UI requirements document served as a checklist for me as I began wireframing. You can view the UI requirements document here.

WIREFRAMING

I created low wireframe sketches of the favorite feature and because the app already exists, I went ahead with high fidelity wireframes afterwards. I referenced the UI requirements document and sitemap to make sure I included priority elements for each page. It was at this point that I studied Spotify's mobile design patterns so that I could make the the feature embed as seamlessly as possible into the app. 

LOW FIDELITY WIREFRAMES:

HIGH FIDELITY WIREFRAMES:

USABILITY TESTING

USABILITY TESTING PLAN

I developed a user testing plan to outline the task objectives, goals and procedures.

You can see the full testing plan here.

I had 5 participants that tested the prototype. Separately, I gave them an introduction, and provided them three scenarios and three tasks, one task per scenario. Task one was to favorite/unfavorite a song. Task two was to favorite/unfavorite an album. Task three was to favorite/unfavorite an artist. The testing yielded successful results and contributed to the feature design. 

AFFINITY MAP

This affinity map was used to compile all the data from the user tests. I placed the data into three columns: success, patterns and comments. Then I compiled them altogether and listed the insights and recommendations based on the insights.

UI DESIGN

MOOD BOARD

Because Spotify is an existing application, I found pins on Pinterest of Spotify UI and other concepts of the UI. This helped to narrow the design of the feature.

STYLE TILE

After using the mood board to narrow down the design of the feature, I created a style tile using Spotify's existing branding to keep the design  consistent across all pages.

HIGH FIDELITY Prototype

Using Marvel, I uploaded all the high fidelity wireframes and created a prototype showing a limited preview of the favorite features functionality and flow.

You can view and interact with the prototype here.

UI KIT

After the wireframes were completed I collected all the UI elements and placed them into a document to serve as a reference guide for anyone who works on the feature for Spotify's mobile app.

PROJECT TAKEAWAYS

I was given a brief to make a social interactions feature for Spotify's mobile application. After doing my research and conducting contextual inquiries I found that users wanted something different. Users needed a helpful way for them to browse music. After defining the information further and brainstorming I created a product roadmap that led me to a favorite feature. This favorite feature would allow users to favorite songs, albums and artists and be able to receive recommendations on what they favorited. This would give users a more customized user experience and enhance further how they interact with music on the app. 

NEXT STEPS

In the next steps I would want to continue the process of proving or disproving my assumptions. Through this process so far, I was able to prove that the main focus of users is to stream music and disprove that users use Spotify at peak times during the day and night. In fact, users use Spotify at all hours of the day and night. It would be my goal to continue refining the user experience through this process.