Reimagining the Google Home app to enhance usability, optimize navigation, and simplify smart home management.
Role
Lead Product Designer
Date
2020
Type
App Redesign Concept
Tools
Adobe XD
Project Overview
Disclaimer: This project occurred before the Android Material You alignment was announced for the new Google Home app that launched in 2023 (3 years later).
This project stemmed from two motivations: first, as a frequent user of the Google Home app and a designer passionate about solving problems, I had many ideas for improving the app’s usability to better fit real-world workflows. Second, I wanted to explore Adobe XD as a design tool, comparing its capabilities to Sketch and Figma, which I was already familiar with.
In this personal exploration, I reimagined the Google Home app to address its usability challenges and create a more intuitive, user-centered experience. The original app often felt cluttered and required users to navigate multiple layers to access devices or settings, which hindered efficiency. My redesign aimed to simplify navigation, optimize screen space, and align the design with Google’s principles of clarity and minimalism.
Key enhancements included introducing a modular card-based layout for easier device management, a reorganized navigation system to streamline interactions, and a clear visual hierarchy to reduce cognitive load. These improvements resulted in a more cohesive and user-friendly interface for managing smart home devices.
Goals
The primary goal of this redesign was to simplify and improve the user experience for managing smart home devices. This included creating a more organized layout, reducing steps to access controls and settings, and optimizing the visual hierarchy to ensure key information and actions were easy to locate.
Additionally, the redesign sought to align with Google’s ecosystem and visual standards for a cohesive brand experience. This project also served as an opportunity to evaluate Adobe XD’s capabilities for prototyping and interaction design while exploring new approaches to app design.
The redesign introduced:
Primary and secondary actions prominently displayed on homepage cards for quick access.
A tab organizer and sort functions to streamline navigation and reduce scrolling effort.
Material Design icons and cohesive typography to align with Google’s branding.
A cleaner layout with a clear hierarchy to improve usability.
Dark mode for user comfort in low-light environments.
These enhancements aimed to resolve usability challenges while providing a more intuitive, user-friendly app experience.
Problem
Cluttered Interface
The list view was overcrowded, making it difficult for users to quickly locate devices or controls. Additionally, key actions were buried in multiple clicks, requiring significant time to reach a target device.
Inefficient Navigation
Devices were sorted alphabetically, causing users to scroll extensively to access devices in rooms near the end of the list. The lack of a quick navigation option added to the inefficiency.
Poor Visual Hierarchy
Content was centered and stacked, making it hard for users to distinguish between primary and secondary actions. The absence of a clear structural hierarchy resulted in a disorganized and confusing interface that lacked prioritization of key elements.
Screen Space Mismanagement
The app’s layout wasted valuable screen real estate, leading to a cluttered appearance and limited functionality.
Limited Accessibility Features
The app did not offer a dark mode, which made it harsh to use in low-light conditions, contributing to eye strain and user discomfort.
Inconsistent Fonts and Branding
Fonts were sized and colored inconsistently, further complicating the user experience. Additionally, the icons and color palette did not align with Google’s ecosystem, making the app feel disconnected from Google’s broader design standards.
My Role
As the sole designer on this personal project, I took on every aspect of the redesign, from research and analysis to prototyping and visual design. I started by identifying pain points in the original app through observation and informal feedback from peers. This informed the creation of wireframes and prototypes, which I iterated on to refine the interaction flow and optimize screen space usage.
My responsibilities also included crafting a cohesive visual identity, designing custom icons, and aligning the layout with Google’s design system. Using Adobe XD, I developed interactive prototypes to simulate the user experience and test key design decisions.
Design Process
Research and Analysis
I began by analyzing the current Google Home app to identify key areas for improvement. Informal feedback and my own observations highlighted inefficiencies in navigation, poor use of screen space, and a lack of structure in the interface. These insights informed the direction of the redesign. Here's my teardown:
Module 1 — Add / Profile / Home-name
This area wastes too much screen space between the plus-icon, the user-profile and the home-name which is a field that is not a user priority.
The home-name should be smaller and tucked away on the top left of the app.
Module 2 — Home controls
These home controls contain a lot of items that are secondary.
Move these controls under a main-menu option. This will open up space for device-view.
Module 3 — Room and devices
Room and device layout are stacked in a way that takes too much space from the main view.
Create a card layout to help better organize and categorize devices, save time and space and, making it easy for the user to quickly access devices. Also, rework primary actions to allow the user to quickly trigger devices to help save time.
Module 4 — Toolbar
The highlighted area is being generated by an oddly positioned microphone button, therefore unnecessarily wasting space. The drawer/tab section (home/events) offers limited use and seems disconnected.
Replace the drawer section with a tab layout, moved to the top. Events gets moved as part of the new Home Control component. Replacing the microphone icon with the Google Assistant logo, permanently floating on the bottom right corner of the app. This allows the user to quickly trigger the assistant to save time.
Wireframing and Prototyping
The redesign focused on creating a modular card-based layout, where each device was represented as an individual card. This replaced the traditional list view, making the interface more organized and visually distinct.
To improve navigation, I introduced tabs (Devices, Rooms, and Favorites) and sorting options, allowing users to switch between views or organize devices by type or location. A redesigned bottom navigation menu provided quick access to Google Assistant, Home, and recent activities, reducing the need for multiple interactions.
Branding and Visual Design
I updated the visual identity to align with Google’s own design system (pre-Material You), incorporating clean lines, simple typography, and a cohesive color palette. Personalized icons were designed for each device type to enhance recognizability, and a dark mode option was introduced for user comfort in low-light settings.
To establish a clear visual hierarchy, I structured the layout to prioritize key information, such as device status and controls, while relegating secondary features to menus. This approach reduced visual clutter and made the interface more intuitive to navigate.
Features and Functionality
Modular Card-Based Layout
Replaced the traditional list view with a card system that grouped devices into visually distinct units, making it easier to locate and manage them.
Tab Organizer and Sorting
Added tabs (Devices, Rooms, and Favorites) for streamlined navigation, with sorting options for device type or location.
Enhanced Bottom Navigation
Redesigned the bottom menu for quick access to Google Assistant, Home, and recent activities.
Specific Icons and Dark Mode
At the time, the amount of icons on the app were limited and felt too generic, and almost abstract — this is not a diss on the icon designs. However, I believed the icons were too thin for the application. I pulled some icons together that in my view, better represented the diverse group of equipment that was compatible with the Google Home ecosystem.
You could literally use the Google Home app as a flashlight in the dark, no joke. It was painful to interact with the app in a dark environment, particularly something that users check throughout the day. I introduced dark mode for improved accessibility and user comfort, along with personalized icons for each device type.
The color coding was an experiment to help categorize icons. Gray for the Google Home speakers, yellow for lights and plugs, blue for security devices, and green for everyday and third-party speakers.
Optimized Visual Hierarchy
Established a clear structure to reduce clutter and improve readability, and maximize screen real estate above fold.
Home Control Center
One of the biggest challenges with smart home apps is providing quick access to frequently used devices and controls. While the room-based flow offers precision for managing individual spaces, having primary global features easily accessible is equally important.
The Home Control Center solves this by being just a swipe away. It opens as a sheet or drawer, offering quick access to essential features like turning off all lights, viewing cameras, playing music, broadcasting messages, and more.
This space also supports new device onboarding, adding an engaging element by showcasing products with 3D animations that rotate and zoom in. This feature not only enhances functionality but also generates awareness about new equipment with a subtle marketing touch.
Measuring Success
This personal project did not include formal user testing, but the final design concept successfully addressed the usability challenges of the original app. Key outcomes included:
Improved Usability
The card-based layout simplified navigation, making it faster and more intuitive for users to access devices and controls.
Better Visual Design
A cleaner, more structured interface aligned with Google’s design principles, creating a cohesive and aesthetically pleasing experience.
Enhanced Accessibility
Features like dark mode and personalized icons catered to user comfort and visual clarity.
Learnings and Feedback
This project deepened my understanding of designing for complex systems and the importance of aligning functionality with visual clarity. By reimagining the Google Home app, I was able to explore the potential of modular design and experiment with creating a more efficient navigation system.
One key takeaway was the value of optimizing screen space and establishing a clear visual hierarchy, as these elements have a significant impact on usability. Although this was a self-initiated project without formal user testing, it laid the groundwork for future design explorations and inspired me to pursue more projects focused on simplifying everyday interactions.
Next Steps
There aren't any next steps for this project, other than looking back and re-evaluate. If it was today (2024), I'd do a couple of things differently. This project sparked my passion for app design and problem-solving, motivating me to explore more opportunities to design for usability and accessibility. This exploration also solidified my interest in tackling complex design challenges and reaffirmed my commitment to creating thoughtful, user-centered solutions, in a team environment.
Conclusion
The Google Home App Redesign was an invaluable exercise in rethinking how technology can simplify and enhance everyday tasks. By focusing on usability, visual hierarchy, and accessibility, the project delivered a cleaner, more intuitive interface that aligned with Google’s design standards.
