Putting Myself In A Designer’s Shoes

Spotify UX case study

Mohameth Seck
12 min readApr 4, 2020

When first starting to code, one thing that interest me was the design that went into the projects I was building. I was unknowingly doing UI/UX design for my side projects before even coming across the terms. After doing more research on the topic I’ve realized that design is an entirely different problem by it self that needs solving.

Overview

I am currently in my second year specializing at Holberton School in Full Stack Web. One of our projects is to understand how designers work by:

  • Solving an UX problem
  • Writing an UX case study that explains our discoveries

Our project is presented as this:

After reviewing the business’ goals at the end of last quarter, the Research team wants to identify if we have an opportunity to make users’ stream more content. They have identified a challenge which they think is worth exploring: “Improve how Spotify users find music to listen to.”

The project gives us three fictional characters with personas to choose from. The exercise focuses on the Spotify desktop app.

Spotify is a popular music streaming service available as a web, mobile and desktop app. The app allows users to search and stream millions of songs from all types of genres including podcast. You can also browse through selections of friends, artists, and celebrities, or create your own radio station to listen too. With a vast catalog of music to pick from it can be intimidating finding the right songs or podcast. This was the case for the three personas provided to us for this project. One user was a young tech savvy college student, but struggled to narrow his search results when discovering music. The second is a mother who’s Spotify account is based on what her kids listens too and has a hard time finding new music not catered to her kid’s listening habits. The last persona is a 65 year old women who actually studied music in college and knows exactly what she’s looking for in her search, but is not comfortable with new technologies.

Problem Statement

After reviewing the three personas I narrowed it down to one. Michelle was a perfect mix of the other two personas plus more. Her pain points were similar to Alex, the college student, where his pain points were focused on the list of results when finding new songs. Just like Michelle, browsing Spotify’s huge library of songs can feel overwhelming and impatient. Regina, the 65 year old women is a user who already knows the type of music she’s looking for, but her pain points are with the navigation of the app and the layout. There are also some actions she was looking to perform, but they were either not there or not easily visible. Michelle is a user who sits right in between these two challenges as she’s not sure what she’s looking for and when she does it’s hard to understand how the app works.

Michelle’s persona

Michelle, having similar issues to these other users, also has some specific challenges pertaining to her. I followed and reproduce every step of her journey to understand what she was thinking and how she was feeling. One thing that gained my attention was that Michelle was the only user to drop out from the Spotify app towards the end of her journey. Since the company’s goal is to improve how people find and listen to music, it’s critical that users like Michelle find the experience easy, quick, and enjoyable. By solving her pain points I believe I can also solve a few of the other personas challenges with the app, but let’s focus strictly on Michelle. I believe her problem is definitely the most important especially from a business perspective when you want to retain users and have them coming back to use your service.

Michelle’s user journey map

User & Audience

Our user Michelle is a Mother who has her hands full with four children. If that isn’t enough her husband is a Marine which means she has to care for her kids alone before going to work. I’m sure we can all agree that being a parent is a full time job by itself so it would be nice if Michelle can discover music to her liking to relax after a long day. People listen to music to get pumped before a workout, study, or just to clear their mind. Spotify having a vast selection of music to choose from is perfect for Michelle to discover and enjoy. Michelle’s music expertise from the persona is low compare to someone like Regina who has a Bachelor of Music and knows exactly what they’re looking for. She is also a little less familiar with technology, but not as comfortable as someone like Alex.

Overview of other personas

Another thing to account for is that Michelle cannot afford to pay for an additional account. Her fear is discovering new music and not being able to find songs for her kids again. Spotify builds around your listening habits so finding an affordable solution to this problem will benefit other customers using the platform and who also can’t afford another account. Understanding who we’re building for helps us avoid using our gut feeling and assuming we know how the user will use the platform. People using the Spotify service come from different demographics, culture, behaviors, feelings, and needs. Being able to empathize with them allows us to build a product with them in mind. Now we’re thinking like a UX Researcher!

