Rapid Redesign: Spotify

Michael Barsky
6 min readNov 25, 2019

--

In an effort to be more cognizant of everyday design decisions, I set out to evaluate some of my favorite apps. The end goal of the project is to identify pain-points, learn to rapidly iterate solutions, and have fun designing things I use every day!

Role: Product Designer

Timeline: 2 Hours

*Specifically looking at the Desktop design*

Project Idea:

As an avid Spotify user, I challenged myself to evaluate and redesign their interface. This rapid challenge enabled me to step out of the shoes of a Spotify user, and enter the realm of a product designer.

The Problem:

Spotify users are facing choice paralysis! Let’s break this down a bit further…

  1. Overwhelming UI: Too many choices on the landing page does not empower our user to make confident decisions
  2. Time Inefficient: There is a breaking point where the amount of choices we provide the user greatly increases time to accomplish their task
  3. Vague Decision Options: The UI is not designed for explicit user decisions, causing the user to freeze and get frustrated over time

Problem Justification:

  1. There are no 50/50s in Design: It is impossible for humans to process two ideas at any given time. Because of this, no two choices should ever be considered equal in a UI. Friction occurs when designers don’t design for explicit decisions (learned this from the great design experts at Brave UX).
  2. Information Overload: Humans have very limited cognitive processing capacity and due to this get overwhelmed very easily. Interfaces with too much information can paralyze them and make them quit.
  3. Decision Theory: An increase in choice does not correlate to a happier user. There must be a balance created between user empowerment and choice.
  4. Design in Context: The Spotify experience starts well before users land on our product. It is crucial to acknowledge that people have motivations before they land on Spotify, and users generally have a specific job they are hiring Spotify to perform.

Leading Question:

How might we enhance Spotify’s users’ decision-making process to reach their goals in a more empowering and time-efficient manner?

Product Discovery

Empathizing with Spotify users and understanding product value

Who are we designing for?

What does our user think and feel?

How do we help our users?

If we reprioritize the features on the landing page based on importance to the user’s motivation, then Spotify users will save time finding music, increase listening time, and increase product adoption by new users

User Value: Providing our users with a more efficient and thoughtful means to get to their music, reduces friction and frustration within the app. Spotify facilitates the music listening experience, so let’s make that as easy as possible.

  1. Reduce Choice Paralysis: Prioritizing choice at the beginning of the customer journey leads to happier users
  2. Get to the Main Objective Faster: Users can discover new music and listen to their existing library faster
  3. Provide Gradience: Creating a stronger information hierarchy will allow Spotify users to more seamlessly transition between high-level content and specific tasks

Business Value: Stronger information architecture on the landing page will increase user adoption for new users and reduce the frustration of existing users, leading to greater revenue

  1. Ease of Use: Easier navigation and intuitive hierarchy will make onboarding far easier for new users, increasing user retention
  2. User Autonomy Benefits Stakeholders: Stronger hierarchy directs users to promoted music faster, leading to more profit for stakeholders
  3. Forwards Company Mission: Aligns with the overarching objective to unlock human creativity by getting users to artists’ music more rapidly

Product Planning:

So what does success look like and how do we build it?

Goals:

  • Provide users with a more efficient way to get to vital information
  • Empower users’ decision-making process by having the designers make the hard choices for them
  • Understand what users currently prioritize and how to reduce visual clutter on the homepage

Success Metrics:

  • Increase in user retention for new users on desktop
  • Decrease in-app drop-offs from the homepage
  • Boosting certain navigation paths to promote new music for users

Analyzing the Existing UI

  1. Album cover takes up excess space: The picture does not provide users any benefit in getting to their goal, and due to albums occasional visual brightness could stray users away from the intended action
  2. Friend Activity is a Secondary Action: Friend Activity is nice to have but is not the most efficient way to quickly explore new playlists or get to your existing music catalog
  3. Search Location: Search is in an abnormal location for similar interfaces. According to Jakob’s Law, users prefer to follow similar interaction patterns as other products they use.
  4. Overwhelming Navigation Choices: Dozen of navigation choices are provided in the same vertical navbar. High priority items such as “Browse” are barely given priority over lower priority items such as “Made for You”
  5. Choices not in visual sight: All playlists are nested inside the same column as the navigation, forcing the user to scroll through and recall the ones that are most pertinent to them.
  6. The banner is a side thought: Interfaces such as Amazon and Netflix are placing a stronger visual emphasis on promotional items. Incorporating this trend could help promote stakeholders.
  7. Overarching Information Overload: Due to Spotify’s extensive demotion of navigation there are hundreds of things happening on the landing page at any given time. This creates visual clutter that can frustrate users.

Design Sprint

Creating user-centered designs that positively impact Spotify Users

Low Fidelity Mock-Ups: Creating low fidelity mockups with the intention of failing fast & iterating to success.

The Final Design

Key Design Decisions:

  1. Album cover size reduced: Album image is now in-line with the playing song, freeing up more room on the application and reducing overall visual noise
  2. Reduce size and change location of Friend Activity: Reduce information overload by removing a column with extensive information unrelated to users’ main goals. Integrate the column into the right column and move lower on the page to visually reprioritize the information.
  3. Make Search Intuitive: Moving search to top right corner follows more universal patterns for search and creates easier onboarding for new users acclimated to other UIs.
  4. Restructure Navigation: Create both horizontal and vertical navigation to create more hierarchal importance between options.
  5. Tab Design for Playlists: Within the body of the interface, I created two tabs — recommended and playlists — to reduce extensive information in the vertical navigation and provide more visual cues to increase recognition for users. The visual display also reduces visual noise by breaking up content with images.
  6. Boost size of banner: Boosting the size of the banner creates a clear choice for interested users. This increases user engagement with stakeholders and in turn generates more revenue.

Next Steps

This redesign was a quick concept validation for a possible desktop redesign of the Spotify landing page. Although the design made it through an entire UX process, the research behind the idea is not nearly fleshed out enough. If given more time, I would like to conduct extensive usability tests, needs assessment interviews, and secondary research. Moving forward, it would also be advantageous to collect initial data and compare our metrics later on in the redesign.

--

--

Michael Barsky

SF based experience designer currently exploring the intersection of physical and digital.