Research

Analyzing Secondary Data

To begin, I conducted a rapid research session of secondary sources. I spent a few hours getting a sense of Spotify’s place within the landscape of streaming music providers and gathering enough information to help determine the focus and scope of my research. I identified some key challenges and opportunities and made a list of initial assumptions and questions. From there, I conducted a competitive analysis comparing competitors’ strengths and weaknesses, as well as identifying where opportunities for Spotify to differentiate itself with a social feature might exist.

App Audit

In my research, I found that Millennial’s comprise 72% of Spotify listeners and are also listed as top smartphone users, with a 98% ownership rate. Based on this information, I made the initial assumption that Spotify’s users might prefer to connect and communicate socially through Spotify via the mobile app.
‍
Although extremely familiar with the mobile app, I thought it was important to conduct an app audit. This helped me gain a clear grasp of the app’s architecture, hierarchy and content, which I felt was important to establish before considering how a new feature might integrate within the design.

Provisional Personas

I then created three provisional personas based on key demographics and behavioral traits of Spotify users. These personas helped me frame my interview planning and identify ideal interview subjects.

Conducting Primary Research

Drawing from the list of questions and assumptions I drafted during my secondary research and research plan, I crafted questions to ask participants about their music listening and sharing habits. I interviewed 5 people in person at a local coworking / coffee shop. Participants ranged in age from early 20’s to mid 30's, resided in major US cities, and reported listening to music daily.

Research Synthesis

Uncovering Insights + Identifying Needs

With the feedback gathered during user interviews, I created an empathy map to synthesize my findings. Observations and statements were organized on virtual sticky notes, then paired together with similar information, identifying themes and patterns.

Insights

• Users enjoy conversing with friends about music they are listening to.
• Users enjoy having music played for them without having too much control over the music.
• Users don't have an easy way of knowing when artists are in town for a concert.
• Users often listen to music while in the car on their commute.

Needs

• Users need a way to communicate with friends about music they are listening to.
• Users need a way to listen to music they will like without controlling the music at all times.
• Users need the ability to get informed when their favorite artist's are going to be performing in town.
• Users need the ability to safely operate Spotify while in the car on their commute.

Creating an Ideal User

Based on the insights and needs discovered through my primary research synthesis, I established a primary user persona Daniel Martins. Daniel is a young professional that lives right outside of NYC. He loves finding new music and sharing music with his friends. They all have a strong passion for music and he like's peoples reactions to music he shows them. He enjoys creating playlists for different occasions and seeks music from all platforms.

Define

Defining the Design Problem

With a persona established, I moved into translating the insights and needs of Daniel into defined Point of View Statements, then crafted a set of How Might We Questions to guide my design. By defining the design challenge and framing it as a question, the roadwork for the ideation phase was paved for a range of innovative solutions.

Generating Ideas

I led a casual group brainstorming session with 5 participants (and a dog). We focused on all three of the “How Might We” questions. For each HMW Question, the room brainstormed and discussed solutions, recording ideas on sticky notes. Gathering individuals with different experiences and perspectives provided the chance for me to gather a wider range of ideas than if I had been brainstorming solo. It also offered an interesting interaction where everyone was able to play off each other's thoughts, creating a unique momentum.

Comparing Business & User Goals

To identify goals that consider both Spotify’s and Daniel’s priorities, I mapped out business goals, user goals, and technical considerations. The overlapping areas of this diagram identified the project goals, where I focused all my time and effort.

Defining & Prioritizing Features

Noting the shared user and business goals, I looked back at ideas generated during brainstorming and determined which ones could be further developed into a social feature that would respond to the needs of both parties. The product roadmap that was established outlines specific details for each, based on prioritization.

Assigning a Structure

Informed by the features and priorities outlined in my product roadmap, I created a revised app map for Spotify, showing how the new feature would integrate within the existing architecture of the app.

Interaction Design

Charting a Path

With the app map established, I moved towards prototyping. I first created a task flow that identified a key task that all users complete in an identical way.

Then, going into even more detail, I created a user flow thinking through three scenarios, showing three possible ways a user might interact with Spotify. Doing this helped me make sure I’d included all necessary key frames I’d need as I created wireframes for my prototype.

UI Requirements

I then considered what interface elements each screen should include, and outlined them in a UI requirements document. This document served as an outline and checklist as I designed the key screens for the user flows, while conveying the planned functions and design elements to project stakeholders.

Sketching

I created low-fidelity wireframe sketches of key frames within the user flows I’d mapped out. These sketches helped me think through the integration of the new feature and layout before moving into digital renderings.

Wireframing

Working with Spotify’s exiting UI, I moved straight into designing high-fidelity wireframes. The goals was to develop a prototype that would allow me to test user interactions with the new feature in a context as authentic as possible to the real experience of the app.

Usability Testing

Testing Users

Before speaking with users, I first outlined objectives, goals and procedures in a usability testing plan document. This served as a guide during testing sessions. Five participants were asked to complete a series of four tasks tied to four scenarios during in-person testing. I also recorded each in-person session with the app Silverback, which records both the screen and the test subject’s face and voice as they navigate through the screens.

Priority Tasks

Locate and join a Live Room. Once inside join the queue.
Create a private Live Room
Join a private room and upvote the song that is currently playing.
Locate what your friends are listening to.

Prioritizing Revisions

Referring to notes taken during user testing, I created post-its with observations and assessments for each test subject, looking for patterns and trends, then sorting accordingly. I then created an affinity map as a way of translating my observations to insights and recommendations.

User Interface Design + Iteration

Brand Identity

Because Spotify has a well-established brand, creating a mood board was an exercise in double-checking that my UI aligned with their visual direction. It was also an opportunity to gather inspiration that could be incorporated into the new feature. I began by defining the brand attributes, which were informed by the project brief and my user research.

ARTISTIC / BOLD / SEEK / COLLABORATIVEINVITING / STIMULATING / YOUTHFUL

Pulling from Spotify's branding guidelines, I created a style tile using their existing color palette, typefaces, and imagery, including any new elements specific to the new Live Rooms feature.

I then assembled a UI Kit, drawing upon existing Spotify UI styles and elements and adding new styles and elements specific to the Recommendations feature. This provided an opportunity to review styles, design patterns, and UI elements for consistency.

Prototype

With a set of recommended revisions in hand from affinity mapping, I tweaked my previous designs in Figma and created a high-fidelity prototype. This prototype provides an opportunity for another round of user testing before going further with the app design and implementation

Project Takeaways

Respecting the product. Working to improve an existing product by identifying and designing a new feature was an exercise in finding creative solutions within a specific set of constraints. Designing within the constraints of an already established (and highly successful) visual design system was the most challenging aspect of this project. In creating this new feature, I felt a sense of responsibility to acquaint myself with and maintain Spotify’s mission. Only once I spent time dissecting the current design and all it’s nuances, did I feel confident moving forward to introduce something new. 

Keeping it simple. In my research, I tried to learn as much as possible about the company’s priorities and where they’d already been in terms of offering social features. I gave much thought to the fact that Spotify had decided to end their social messaging feature. Another idea which was taken into account was their recent redesign. Spotify went from having 5 navigation screens to 3. Within each screen they also tweaked how information was presented. Integrating new features in a limited system was a challenge however it forced me to assess my features and determine what was really needed.

Next Steps

With more time, I’d like to explore the interactions of the live room and conduct further usability testing. The live room screen was the most challenging feature to design for as I had to balance the features that make a live room useable while maintaining a stripped back UI as Spotify has recently redesigned the application to reduce the amount of screens.

You May Also Like

Zeit

Mount Everest

Bhuku