Designing a brand new Foundation: Spotify for Desktop

In late 2018 the crew was designing for 2 completely different platforms. The Desktop app, passionately cultivated by many Spotifiers over time, had turn into feature-rich and cherished by our customers — however as a consequence of its advanced codebase was changing into tough to take care of and iterate on. We additionally had the Web Player, a brand new experimental consumer with trendy structure, however a a lot lighter expertise. Since design patterns weren’t shared, engaged on any characteristic meant designing it twice, and Engineering was in the identical boat. Not surprisingly, this took a toll on the crew and each experiences: we merely could not ship enhancements or new options on the tempo we needed to. 

After exploring many approaches to mitigate our crew’s duplicative work, it was determined that one of the best ways ahead was a brand new basis: iterating on the Web Player’s extra trendy codebase to deliver it as much as a Desktop-grade characteristic set. This strategy would enormously improve improvement velocity and provides us a extra versatile basis for brand spanking new codecs and future kind components. It additionally put the Design crew in a novel and fascinating place — we would be able to unify the platforms and arrange a brand new baseline expertise.

Designing for the long run

While we needed the consolidated expertise to succeed in a desktop-level characteristic set as quickly as potential, this new basis additionally wanted elevated flexibility, so it may develop with our listeners into the long run. Music is the center and soul of Spotify, however we had a bunch of recent audio codecs making waves and discovering their very own house on the platform too. Podcasts, video podcasts, and our new Music + Talk format required extra flexibility from our design patterns to really really feel built-in into the platform. Within Spotify, we additionally had the introduction of Encore, our household of design methods that assist us to construct lovely, scalable and unified Spotify apps. Additionally, we needed to broaden our help for listeners, with higher accessibility and a spread of recent validated options from our cell experiences — rounding them out with elevated personalisation. 

In order to seek out the proper steadiness between listener wants, integrating new codecs, and guaranteeing flexibility for the long run, we leveraged Spotify’s Design Principles: Relevant, Human and Unified. They assist show what we worth and aspire to inside our product and in addition assist to maintain us grounded and aligned. 

Relevant: It’s about reflecting you as a person

Throughout this mission, we iterated on dozens of desktop options, bringing many experiences individuals know and like to the Web Player for the primary time. We took time to rethink, check, and iterate on particular options, like superior playlist creation and curation. The new playlist creation circulation now features a specialty search throughout the playlist web page, making it simpler than ever so as to add and curate tracks. We’ve additionally been in a position to ship extra customized experiences to our listeners. Shortcuts on the highest of Home give fast entry to these favourite go-to’s and consumer profiles now present listening stats, so individuals can see their high artists and high tracks of the month. Our new basis additionally permits us to construct out extra strong personalisation options sooner or later, so we are able to ship a greater mixture of acquainted and discovery content material throughout the platform.

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

We imagine contemplating a broader vary of usability wants improves the expertise for everybody. We’ve made positive that new options work with assistive applied sciences, like display screen readers, meet distinction necessities, and are usable in keyboard-only situations. There’s additionally a brand new keyboard shortcuts modal that may be opened with the query mark key (?) or command + forward-slash (⌘/). Many of those adjustments weren’t potential within the outdated Desktop app, and whereas we nonetheless have areas to enhance, the crew has labored towards constructing accessibility into our design and improvement cycle. Additionally, we reworked our messaging and communication surfaces to higher align with Spotify’s UX Writing voice and tone steerage. This helps the expertise really feel much less technical and extra human. We’re additionally completely satisfied to introduce extra moments of pleasure by way of movement and micro-interactions, like our enjoying indicator on trackrows and coronary heart animation.

Unified: It’s about how our model manifests throughout our options and apps

