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.
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 no longer maintainable. Instead of delivering custom components per device, I worked with engineers to render and adapt the same elements across devices.
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.
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 is difficult.
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.
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.
The final set of components was 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.
Pre-configured components allow designers, researchers, and developers to create, test, and launch new workflows much quicker.
Until now, Assistant teams mainly used color and font styles to make designs adaptable and easy to manage. The new system added 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.
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.
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.