When Google Home Got Personal

Miche Alvarez is a digital designer with over a decade of experience. Their journey at Google started at Material Design, shaping and unifying the design system language across Google products. They are now a staff designer on Google’s Devices and Services team, combining the best of Google AI, software, and hardware.

Here — as part of our celebration of a decade of Material Design — Miche shares the hurdles and successes that their team experienced when applying Material to the Google Home app — demonstrating what adaptability and scalability truly mean in practice at Google.

I joined Google Home at a pivotal moment in March of 2021 — during the height of the pandemic, when many people were spending a lot of time at home! When I started, the team was just beginning to use Material You in the Google Home app — a centralized system that makes your smart home easy to navigate, while coordinating everything from Nest to Chromecast to WiFi. You can control all the settings in one place, from any surface, and all your compatible devices work together.

When Google launched the first iteration of the Home app nearly ten years ago, our average user had fewer than three connected devices at home; now the average US household has 25. The new Google Home app is focused on customization, giving customers a personalized view of all of their devices and the ability to control them.

When implementing Material for Google Home, color was one of our biggest challenges. That’s because in order to make the app easy to use, we assigned meaning to every color: orange indicates the thermostat is in heating mode; yellow means that your light is on. Slight details are important. Because the Google Home app is used for safety and security, we need to reserve red to indicate errors or emergencies; that’s why we use an orange-red in the climate space.

All of this semantic color created an interesting problem to solve: How would we adopt Material while retaining the core color principles that our customers relied on?

To add to the complexity, different teams own each vertical. As a systems designer, I might work on a design for the climate team, whose members want to use a specific color, and then with the safety team, who might want to use that same color for something totally different. My job was to make sure that color, typography, and components wouldn’t conflict in the user’s end experience, and that it all worked nicely with Material You’s signature feature: dynamic color.

Dynamic color allows users to select a color from their device’s wallpaper as the palette for their operating system. This means all default colors in the Google Home app with no semantic meaning take on a full color shift like in any other app.

But a semantic color that indicates important information can’t change completely, or else it will lose its meaning. So I collaborated with folks at Android and Material to create something called “harmonized color.” With harmonized color, all semantic colors, like lighting, heating, cooling, and error, keep their given hue, but shift fifteen degrees to the overarching theme chosen from the wallpaper. Just a tint.

Creating harmonized color was a huge milestone — we needed to adopt Material, but in doing so we wanted to make the system better and more accessible for all people. Making sure we’re creating a good product experience for everyone is very important to me.

Another challenge for the Google Home team is that these experiences live across many surfaces — displays, tablets, watches — and also across different ecosystems, within the app and also within the Android OS. As you can imagine, adapting user experience across so many form factors presents a lot of complexity.

As part of the same redesign process, I worked with teams at Android and Material to create a framework that would allow us to scale the Google Home app across all of these different devices. The adaptive design team at Material created a new system for scaling interfaces, explicitly focused on the Pixel tablet that was not yet released — but my team wanted to push for a more systematic solution.

We created a framework for our app to adapt, and when it was released, we were shocked. It worked even on extreme outliers and edge cases that we hadn’t tested! The most impressive example, in my opinion, was when it worked on the Motorola Razr, a device that folds both vertically and horizontally. Turns out, even as a perfect tiny square, the app is totally usable! It was a huge milestone that highlighted how systems design can scale things in ways that are beyond what you can plan for.