Improving an Existing App

Spotify

Augmenting Spotify's features to improve user engagement

Case study image
View prototype

My Role

UX Researcher, UX Designer, Interaction Designer, UI Designer

Team

Self-directed, with guidance from course mentor

tools

Sketch, Affinity Designer, Airtable, Miro, Draw.io, Marvel, InVision, UXPin

Duration

100 hours over 2 weeks

challenge

Originally created as a solution to digital media piracy in the early 2000's, Spotify has become the leading music streaming service in the world. Its mission is “to help people listen to whatever music they want, whenever they want, wherever they want – in a completely legal and accessible way.”

Despite Spotify's global success, they know that they need to improve user engagement and retention, especially given the intersection of music and social connection between people. Past attempts at leveraging that need haven't been very successful – so, the question remains, what's missing?

Project objectives:

  • Conduct research to identify opportunities for new features in Spotify's mobile app
  • Prioritize and design the features that cater to target users' needs, while fulfilling business objectives
  • Maintain consistency between new designs and Spotify's existing UI

The project and content presented here are speculative and for educational purposes only; I am not affiliated with Spotify.

Outcome

A high-fidelity prototype of Spotify with these new features, integrated seamlessly with the app's existing design (at the time of this project, May 2019).

Process

Design Thinking process

Phase 1: Research

Secondary Research

I kicked off the project by learning more about Spotify's positioning in the music streaming industry. Through market research, I also uncovered challenges that Spotify faces when designing social engagement features. We can see that building a strong user base is essential for any social feature or app.

Highlights from market research.

These challenges helped shape the questions I asked later on during user interviews. But first, I compared Spotify's user engagement with that of other high-performing music streaming services. (Data from 2018.)

Spotify might not have the most monthly unique users, but it has a higher percentage of loyal and engaged users (i.e. stickiness).

Based on these findings, I concluded that my user interviews would need to be of:

  • Spotify Premium users who use Spotify at least 2-3 times per week
  • Millennials or college students

Before heading out to coffee shops for user interviews, I familiarized myself with the current Spotify app. I noted the function and purpose of each screen/component, as well as usability heuristics to keep in mind when designing new features.

Spotify app audit (heuristic analysis).

Primary Research

I conducted interviews with five Spotify users at local coffee shops and at a university campus. Read the full interview guide and notes here.

Using an empathy map, I was able to better understand how college students use Spotify and their motivations for using certain features.

Empathy map showing how I arrived from interview observations to user needs.

I then created a persona with this information – a guideline for the product development and marketing processes that follow.

User persona highlighting goals, needs, frustrations, and motivations.

Phase 2: Define

Using the needs and insights, I crafted "Point of View" (POV) statements and "How Might We" (HMW) questions to define the design problem.

"How Might We" questions define the problem.

Phase 3: ideate

I brainstormed a handful of ideas to answer each HMW question, then facilitated a group brainstorm with four of my friends. (Since my friends aren't all based in the same city as me, I hosted a remote brainstorm via Zoom. Curious about how it was set up? View the agenda and guidelines here.) My friends generated a plethora of ideas, while I took a step back and focused on guiding our discussions.

The group brainstormed on a virtual whiteboard, then I used a physical whiteboard to draw connections between ideas.

It's easy to fall into the trap of picking ideas (features) that sound snazzy or completely user-centered, so I mapped out business and user goals to ensure that I prioritize ideas at the intersection of both.

Product design lives at the intersection of business and user goals.

Next, I used Airtable to create a product roadmap that prioritizes features based on goals addressed, effort, and confidence level. Interact with the roadmap here. (In this case, I made priority and release term the same to keep the roadmap simple. In reality, release term and priority level would be separate.)

Features that address multiple problems and goals, require low effort, and have high confidence become first priority.

With the new features selected, I then created an app map to determine where to place each feature. I referenced the app audit from earlier to ensure any new navigation would be intuitive to users.

App map with location of new features in the app.

Phase 4: Design

Keeping in mind what I heard in user interviews, I mapped out three user flows that incorporate the new features.

User flows for three scenarios.

I then looked at one scenario/flow in detail, to map out the screens and interactions that I need to design, especially given the user's context.

Task flow for finding and sharing music.

Using these visuals, I outlined UI requirements and then sketched out each screen. View the full UI requirements document here.

UI requirements.
Low-fidelity sketches of each screen in the task flow.

Phase 5: Prototype

Though I could have created a low- or mid-fidelity prototype to test out the new features, I decided to create a high-fidelity prototype that matched Spotify's existing UI design. This allows users to give feedback during usability testing on whether those new features fit in with the overall Spotify experience. With a low/mid-fidelity prototype, they may focus too much energy on imagining/remembering what everything looks like in the actual Spotify app.

Screens from the high-fidelity prototype, prior to usability testing.

With my prototype in Marvel, I hit the coffee shops once again to find Spotify users to test with. After testing the prototype with five participants, I began to see patterns in their reactions and feedback. Back home, I synthesized test results with a sticky-note affinity map, uncovering three key insights. I then translated those insights into design recommendations and revised my prototype.

Usability test insights become design recommendations for the final prototype.

Applying these design recommendations gave me the opportunity to improve some other design details:

  • Add song preview buttons to the "Share the love" overlay screens
  • Simplify the Bump icon to scale better
Revised high-fidelity wireframes
Demo of the final design

Phase 6: Iterate

Next Steps

Usability testing confirmed that Bump is a delightful and desired feature. But before building it out, I would conduct user interviews delve deeper into user needs for this particular feature. Doing so may confirm that NFC/Bluetooth (or other device-to-device method) sharing is the right solution, or may uncover something else as the underlying need and thus lead us to a different design solution. Either way, we'll also need to figure out the hardware technicalities for such a feature, especially if created in conjunction with platform-agnostic music sharing (another feature identified in this project).

Reflection

In retrospect, there are two key moments that stand to me:

  • Combining my design and communication skills – My favorite part of this project was hosting the group brainstorm. It not only helped me generate more and better ideas, but also afforded me the chance to do something I've always enjoyed: facilitation. I loved being able to step back as the lead designer and focus on guiding my peers, encouraging them to indulge their creative side. In future projects, I hope to facilitate more and continue improving my facilitation skills.
  • Eliciting in-depth responses in user interviews – Research was the most challenging phase of this design process. After a day of interviews, I realized I didn't have deep enough insights to identify users' implicit needs. Due to time and resource constraints, I wasn't able to conduct additional interviews. However, thanks to the guidance of my mentor and lots of replays of my interview recordings, I was able to work with what  I had and define the design problems.
Let's build something together

Interested in working together? Drop me a line – I'd love to hear from you.
I'm currently available for consulting on UX design and Webflow projects.

SAY HELLO