Headline Google Assistant

Google Assistant is coming to more devices, demanding a more flexible UI framework. Together with engineers and researchers I created a design system that better adapts to viewport sizes and usage contexts and lays the groundwork for smooth integration with Gemini, Google's large language model.

My roles
UX Design
Visual Design
A person holding a smartphone in their right hand. The screen shows the Assistant UI
What's the
weather in
Zurich?
Hey
Google
it’s 24
degrees
celcius
A phone screen showing the current weather as part of the Assistant UI

Google Assistant supports thousands of user flows, each requiring unique UI and UX considerations. To ensure the design system addressed the most critical needs, I partnered with researchers to prioritize key flows based on usage data and product strategy.

A Pixel Tablet showing the user's schedule as part of the Assistant UI
And how does my schedule look?

Google Assistant's reach has expanded significantly in recent years. Initially exclusive to Pixel phones, it's now available on foldables, tablets, and other devices. This rapid growth presented a challenge: user experiences for different platforms were designed by separate teams, leading to a lack of consistency in design and engineering patterns. To address this, I created a design system that unifies the Assistant experience across all devices, thereby, enabling designers and developers to build experiences more quickly and efficiently.

Given the team size – over 100 UX designers and a much larger engineering team – the key challenge was identifying the needs of a large set of stakeholders. This complexity was further compounded by the fragmented nature of the tech stack, which relied on multiple engineering frameworks.

I designed a system that covers 1000+ user journeys and leverages design tokens to make components more adaptive. In addition, I partnered with engineers to implement building blocks that can be used across engineering frameworks – a first for Google Assistant and a change that significantly reduced development times.

A Pixel Fold with the Assistant UI on both the outer and the inner screen

Initially designed for a limited number of devices, Assistant's UI elements were hardcoded for specific screen sizes. With new device categories emerging, however, this approach slowly reached its limits as the amount of components was not maintainable anymore. Instead of delivering custom components per device, I worked with engineers to render and adapt the same elements across devices.

A Pixel Tablet showing the Assistant UI

The importance of visuals in a multi-modal world

With more and more voice assistants appearing, some might wonder about the importance of visual output. Visuals shouldn't be automatic, but used only when clearly necessary and helpful. They should be clear and focused, minimizing unnecessary elements to ensure smooth switching between voice and visual interaction.
Google Assistant uses visuals in three key areas: Confirmation, Disambiguation, and Input.

A phone screen showing the Assistant UI

Confirmation

While Assistant always confirms actions with voice, a visual output lets users quickly review what happened. This is especially helpful in noisy environments where hearing the confirmation might be difficult.

A phone screen showing a disambiguation flow within Google Assistant

Disambiguation

Whether it's two similar contacts or a mumbled voice command, sometimes it's easier to see the choices available rather than hearing everything read out loud.

A phone screen showing the Assistant UI. The screen shows available options for setting up a timer

Input

While voice interaction often relies on a structured, step-by-step approach, visuals can offer multiple options at once, ideally enabling a more natural conversation flow.

A phone screen showing the Assistant UI

Confirmation

While Assistant always confirms actions with voice, a visual output lets users quickly review what happened. This is especially helpful in noisy environments where hearing the confirmation might be difficult.

A phone screen showing a disambiguation flow within Google Assistant

Disambiguation

Whether it's two similar contacts or a mumbled voice command, sometimes it's easier to see the choices available rather than hearing everything read out loud.

A phone screen showing the Assistant UI. The screen shows available options for setting up a timer

Input

While voice interaction often relies on a structured, step-by-step approach, visuals can offer multiple options at once, ideally enabling a more natural conversation flow.

Two Pixel Tablets showing the Assistant UI. The first tablet shows information about the lead singer of the band SharkTank, the other one shows the latest songs from the band
Hey Google, who's singing this?
…and what are their latest songs?
Two Pixel Tablets showing the Assistant UI. The first tablet shows information about the lead singer of the band SharkTank, the other one shows the latest songs from the band
A hand is picking up a Pixel Tablet from its stand. The screen shows set alarms as part of the Assistant UI

Componentry

The final set of components is deliberately simple. To achieve this simplicity, however, researchers and I worked together to analyze hundreds of user experiences to identify requirements and design principles across flows.

A stack of instances of a card component showing a cat
Multiple instances of a chip component that allow the user to pick a time
Two instances of a button component. The first one reads No, the second one Yes
An instance of a card component showing the calories of a banana
A stack of instances of a list item component
An instance of a chip component that allows the user to add a time
An instance of a list item component showing a timer
Two instances of a slider component
An instance of a list item component allowing the user to toggle the flashlight
A stack of instances of a card component showing Arlo Parks
An instance of a list item component showing a music track from Spotify

Plug and Play

Pre-configured components allow designers, researchers, and developers to create, test, and launch new workflows much quicker.

Color
Radius
A phone screen showing the Assistant UI. The flashlight has just been turned on through voice command

DESIGN 
TOKENS

Until now, Assistant teams mainly used color and font styles to make designs adaptable and easy to manage. The new system adds tokens for design elements like radii, sizes, and spacing. This is crucial for a fully responsive design system, as it allows components to automatically adjust to different screen sizes and layouts.

Space
Type
Size
Space
Size
Color
Type
Radius
Space
Size
Color
Type
Radius
Hey Google, What's next?
A phone screen showing the Google Gemini UI with Assistant integration

GEMINI

Gemini, Google’s multimodal large language model, shares key UI and UX patterns with Google Assistant. That’s why it was even more important to design and implement components in a device- and service-agnostic way.

A phone screen showing the UI for Assistant's Read Aloud feature

Read aloud

The "read aloud" feature extends Assistant's functionality beyond its primary interface, allowing users to access the content of any article or document through a generated audio version. To complement this functionality, I designed a visual experience that seamlessly bridges the gap between Google Assistant and Android.

Other projects