In our effort to create a single source of truth, there are 3 main objectives: align Google Play with Google Material, align Google Play UX and Engineering teams, and align Google Play UX teams across verticals.
To accomplish this, we employed a four phase strategy in our approach. While this strategy guided the way, it was a non-linear
process and progress was be made on multiple phases in tandem.
We conducted a production app audit to identify inconsistencies across Google Play and discrepancies against the parent Material design system. This audit helped lay the foundation for Material 3 adoption ensuring a high-quality, creative, and cohesive approach.
From the audit, 20 Google Material common components were identified as eligible to lift from the Material parent design system directly or with Play-specific modifications.
Leveraging audit insights from Play Store audits, GM3 common components were been categorized in regards to prevalence across the Store experience and interaction impact.
This matrix was created to facilitate XFN conversations and capture Eng-related prioritization factors such as univision migration or wrapped components. From here the team was able to align on an adoption strategy and GM3 component implementation.
Before any Material components could be implemented, Google Play semantics needed to be updated to align with Google Material styling and tokens structures.
While the previous Play Store color system relied on hard-coded hex values, design tokens enable dynamic color and product consistency by assigning an element's color role in a UI, rather than a set value. This system is built to support Google Play across light and dark themes.
Play type styles were migrated fitting into 5 roles: display, headline, title, label, and body. The new roles are more descriptive, allowing for simpler application in a broader range of use cases.
Components are structured in a Components + Styles library and instances are migrated to a Design Kit for the wider Play organization to leverage. Each component is supported with a description, link to related documentation, and configurables available.
Components are UI elements that can be re-used across projects. It could be a button, a cluster header, an icon and many more. These instances are copies connected to a master component. Using existing components will help you speed workflows and allow UXers to get the latest updates automatically.
Components can be customized to fit specific use cases. Upon selecting a component, property options appear inside the Design panel. Configurables will vary depending on the component. Common properties include configuration type, state, devices, theme, etc.
For UI patterns comprised of multiple components, such as a cluster, properties are available for all nested elements. For example, you can turn on a cluster header subtitle without needing to break the instance.
Design kit components are built for scale from compact to expanded screen sizes via the properties panel.This makes it easy for designers to populate a UI and easily translate the across platform experiences.
The Play Design System guidelines microsite houses all the need-to-know information for components + styles. Each component has a dedicated section on the site that provides an overview with the latest changes to the component along with variants, guidelines of usage to reference with Play store examples, component specs, and relevant UX and Engineering resources.
Core reference screens from across the app experience are available with nested components.
These resources contain a feed of populated content to leverage as a foundation as needed in feature exploration.
Grab-and-go components from the design kit are designed with team deliverables in mind.
With prototyping included in component templates and reference screens, designers are able to spend less time replicating existing interaction patterns and focus on new feature development.
To help socialize the Design System across the Play organization, we created a guide highlighting its purpose and connecting team members with a one-stop-shop to resources.
