Play Design System
Play Design System
Play Design System
2023
Building a source of truth
Role
Design Systems
Interaction Design
Visual Design
Client
Google Play is the global app store for Android devices. Over time, inconsistencies have emerged across workflows as the Play product and team have grown. With the introduction of Google Material 3, Play can address design and implementation challenges while developing an adoption strategy. The goal of the Google Play design system is to provide a single source of truth for UX and Engineering teams, ensuring consistent components and documentation that align with the latest Google Material design standards.
As lead product designer, my role was to collaborate with UX and Engineering teams to audit existing production components, document usage and specifications on a guidelines microsite, and create Figma libraries of token and component variants for mobile, tablet, browser, wearables, car, and TV platforms.
2023
Building a source of truth
Role
Design Systems
Interaction Design
Visual Design
Client
Google Play is the global app store for Android devices. Over time, inconsistencies have emerged across workflows as the Play product and team have grown. With the introduction of Google Material 3, Play can address design and implementation challenges while developing an adoption strategy. The goal of the Google Play design system is to provide a single source of truth for UX and Engineering teams, ensuring consistent components and documentation that align with the latest Google Material design standards.
As lead product designer, my role was to collaborate with UX and Engineering teams to audit existing production components, document usage and specifications on a guidelines microsite, and create Figma libraries of token and component variants for mobile, tablet, browser, wearables, car, and TV platforms.
2023
Building a source of truth
Role
Design Systems
Interaction Design
Visual Design
Client
Google Play is the global app store for Android devices. Over time, inconsistencies have emerged across workflows as the Play product and team have grown. With the introduction of Google Material 3, Play can address design and implementation challenges while developing an adoption strategy. The goal of the Google Play design system is to provide a single source of truth for UX and Engineering teams, ensuring consistent components and documentation that align with the latest Google Material design standards.
As lead product designer, my role was to collaborate with UX and Engineering teams to audit existing production components, document usage and specifications on a guidelines microsite, and create Figma libraries of token and component variants for mobile, tablet, browser, wearables, car, and TV platforms.
The Challenge
Google Play is supported across feature teams leading to inconsistencies in structures, pain points in workflows, and misalignment with Material design standards. The team needed a cohesive design system comprised of styles, components and patterns that enable makers and users to have joyful discoveries, engagements and inspiring innovations.
The Challenge
Google Play is supported across feature teams leading to inconsistencies in structures, pain points in workflows, and misalignment with Material design standards. The team needed a cohesive design system comprised of styles, components and patterns that enable makers and users to have joyful discoveries, engagements and inspiring innovations.
The Challenge
Google Play is supported across feature teams leading to inconsistencies in structures, pain points in workflows, and misalignment with Material design standards. The team needed a cohesive design system comprised of styles, components and patterns that enable makers and users to have joyful discoveries, engagements and inspiring innovations.
Multi-Platform Audit
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.
Multi-Platform Audit
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.
Multi-Platform Audit
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.
Common Components
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.
Common Components
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.
Common Components
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.
Prioritizing Component Adoption
Leveraging insights from Play Store audits, GM3 common components were categorized by prevalence and interaction impact. A matrix was created to guide XFN discussions and capture engineering prioritization factors, such as Univision migration or wrapped components, enabling the team to align on an adoption strategy and GM3 implementation.
Prioritizing Component Adoption
Leveraging insights from Play Store audits, GM3 common components were categorized by prevalence and interaction impact. A matrix was created to guide XFN discussions and capture engineering prioritization factors, such as Univision migration or wrapped components, enabling the team to align on an adoption strategy and GM3 implementation.
Prioritizing Component Adoption
Leveraging insights from Play Store audits, GM3 common components were categorized by prevalence and interaction impact. A matrix was created to guide XFN discussions and capture engineering prioritization factors, such as Univision migration or wrapped components, enabling the team to align on an adoption strategy and GM3 implementation.
Aligning Color
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.
Aligning Color
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.
Aligning Color
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.
Aligning Typography
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.
Aligning Typography
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.
Aligning Typography
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.
A Design Kit for Adoption
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.
A Design Kit for Adoption
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.
A Design Kit for Adoption
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.
Reference Screens
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.
Reference Screens
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.
Reference Screens
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.
Documentation & Guidance
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.
Documentation & Guidance
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.
Documentation & Guidance
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.
Design System Guide
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.
Design System Guide
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.
Design System Guide
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.
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
If You Know You Know
Hint: Please reach out to me@andrewwags.com