Designing a new Foundation: Spotify for Desktop

In late 2018 the team was designing for two different platforms. The Desktop app, passionately cultivated by many Spotifiers over the years, had become feature-rich and loved by our users — but due to its complex codebase was becoming difficult to maintain and iterate on. We also had the Web Player, a new experimental client with modern architecture, but a much lighter experience. Since design patterns weren't shared, working on any feature meant designing it twice, and Engineering was in the same boat. Not surprisingly, this took a toll on the team and both experiences: we simply couldn't deliver improvements or new features at the pace we wanted to. 

After exploring many approaches to mitigate our team's duplicative work, it was decided that the best way forward was a new foundation: iterating on the Web Player’s more modern codebase to bring it up to a Desktop-grade feature set. This approach would greatly increase development speed and give us a more flexible foundation for new formats and future form factors. It also put the Design team in a unique and desirable position — we'd be able to unify the platforms and set up a new baseline experience.

Designing for the future

While we wanted the consolidated experience to reach a desktop-level feature set as soon as possible, this new foundation also needed increased flexibility, so it could grow with our listeners into the future. Music is the heart and soul of Spotify, but we had a host of new audio formats making waves and finding their own home on the platform too. Podcasts, video podcasts, and our new Music + Talk format required more flexibility from our design patterns to truly feel integrated into the platform. Within Spotify, we also had the introduction of Encore, our family of design systems that help us to build beautiful, scalable and unified Spotify apps. Additionally, we wanted to broaden our support for listeners, with better accessibility and a range of new validated features from our mobile experiences — rounding them out with increased personalisation. 

In order to find the right balance between listener needs, integrating new formats, and ensuring flexibility for the future, we leveraged Spotify's Design Principles: Relevant, Human and Unified. They help demonstrate what we value and aspire to within our product and also help to keep us grounded and aligned. 

Relevant: It’s about reflecting you as an individual

Throughout this project, we iterated on dozens of desktop features, bringing many experiences people know and love to the Web Player for the first time. We took time to rethink, test, and iterate on specific features, like advanced playlist creation and curation. The new playlist creation flow now includes a specialty search within the playlist page, making it easier than ever to add and curate tracks. We've also been able to deliver more personalized experiences to our listeners. Shortcuts on the top of Home give quick access to those favorite go-to’s and user profiles now show listening stats, so people can see their top artists and top tracks of the month. Our new foundation also allows us to build out more robust personalisation features in the future, so we can deliver a better mix of familiar and discovery content across the platform.

Human: It’s about communication, expression, and human connection

We believe considering a broader range of usability needs improves the experience for everyone. We've made sure that new features work with assistive technologies, like screen readers, meet contrast requirements, and are usable in keyboard-only scenarios. There's also a new keyboard shortcuts modal that can be opened with the question mark key (?) or command + forward-slash (⌘/). Many of these changes weren't possible in the old Desktop app, and while we still have areas to improve, the team has worked toward building accessibility into our design and development cycle. Additionally, we reworked our messaging and communication surfaces to better align with Spotify's UX Writing voice and tone guidance. This helps the experience feel less technical and more human. We’re also happy to introduce more moments of delight through motion and micro-interactions, like our playing indicator on trackrows and heart animation.

Unified: It’s about how our brand manifests across our features and apps

Our Desktop and Web Player listeners have very similar usage patterns and needs, so aligning the two was a key focus area for our team. The Desktop app had several different implementations of trackrows, while the Web Player didn't have the same functionality or richness of information. Our updated trackrow system is now unified, displaying relevant information depending on a listener's context, all while using shared components to ensure that future iterations can be consistently applied throughout the product. In the podcast space, our components scale from mobile to extra-large displays and we have opened up the web to users without a Spotify account, making it easier to share and enjoy podcasts together no matter how you prefer to listen. In parallel, we worked to align our changes to the larger Spotify ecosystem. With over 45 unique platforms and 2000+ connected devices from over 200 brands - we strive to create products that fit seamlessly into the lives of our users, whether using Spotify on a TV, on a computer at work, or in a car.  

Measuring success

As mentioned in Building the Future of Our Desktop Apps by our Engineering team, we had four primary goals at the start of this project: user satisfaction, unifying the experiences, reusability, and speed.

Satisfaction

With any change we made, the team focused on ensuring that it met the needs of our diverse set of listeners. Since we took the opportunity to clean up some patterns and introduce new ones, we wanted to check that these changes weren't too disruptive to existing habits or established mental models. To do this, we tested our iterations and new designs with new and existing users and made adjustments as needed. Since our Web Player is continuously deployed, millions of people helped us validate decisions or make the case to pivot our design direction. We also regularly work with other disciplines — from Customer Support, the Spotify Community forum, and Marketing, to our team's User Researchers and Data Scientists — to ensure our designs meet the evolving needs of our listeners. If you're missing your favorite feature, know that we're listening, and it's likely in our product roadmap! 

Unification 

As previously mentioned, a big opportunity for the Design team during this project was aligning our Web and Desktop experiences. Some interactions varied across these platforms that could easily be unified, while others were a bigger challenge to bring together, but through testing and iteration, we landed on patterns that could be shared across our experiences. We leveraged Encore's type system, color palettes, and foundational patterns to make sure our platforms feel coherent and familiar to other Spotify experiences, while still maintaining the device-specific interactions that people are used to. This way, we could take advantage of our platform strengths, like larger screen sizes and various inputs (mouse and keyboard), while fitting into a larger system.

Reusability

The prospect of sharing patterns and code across the Desktop app and Web Player was alluring to the team before this project started, and as we progressed, we were able to reap the benefits as we rolled features out. There was a noticeable shift in how much faster we were able to design and build reusable components. Foundational elements like menus and buttons were applied throughout the system with greater ease than ever before. Since we no longer had to design for two unique platforms, the team could invest more deeply in accessibility, micro-interactions, and improving other parts of the product. 

Speed 

Saving time during the design and development phases means that the team is now able to move much faster than we were previously able to. Whether it's fixing bugs, iterating on patterns that can be optimized further, or delivering new functionality — we can now work more efficiently, without duplication, and with more sustainable design and development practices. We're looking forward to delivering continual updates to our listeners and are eager for faster loops between receiving user feedback and being able to iterate on the experience to address listener needs.

Watch: Take a tour of the new Desktop app.

What comes next? 

While this has been an incredibly exciting project, it’s still just the beginning. With a new foundation now in place, we’re excited about what comes next and look forward to introducing new ways for listeners to set a mood, learn, laugh, be entertained, and connect to their favorite artists and creators.

Shoutouts

Projects like these require a huge amount of cross-discipline alignment and collaboration, so we want to give a shoutout to our partners in Insights, Product, and Tech — along with those in Customer Support, and Marketing who helped make this rollout a reality. We'd especially like to highlight the contributions of our fellow Designers: Farbod Faramarzi, Laura Lejano, Oli Bowley, Sal Tavkar, and Victoria Ayo.