A New Experience for Spotify for iPad

The wait is finally over: Spotify finally launches its new iPad app - this was the headline in May 2012 when Spotify announced its first release on the Apple app store. Retina graphics, unique tablet-centric design, and AirPlay integration were the key features for the big announcement.

This design took full advantage of the tablet screen size and followed the same light mode as the mobile experience at the time. The use of horizontal page stacking made the app handy to use in both orientations and was back then the standard IA and navigation pattern everyone practiced.  

The second generation followed early 2014 with the first significant redesign, "Paint it black," where Spotify introduced the signature dark experience. That was a turning point for the history of Spotify, and it started to look something like what we're familiar with today. The dark color scheme accentuates the cover art, artist images, and the most important navigation buttons, like play - which stays true even today. The iPad experience followed the redesign and got additional usability and visual design improvements.  

In 2015, the Brand and Creative team refreshed Spotify's brand identity. A bold, expressive new look that also came with a real design system for Spotify called GLUE, aka Global Language Unified Experience. Fully adopting a new system can take time, and finally, in 2017, we released the third generation of the iPad experience. A new color palette, a new typeface (Circular), and tons of visual updates got integrated. But another significant change for the experience was also merging iOS mobile and tablet in one codebase, which mirrored the mobile experience into iPad.

This decision made sense from a consolidation point of view, but there was a catch: with the increase of new iPad models and sizes, the experience got more complex, and therefore the single mobile solution could not cater to the form factor anymore. Additionally, our app has grown over the years, and with more features in place it was hard to maintain usability while ensuring a high-quality experience. We reached a point where we needed to reimagine and future-proof the iPad experience.

Understand and frame the problem

In March 2019, a group of designers, engineers, and user researchers sat together and assessed the current state of the iPad experience. A great benefit of working at a company like Spotify is that it has a vast archive of learnings and reports available, which helped us to understand the user needs and phrase a more explicit problem statement. After running additional research, we had three key insights we learned from a tablet in-home study:

1. Spotify's layout was not optimized for the tablet, which makes it unattractive and difficult to use. It's a workmanlike experience, meaning it does its job, but it doesn't provide a richer experience.

2. The screen real estate of the tablet makes it useful for playlisting and curation purposes, but doesn't support users to manage the complexity of music and podcast discovery easily.

3. User research has found problems in accessibility, discoverability, and other unfulfilled needs in the tablet experience. UI elements and interaction gestures are not suitable for the form factor.

The learnings gave us a better understanding and an area to focus on. At Spotify, we follow the approach to build, test, and iterate - which helps us prioritize areas and help define an MVP (Minimum Viable Product). After a discovery workshop, the team agreed to three principles as a guiding rule throughout the project:

Establish a baseline: For a better tablet experience within our technical constraints.

Design for the form factor: Rearrange what we have today and present components in a way that makes sense to the form factor.

Feasibility: A feasible solution to implement the change.

An experience for everyone

We at Spotify want billions of fans to enjoy and be inspired by creators and their content; that's why designing an inclusive and accessible experience is so essential to us. We take this mission seriously at Spotify, that's why we paired up with our inhouse accessibility guild to receive support and consultancy. They helped us to prioritize and implement improvements for both design and technical accessibility. Adaptivity and design for multi-orientation was, therefore, the right decision.

Following standards and looking beyond

First, we got familiar with the landscape of all iPad device models to ensure a framework that works for adaptivity. Working closely with engineers, we followed the Apple size classes standard on iOS. In principle, the system defines two size classes, regular and compact, which describe the height and width of the view. Using these size classes helped us not only to follow platform standards but also to design an adaptable interface that provides a more enjoyable experience in any situation. 

To afford a better experience on the tablet device, we looked outside of our field of expertise and studied how book and magazine designers work. Due to its larger screen size and form factor, the user needs are much more similar. A grid system and composition play an essential role in providing a fluent rhythm to the reader. The appropriate line length for sentences helps readers keep focus and digest content naturally. So we translated this guidance to the digital environment and readjusted the readable content guide property to our content view.

Coherence across devices 

After exploring different approaches, we landed on a desktop-like solution, which felt like the best way to achieve content readability, but also stay on brand. Users engage and interact throughout the day with many different devices to listen to their favorite songs and podcasts on Spotify. We, as designers, want to make sure that the user experience and adaptation are as seamless and fluent as possible to build trust and consistency across all channels.    

When we landed together with engineers on the final solution, our next task was to look beyond our core surfaces - Home, Search, and Your Library - and provide detailed specifications on how the desired experience unfolds across the entire experience. 

We had one of these "Aha!" moments in the room when we realized we were on the right path with the final design solution. The new layout logic and user experience was the most significant change, and by introducing the vertical navigation bar, we covered the given tasks in the initial brief:

• Optimal usage of form factor

• Achieve a readable content guide

• Scalable across devices

• Adaptable layout (AA)

• Using the same code base

• Minimal work for squads

• It's on brand for Spotify

Tablet specific features

The fun part of working on projects which span across different device types is to study and embrace specific features. For the fourth release, we were planning to support multitasking as one of our key features, and the new approach helped us to establish a good baseline to adapt between both size classes fluently.

With that said, this opened up some pretty sweet ideas to innovate in that space. One of our engineers had the brilliant idea to implement drag & drop to share tracks in split view, and use drag and drop to save to your library. These felt like no-brainers to use, and we are proud that they made it into the release! Go and check it out!

Key takeaways

Overall, the iPad workstream was a comprehensive project, which helped the team to ship something genuinely amazing. Here are three takeaways for designers to learn from: 

Become best friends with engineers

The success of this project was heavily dependent on technical constraints and for us, as designers, to understand what is possible within these boundaries. It happens too often that we go off and come back with a beautiful idea that is not at all realistic to implement. Having engineers from day one on the project helped us immensely to stay realistic with our goal and explore within our constraints. 

Look elsewhere for answers

On this specific project, the brief journey into the world of book and magazine design helped us to understand the medium better and opened a fresh perspective to which we adapted onto our environment.

Have a lense for both perspectives

On one hand, designing for the landscape of all iPad models and understanding both orientations was a unique design challenge and required systematic thinking of scale. On the other, looking into device-specific feature improvements ultimately helped to form a richer experience for the user.    

What next?

Shipping the fourth generation of the Spotify iPad experience was just the first step. This first initiative aimed to set a baseline for a better experience. There's so much more incredible work happening already to build on top of that. Now we can focus on a much richer experience for your iPad and make it truly amazing.