May 08, 2018

Material Partner Studies

Learn how apps like Lyft, Genius, NPR, Pocket Casts, and Zappos bring Material’s new expressive capabilities to life

Posted by


On any product team, there’s often a tension between building things fast and building beautifully. But with the latest Material Design release, teams get the best of both without having to compromise quality. Since we introduced Material Design in 2014, we’ve been working with people across Google and around the world to better understand the needs of designers and developers—we’ve conducted hundreds of design reviews and nearly as many design sprints. Collaborating with early access Material partners including Lyft, Genius, NPR, Pocket Casts, and Zappos was another important part of the process.

The goal has always been to help you build easily and systematically, and now you can with custom Material themes to make your product unique, a growing library of customizable components, and tools that encourage (and simplify) collaboration across teams. A design system only comes to life in the hands of its users, with every touch, tap, and interaction that brings someone’s experience off the screen and into daily life. Get to know some of the new components, interactions, and expressive capabilities of Material, by diving into these explorations and interactions developed by our Material partners.


link
Copy link Link copied

Lyft: Taking action with the extended FAB

Lyft uses the extended FAB component to highlight key actions with rounded edges and a striking gradient
“We're a new team that just started considering design systems, so to work with a robust design system like Material, especially one that we could learn from and customize, made us feel a lot more confident about the choices we’re making.” — Linzi Berry, Design System Lead, Lyft

As a ridesharing service, Lyft wants to get people from point A to point B as quickly as possible. This attention to efficiency is central to the app’s mobile experience, and manifests in its primary action: booking a ride. The challenge is making that action swift and simple, while still communicating to passengers exactly what they need to know as they move through the process of selecting, requesting, and confirming their Lyft.

Swapping out the circular floating action button for Material’s new extended FAB proved beneficial and solved some critical problems identified by the team. The component serves as a great canvas for the systems that define Lyft’s vibrant identity—incorporating color, type, and shape—while providing functional benefits as well. An extended FAB can easily accommodate short or long labels that are more descriptive than an icon alone. In Lyft’s case these include branded actions for the type of ride someone selects, Lyft or Lyft Line for example, which might be localized for particular markets, or can accommodate extra characters when translated to other languages. The extended FAB’s prominent place in the interface ensures that the primary action of the app – booking a ride – is visible and easy to find so users can book without thinking twice.


link
Copy link Link copied

Genius: Creating a responsive layout grid

Genius created a unified, responsive layout grid with Material
“We worked with Material to develop a responsive grid structure that’ll pave the way for creating a consistent experience across our entire brand.” — Allie Ball, Art Director, Genius


Responsive design isn’t always about resizing and stacking content. Genius — a community-powered platform for annotating and interpreting music lyrics, takes a unique approach to adapting between mobile and desktop experiences. A Genius user on the go is more likely to look up song lyrics and artists on their phone, while desktop users tend to engage more in sharing commentary and annotations. These two experiences are complementary and platform-aware, but the app’s layout grid didn’t always adapt as seamlessly as the rest of the interface. To better adapt, Genius recently unified its layout grid across platforms in line with updated Material guidance, making it responsive as you move between devices.


link
Copy link Link copied

NPR: Organizing experience with cards

NPR uses cards, lists, and color to organize and simplify the presentation of its content
“What we're trying to do is reach listeners where they're looking for things, in a more visual and a more organized way.” — Libby Bawcombe, Senior Product Designer, NPR


NPR’s On Demand screen combines multiple types of content from various sources into one interface, so that people can quickly catch up by reading or listening to curated selections. Previously, everything was contained in a single list and there wasn’t a clear differentiation between a wide range of media—while newscasts, podcasts, and live radio were each split up into different sections. This made content difficult to browse, posing a challenge for both NPR and the app’s users.

NPR needed to create a more flexible and expandable approach to grouping and revealing content in the app, making it both easy to visually parse for the user and easy to manage for editors. The solution was to create customized Material cards. The white cards on a minimal, white background create a visual structure that avoids complication, and the shadows “cast” by each card further communicate each grouping of content. The team also established a branded shape system using broad, rounded corners. The custom shapes manifest in the mini player, cover art for shows and publications, and the cards themselves. A Material list component inside each card, expands to accommodate related content when needed. Touches of blue emphasize key actions, highlighting the mini player at the bottom of the screen and affordances for accessing other playable content.


link
Copy link Link copied

Pocket Casts: Building a better player

Pocket Casts simplified its approach to color and built a better player that affords richer interaction
“What we discovered, was that there might be better ways to transition between screens. We had help from some of the motion experts at Google to help us determine some new, interesting ways to transition that weren't relying on just the circle reveal that we’d used in the past.” — Chris Martin, Designer, Pocket Casts

Podcast player Pocket Casts set out with the goal to update and refine their existing interface. Drawing inspiration from our new Material updates, the team refreshed and strengthened its brand expression while cleaning up interactions, and making improvements to the app’s use of color and motion. The player component, in particular, now includes more controls and richer behavior patterns. As the player opens, other parts of the app — including the bottom navigation bar — cleanly transition out of sight. And player controls — play, pause, rewind, fast-forward — use choreography to appear in just the right spot, with plenty of room dedicated to the “up next” queue and other listening options.

To strike a balance between expressing its identity and adapting to the varied artwork each podcast provides, Pocket Casts also fine-tuned its approach to color. Color extracted from podcast artwork is reserved for interactive components and progress indicators, while subtle gradients generated from the same palette fill in surfaces like the collapsed player for a flexible but understated aesthetic.


link
Copy link Link copied

Zappos: Creating and preserving context with the backdrop

Zappos adopted the backdrop to create a clear and efficient mental model for finding and managing content in its app
“Mobile is one of the best platforms, if not the best platform, to deliver personalized experiences. Using [the backdrop] we can provide simple tools for our users to find even more relevant products.” — Andrew Nguyen, Head of Personalization and Mobile Product, Zappos

Zappos already puts a spotlight on filtering search results in their app, but wanted to reimagine and streamline search and curation interactions using Material Design. The task was to better emphasize the items users are looking for without sacrificing quick access to controls like search that users always want close at hand. The team explored the use of Material’s new backdrop, which establishes a strong mental model in the app, helping users understand that search and filtering are always just a tap away, in a dedicated and omnipresent surface in the back layer. Simultaneously, the front layer surfaces results and curated products. Users quickly learn how to access filtering, while the app maintains an emphasis on curated, personalized content.