After reviewing Michelle’s goals, needs and wants I came up with ideas on how we can better improve her experience.

Opportunities for improvements:

  1. Allow accounts to have a set number of profiles. So a profile for Michelle and another for her kids. Spotify is also free to use with a free account so maybe allowing a way to switch between accounts, paid and free, can also help.
  2. Provide a wide selection of genres, radios, and more that she may like in the beginning of her setting up her profile. New users may not know where to begin their search so prompting them to select a variety of things they may find interesting can limit the frustration of browsing through millions of songs
  3. Filter — a way to filter out her search results so she’s not overwhelmed with a long list of options.
  4. On boarding to help new users navigate the app. Also having a help button somewhere so she can always refer to that when looking to perform a task.

Sketch: Brainstorming Ideas 🧠 💡

We can see from Michelle’s user journey that a lot of time was spent browsing and that led to her feeling impatient. It’s also where two of her pain points were so this should definitely be our main point of focus when solving the UX. When we look at the Persona’s goals, wants, needs, and fear we see that a lot of it is focused on discovering music. Michelle also needs help to figure out what she likes and navigating the app.

Revisiting Michelle’s persona

Below is a sketch of ideas I brainstormed for the UI design. A section for her to switch to other profiles/accounts, an onboarding design to introduce Michelle to the layout, a prompt asking her to select what she may like after completing the onboarding, and a redesign search filter to limit how much time she spends browsing for music.

Designs I sketched out

Roles & Responsibilities

I chose to work alone on this project. I sketched out the designs and final Figma design mockups. I also created a flow diagram to better visualize how the user would navigate the app and what next steps they would be introduced through their user journey. I fulfilled all roles during this assignment and it has allowed me to try and experience all aspects of the project.

Scope & Constraints

During this time other teams might be having difficulty communicating with other members and teams while the Coronavirus (COVID-19) epidemic spreads. The only constraint during this time for me was not being physically present on campus to obtain feedback from other students. This resulted in me having to better communicate my ideas virtually while many people work from home. The San Francisco campus is also three hours behind the east coast, so I had to better manage my time to gather feedback and communicate with other students. Same goes for the Colombia campus. I’ve been fortunate to still have my job during these times, but this also made me have to better manage my time in balancing other responsibilities and project assignments.

Decision: The Solution

Designs I sketched out

The first sketch designs just happen to be my final approach to the problem. Michelle biggest goal is figure out what music she likes. She wants her own “space” specifically for her. She needs a way to guid her to new music while being able to find again the music SHE discovered and liked. Finally, her worst fear is being overwhelmed with results and not finding her kid’s music again. I feel these issues can be tackled with the following:

  1. Giving Michelle her own profile and not having her create another account. This resolves her not having to pay for another subscription.
  2. By giving her, her own profile she can easily switch between her and the kids profiles that are each catered to their own liking. No worrying about losing what her kids already enjoy and mixing her own discovery of music.
  3. A onboarding guid to help her navigate the UI and easily find what she’s looking for.
  4. Prompting the user to select genres or artist she already likes before entering the app for the first time and suggesting new music based on that.
  5. A simpler search filter with less crowded options along with a slicker search browsing experience.

When getting new users you want to introduce them to your service in a very simple way and quickly get them familiarized with your platform. Then, in the case of Spotify, you don’t want to bombard them with so many results. Instead, make their experience discovering music more centered to what they type in the search bar and more options for filtering to quickly get to what they may be searching for. Less is more! Although the solutions solve Michelle’s problem more specifically, it also resolves what the other personas face and that’s exploring Spotify’s massive catalog of music. With this you guid users through your platform and retain them by making their browsing experience simpler and more fun to discovering music. There should be a emphasis on discovery.

Storyboard of User Flow

Link Figma Design Mockups

https://www.figma.com/file/3HfHIQ9AzgkErkTVqflrNS/Spotify-ux-case

Figma Prototype Link

