Pandora: Premium Web
Pandora: Premium Web
Bringing the premium, on demand service to our web product allowed a small team to modernize the design patterns. Helping lead the charge for a simple, responsive, and 1:1 feature parity with our mobile product, we began to create some real concrete standards and systems for the Pandora web product and the product design team. Working with a small group of designers, we divided up the work into specifics features and screens. Having a just come off of the AMP launch and being fluent with artists and new artist centric content, I began work with the artist profile before taking on the rest of the catalog screens: albums, tracks, and stations. Our Team met weekly, diving into requirements with PMs, brainstorming, and collaborating on product-wide design system solutions and new features.
Sketching COncepts
Looking to the features and elements that we recently released in the mobile app, we wanted to bring consistency to the web. Knowing that the site had to be responsive, we needed to establish a flexible module based UI pattern and system with a clean and simple grid.
Wires, Layouts, Modules, And Eventually Concepts
A lot of various layouts were explored, which initiated some hearty conversations about what features were considered priority for users when looking at artists, their albums (both new and old), their tracks, notifying them of shows, etc.
Premium Artist page Concept
Respecting the playable "source" types, and the new on demand behavior that was coming from the design team, we to narrowed down to a launch version.
Responsive Page Grid Design
Examining our web user's data, we determined that we had 4 main breakpoints, with "medium" or 1440px wide being our most common. Our grid was flexible to accommodate our content modules and page layout, and we developed it with the intent to be used across all catalog screens for Pandora. The static left column with hero image for various content types became the norm, with our new "tool belt" of features below. Row and image tile grid content standards and behaviors were created that were put into use globally - considering all holistic aspects of the product.
Artist Page components specs
Anything that was new to the emerging UI patterns was called out, while anything that was already existing from other pages or features being developed concurrently was referenced in the JIRA shared with engineers.
Web Styleguide
Collaborating with the product design team and pairing with the front end engineers on this project, we created and maintain a living styleguide, with reusable elements that we can edit, add to, and optimize for future use. This resource has greatly helped with the overall process.
Ads AND THE NEW DESIGN
Having began with the premium, paid subscriber in mind first, we quickly adapted the designs to allow for ads - and therefore bring the new, upcoming site design to all Pandora users. Using the responsive grid to our advantage, we allow for the "ad rail" to push in, with the grid and page contents adjusting accordingly.
Backstage page sketch concepts
Adapting various new patterns to the rest of the content catalog screens: Albums, Track, Stations. These were all designed with the same reusable patterns to create consistency.