Our Desktop and Web Player listeners have very related utilization patterns and wishes, so aligning the 2 was a key focus space for our crew. The Desktop app had a number of completely different implementations of trackrows, whereas the Web Player did not have the identical performance or richness of knowledge. Our up to date trackrow system is now unified, displaying related info relying on a listener’s context, all whereas utilizing shared parts to make sure that future iterations may be constantly utilized all through the product. In the podcast house, our parts scale from cell to extra-large shows and we’ve got opened up the net to customers with out a Spotify account, making it simpler to share and revel in podcasts collectively irrespective of how you like to hear. In parallel, we labored to align our adjustments to the bigger Spotify ecosystem. With over 45 distinctive platforms and 2000+ linked gadgets from over 200 manufacturers – we attempt to create merchandise that match seamlessly into the lives of our customers, whether or not utilizing Spotify on a TV, on a pc at work, or in a automotive.  

Measuring success

As talked about in Building the Future of Our Desktop Apps by our Engineering crew, we had 4 main targets initially of this mission: consumer satisfaction, unifying the experiences, reusability, and velocity.

Satisfaction

With any change we made, the crew centered on guaranteeing that it met the wants of our numerous set of listeners. Since we took the chance to scrub up some patterns and introduce new ones, we needed to verify that these adjustments weren’t too disruptive to present habits or established psychological fashions. To do that, we examined our iterations and new designs with new and present customers and made changes as wanted. Since our Web Player is constantly deployed, tens of millions of individuals helped us validate choices or make the case to pivot our design course. We additionally recurrently work with different disciplines — from Customer Support, the Spotify Community discussion board, and Marketing, to our crew’s User Researchers and Data Scientists — to make sure our designs meet the evolving wants of our listeners. If you are lacking your favourite characteristic, know that we’re listening, and it is doubtless in our product roadmap! 

Unification 

As beforehand talked about, an enormous alternative for the Design crew throughout this mission was aligning our Web and Desktop experiences. Some interactions different throughout these platforms that might simply be unified, whereas others had been a much bigger problem to deliver collectively, however by way of testing and iteration, we landed on patterns that could possibly be shared throughout our experiences. We leveraged Encore’s kind system, shade palettes, and foundational patterns to verify our platforms really feel coherent and acquainted to different Spotify experiences, whereas nonetheless sustaining the device-specific interactions that individuals are used to. This means, we may reap the benefits of our platform strengths, like bigger display screen sizes and varied inputs (mouse and keyboard), whereas becoming into a bigger system.

Reusability

The prospect of sharing patterns and code throughout the Desktop app and Web Player was alluring to the crew earlier than this mission began, and as we progressed, we had been in a position to reap the advantages as we rolled options out. There was a noticeable shift in how a lot quicker we had been in a position to design and construct reusable parts. Foundational components like menus and buttons had been utilized all through the system with larger ease than ever earlier than. Since we now not needed to design for 2 distinctive platforms, the crew may make investments extra deeply in accessibility, micro-interactions, and enhancing different components of the product. 

Speed 

Saving time throughout the design and improvement phases signifies that the crew is now in a position to transfer a lot quicker than we had been beforehand in a position to. Whether it is fixing bugs, iterating on patterns that may be optimized additional, or delivering new performance — we are able to now work extra effectively, with out duplication, and with extra sustainable design and improvement practices. We’re wanting ahead to delivering continuous updates to our listeners and are looking forward to quicker loops between receiving consumer suggestions and having the ability to iterate on the expertise to deal with listener wants.

Watch: Take a tour of the brand new Desktop app.

What comes subsequent? 

While this has been an extremely thrilling mission, it’s nonetheless only the start. With a brand new basis now in place, we’re enthusiastic about what comes subsequent and sit up for introducing new methods for listeners to set a temper, be taught, snort, be entertained, and connect with their favourite artists and creators.

Shoutouts

Projects like these require an enormous quantity of cross-discipline alignment and collaboration, so we wish to give a shoutout to our companions in Insights, Product, and Tech — together with these in Customer Support, and Marketing who helped make this rollout a actuality. We’d particularly like to spotlight the contributions of our fellow Designers: Farbod Faramarzi, Laura Lejano, Oli Bowley, Sal Tavkar, and Victoria Ayo.