https://www.figma.com/proto/3HfHIQ9AzgkErkTVqflrNS/Spotify-ux-case?node-id=460%3A19&viewport=-17%2C-35%2C0.18200267851352692&scaling=scale-down

Screenshot of Designs

Final Design Mockups

My Process & What I Did

What happened

Before beginning the project I reviewed the personas and selected Michelle. Michelle is the only user that dropped out from the app during her user journey. From a business perspective I saw this as an opportunity to explore and resolve these issues because if other users are experiencing her pain points then other users may be dropping from the app as well. The challenge was to examine the selected persona and redesign the UX to solve that user’s problems. During that time I researched and took notes on what users like Michelle might be going through. I went through her user journey and performed the same task as she did. I looked at her pain points and how she felt during that time. I observed how much time she spent at a specific point in the app and focused on what the biggest obstacle was. I then sketched out rough draft designs on paper and then high fidelity mockups on Figma. I set up wire frames for testing and had actual people try out the new design and observed how they navigated the newly designed UX. The solution was to make the browsing experience simpler and less crowded with results while catering the user’s listening habits to recommend new music for them to discover. Lastly, an onboarding guid to help her understand how to navigate the app.

Validate: Usability study to test solution

A usability study should be conducted to see if the proposed solution solves our problem. I had two volunteers, a student from Holberton (Chris) and a close friend Dom, try out my prototype. After explaining the task they should performed I gathered notes on what they said, did, and how they reacted.

Chris

Chris noted a lot of the struggles Michelle was experiencing and while going through the app himself he said that the pain points were clearly resolved in the prototype.

“I think it’s pretty cool how you can pick a profile now. I think that this was one of the major issues that you fixed. I like how she can choose to skip her favorite genre because she doesn’t know what it is. Maybe you could have a page for trying new songs. I think you fixed both of these issue though.

Things seem a bit more streamline, she can start playing music and trying things out quicker and that’s good. I think your design will save her from confusion.”

Dom

Dom was a different case because he was already more comfortable with another music streaming service called Apple Music.

“Very interactive, gives the comfort of where icons and overall layout similar to other applications. Texts do need to be bigger in the Recently Played layout. Might be able to utilize more space. Possibly add a Suggestion Tab under Friends Activity. Every other feature is very accessible to interact with, familiar with the “universal” layout such as Apple Music which makes it comfortable to use even without any troubles”

Dom using the prototype

Also he pointed out some mistakes with the prototype. When pressing on the kid’s profile picture it still brought him to Michelle’s page. So he was confused if kid related songs were supposed to show up. Goes to show that attention to detail can help solve confusion for testers.

“when you click on kids profile it shows non- kid songs and the same songs used for Michelle’s profile.”

Dom is a perfect example of a new user using the service. whether it’s someone coming from another similar service, not tech savvy, or completely new to music streaming all together, it’s important to easily introduce them to your platform. His reaction to the design was confusing due to lack of detail, but not frustrating.

Conclusion

I would say the project was largely a success. I need to get more familiar with Figma and put more attention to detail when prototyping and adding functionality to better visually explain what needs to be accomplished. It should be furthered researched before implementing though. The filter especially should be redesigned to better explain my intentions. In the end, this project gave me great insight on UX design and furthered my interest in the field. Now when I use other products and services, I’ll be paying attention to detail to the UI and UX design. Maybe come across one I think needs improving and redesigning that one myself. Can’t wait to apply this knowledge in the field and in my own projects.

I write sometimes so maybe in the future I may tackle the other personas from this project and explore new ones. I’m studying to be a full stack software engineer, but I enjoy everything that revolves around building a product. From design, to marketing, architecture, you name it. I just want to build! Currently looking at front-end roles and learning mobile development with iOS. Can’t wait to see what the future holds with code.

Follow me on Twitter!

--

--

Mohameth Seck

Studying Software Engineering at Holberton School, New Haven, CT. Learning iOS development on the side. VR/AR enthusiast. I just want to make dope stuff 🤷🏾‍♂️