Pandora Smart Display

Design Handoff in 2021

 

PROBLEM

The main problem I aimed to solve was how might we make the Pandora listening experience consistent across all devices, with the addition of new content types, but distinct based on platform-specific needs?

The goal of this project was to translate the listening experience on Google and Amazon smart displays and via casting.

ROLE

I was the Lead Designer who worked end to end (discovery, user research, concept ideation, interaction design, prototyping, visual design, user testing, iteration) on this experience on Google smart displays, Google Cast on 10ft, and Alexa smart displays. While this case study focuses on Google and Alexa smart displays, I also led design work on Sonos Connected Speakers.

TEAM

I started working on this project in late 2020. I worked with Brian Park (Product), Katie Holland (Engineering), Molly Feit (UX Writing), DJ Aguirre (UX Writing), and Lance Fernando (Product Analytics). I also worked with Pandora’s partners at Google and Amazon to ensure the product was inline with their requirements.

 
 
0.5 Solution.png
 

THE SOLUTION

Based on key insights I found out by collaborating with the Product Analytics team, I learned that several CE users were also avid smartphone users, as well as users of multiple types of CE devices across different vendors. Thus, it was imperative that the smart display listening experience was consistent with the mobile and web products, as well as other platforms.

 
2 Consistent.png
 
 

One of the goals of this project was to merge the content libraries of both SiriusXM and Pandora, while still maintaining Pandora-familiar interactions. I had to design the listening experience for approximately 10 different content types (and growing).

 
3 Content Types.png
 
 

Various CE screen sizes, resolutions, interactions (touch, no-touch, remote-only, voice), and templates (custom UI vs. templated UI) = one size does not fit all. In order to ensure consistency across all non-traditional devices and platforms, I first started by defining a grid and breakpoint system. I collaborated with our engineering team, as well as our partners at Google and Amazon to create these specs.

 
4 Grid System.png
 
 

During the phases of visual styling and higher-fidelity designs, I defined a type system across each breakpoint. I worked with the global design systems lead, our in-house engineers, and our platform partners (i.e. Google) to ensure that the type system I handed off met stakeholder needs and accessibility guidelines.

 
5 Type system.png
 
 

In addition to grid and typography specs, I was also responsible for handing off documentation regarding interactions, content formatting, autoplay, text truncation and marqueeing, and color.

 
6 Documentation.png
 
 

This case study focuses on Google CE primarily, but I also was the Lead Designer on Alexa Smart Display (right).

 
7 Pandora smart displays across platforms.png
 
 

OUTCOME SUMMARY

This product is in development, and will be available to the general population later this year.

 

LESSONS LEARNT

  1. There are many constraints when working on CE devices, including but not limited to keep-out/safe areas, system restrictions, and interactions. The earlier these are taken into consideration, the better.

  2. Documentation makes the CE-world go round. Many times, design documentation and UI kits including icons were not available online for the platforms I was designing for. Hacky solutions are sometimes the best solutions (shoutout to my co-worker who taught me how to parse through the SDK so I could get my hands on system icons).

  3. Stepping out of your comfort zone is intimidating, but worth it. This was my first time working on CE and with external partners at Google to make sure what I designed was inline with their brand and product guidelines. This was also my first time defining grids, breakpoints, and a type system. While I had a great jumping off point for the traditional platforms, I realized how nuanced, but important, these systems are, both for design and engineering.