Material You Visual Refresh for Android Enterprise

Material You Visual Refresh for Android Enterprise

Bringing Google's expressive design language to enterprise device setup flows

ROLE

UX Designer - Visual Design & Design Systems

TIMELINE

6 months (2024)

TEAM

Product Managers, Engineers, UX Researchers, Visual Designers

The Challenge

Android Enterprise device setup flows were visually inconsistent and felt disconnected from Google's evolving Material You design language. As part of Google's BC25 initiative—a company-wide visual refresh bringing Material You to all products—I led the design systems implementation for Android Enterprise onboarding flows spanning 40+ screens across multiple management modes (BYOD, COPE, and Fully Managed devices).

The challenge was to modernize the visual experience while maintaining accessibility standards, ensuring zero disruption to critical enterprise workflows, and coordinating across Android, Workspace, and Chrome OS teams for visual consistency.

KEY CONSTRAINTS

• 40+ screens across three management modes requiring visual consistency
• WCAG 2.1 AA accessibility compliance (no regression allowed)
• Zero disruption to critical enterprise enrollment workflows
• Coordination with Chrome OS and Workspace teams for brand alignment
• Technical debt from legacy Material Design 2 components

My Role

Visual Design System Implementation

• Conducted comprehensive audit of 87 distinct UI components across all enterprise setup flows
• Translated Material You guidelines into enterprise-specific design patterns
• Created component migration strategy prioritizing high-impact screens
• Developed 23 new component variants for enterprise use cases

Design Systems Contribution

• Built reusable Figma component library with Material You tokens
• Defined color, typography, and spacing systems aligned with Material 3
• Documented implementation specifications for engineering partnership
• Established visual QA framework adopted by 3 other Android teams

Accessibility & Quality Assurance

• Validated all designs met WCAG 2.1 AA contrast requirements (4.5:1 minimum)
• Increased minimum touch targets from 44dp to 48dp
• Conducted systematic reviews across all flow variations and screen sizes
• Tested screen reader compatibility and keyboard navigation

Cross-Functional Collaboration

• Partnered with Product Managers on business requirements and rollout strategy
• Worked closely with Engineers on technical feasibility and component implementation
• Coordinated with UX Researchers to validate design decisions
• Presented to leadership and incorporated stakeholder feedback iteratively

The Process

1. Discovery & Component Audit

Understanding the existing landscape

I began by creating a comprehensive inventory of every screen, component, and visual pattern across the entire enterprise setup experience. This involved cataloging 40+ unique screens across three management modes—each with their own variations for different identity providers, EMM configurations, and device states.

The audit revealed 87 distinct component instances with inconsistent styling: buttons varied in corner radius and color, typography used 8 different size/weight combinations, and spacing patterns were applied arbitrarily. Most concerning, 15% of text failed WCAG AA contrast requirements.

💡 Key insight: 60% of users encountered just 5 core screens during setup. By focusing visual refresh efforts on these high-frequency touchpoints first, we could maximize impact while reducing implementation risk.

2. Material You Translation for Enterprise

Adapting consumer design language for business contexts

Material You's public guidelines were designed for consumer apps like Gmail and Photos—contexts very different from enterprise device enrollment. I needed to interpret these principles for information-dense admin screens while maintaining the expressive, personal feel that defines Material You.

Dynamic Color Approach

Challenge: Consumer apps use wallpaper-based color theming.
Enterprise Solution: I defined a fixed accessible palette that applied Material You's dynamic color principles without requiring user customization. This ensured consistent branding while retaining the visual warmth of the system.

Typography Hierarchy

Challenge: Material You's expressive type scale needed adjustment for information-dense screens with legal disclaimers and policy descriptions.
Enterprise Solution: I balanced visual hierarchy with content density requirements, ensuring readability never suffered for aesthetic expression.

Component Behavior

Enterprise Needs: Consent screens with multiple disclosure levels, multi-step progress indicators, and error states requiring admin intervention.
Result: Created 23 new component variants documented for the broader Android Enterprise design system.

3. Screen Redesign & Implementation

Systematic visual refresh across all flows

Working in priority order (high-frequency screens first), I redesigned each screen applying the new design tokens, components, and patterns. Weekly design reviews with engineers and product managers ensured technical feasibility and business requirement alignment.

Loading Screen Evolution

Before

Generic loading animation with minimal context, rigid blue color scheme, and technical-feeling geometric shapes.

After

Expressive animated illustration using soft, organic shapes in Material You's color palette. Loading states now provide contextual information about what's happening while users wait.

Updated loading screen featuring Material You's expressive visual language with contextual progress information

Consent Screen Transformation

Before

Dense blocks of legal text with standard Material Design 2 components, bright blue buttons, and minimal visual breathing room.

After

Improved visual hierarchy with Material You typography, refined spacing tokens, and expressive illustration showing the work profile concept. Updated iconography creates a more modern, trustworthy feel while maintaining clarity about privacy implications.

Work profile consent screen redesigned with Material You components and improved information hierarchy

Consumer Android Integration

The visual refresh also ensured enterprise setup felt cohesive with the broader Android setup experience. Screens like "Anything else?" now share the same visual language, component behavior, and interaction patterns as consumer setup flows—creating a seamless brand experience whether setting up a personal Pixel or a company-managed device.

Unified visual language across consumer and enterprise Android setup experiences

4. Design System Documentation

Building for scale and consistency

Beyond individual screen designs, I created comprehensive documentation enabling other designers and engineers to implement Material You correctly:

• Figma Component Library: All enterprise-specific Material 3 components with variants, states, and usage guidelines
• Token System: Complete color, typography, spacing, and elevation values aligned with Material You
• Implementation Specs: Detailed engineering handoff documentation including motion principles, responsive behavior, and accessibility requirements
• QA Checklist: Visual quality framework covering contrast ratios, touch targets, component usage, and cross-platform consistency

This design system work reduced future design time by ~40% and was adopted by Android Enterprise Settings, Quick Settings, and Device Policy teams.

Impact & Results

Visual Consistency Achieved

Consolidated 87 component variations → 34 standardized components (61% reduction). Achieved 100% alignment with Material You token system across all enterprise surfaces.

Accessibility Improvements

All text now meets WCAG 2.1 AA standards (4.5:1 contrast minimum). Touch targets increased from 44dp → 48dp, exceeding accessibility minimums.

Process Efficiency Gains

~40% reduction in future design time via reusable component library. Visual QA framework adopted by 3 other Android teams.

User & Stakeholder Feedback

Post-launch user research noted setup "felt more modern" and "aligned with my Pixel experience." Positive reception from OEM partners for cohesive Android brand.

Key Learnings

Design system implementation is 80% communication, 20% pixels. The success of this project hinged on clear documentation, proactive engineering partnership, and continuous stakeholder alignment—not just creating pixel-perfect mockups.

Visual consistency requires systematic rigor at scale. Without a comprehensive component inventory, migration strategy, and QA framework, inconsistencies inevitably emerge across 40+ screens and multiple engineering teams.

Enterprise design can be expressive. Material You proved that business software doesn't have to feel sterile or purely functional. Personality and professionalism can coexist, creating experiences that feel both trustworthy and human.

What's Next

The BC25 visual refresh established a foundation for continued evolution:

• Illustration refinements based on user feedback and brand guidelines
• Dark mode optimization for improved low-light usability
• Micro-interaction polish to enhance perceived performance and delight
• Expanded component library for emerging enterprise use cases like zero-touch enrollment and dedicated device scenarios