Modernizing the Gmail's - People Card
Google Workspace | People Card - Design System | Shipped 2024
OVERVIEW
Project overview
Redesigned People Hover card to align with the material "You" guidelines, improving information access for both enterprise & consumer users while modernizing UX, expanding functionality, and establishing a scalable foundation for future development.
Which means this product deals with complex healthcare data, timelines, conditions, encounters, care plans and each module was starting to develop its own look and feel. A design system ensured consistency across all surfaces.
PRODUCT
Web
TIMELINE
Q1 2023 - Q4 2024
MY ROLE
As a UX/Visual designer, I established the card's strategy and worked on future enhancements, including personalization features and increasing partner traffic engagement.
TEAM
Jerry Cao (Senior Interaction Designer), Travis Eliot (Software Engineer)
SKILLS
Visual Design, Stakeholder Management, Interactive Prototype
IMPACT
Released across the Google workspace for both Enterprise and Consumer users
INTRODUCTION
What is a Hover Card?
Every time you hover over a name in Gmail or Docs, a tiny window appears offering just enough context to keep you moving. That’s the People Hovercard. It quietly supports millions of users a day, helping them connect, follow up, or learn more without breaking their workflow.
PROBLEMS & PROJECT GOALS
Problems & project goals
When I first looked at the Hovercard, it was clear to me that while it had been part of the Google experience for years, it hadn’t really evolved with users’ needs or with Google’s own design standards.
I noticed a few major issues that shaped my redesign goals:
The design felt outdated
The Hovercard was still using older patterns and hadn’t been updated to Material 3. As Google’s design language evolved, this surface felt stuck in the past, creating inconsistency across products.
Low Usage, High Impact
Key actions like “open detailed view” drove significant partner traffic, but overall usage was minimal. At just 0.1% engagement, it wasn’t living up to its potential impact.
Social moments felt flat
Features like birthday reminders were present, but they didn’t feel personal or meaningful enough to spark genuine connection.
The UI was cluttered
Users saw disabled icons, irrelevant actions, and too much noise. For example, “Add to Contacts” appeared even on no-reply emails, which only added to confusion.
Convert this component to a meaningful connector
The Hovercard was treated as a static component, when in reality it could be a connector helping users move seamlessly across Gmail, Contacts, and partner experiences.
OPPORTUNITY
A meaningful redesign to improve the functionality & usability
Restructured the layout to create clearer information grouping
Identified the next most frequently used button and ensured that CTAs deliver value when users view this hover card in their respective contexts
Kept the current CTA Open detailed view at the bottom to test its effectiveness. We didn't want to remove it or change its placement at this stage.
Recognised that while compact design has its merits, but thoughtful white space creates a better user experience
INITIAL FEEDBACK
A surprising feedback
While partners were happy about the re-organizing and actions (& other things that I can't share yet), they were primarily concerned about the card's length. Since this component appears across all Workspace products, they worried about it consuming too much screen space, despite its importance.
I presented this redesign to our partners to gather their feedback but size of the card came out of the box!
I was probably being too ambitious. Looking at how much space this new card was taking up, it was obvious they wouldn't accept it.
RE-EVALUATIONS
Re-evaluating feedback and time constraints
After going through the research, feedback, and technical constraints, I realized it made more sense to test changes gradually instead of all at once. So I proposed breaking the improvements into two phases to learn and adjust along the way.
Phase 1 (The current solution)
Minimal but valuable UX changes and a card that accommodates client requests (Google Chat, Calendar, Sheets, Drive)
Phase 2
Adding advanced features to support partner integrations and enable user personalization options
FINAL DESIGNS
While Phase 2 designs remain confidential…
I can definitely walk you through the Phase 1 changes that you can see today!
Restructured Layout & Dynamic buttons
I optimized the card layout to maintain hierarchy while enhancing the 1P action's visibility. Button placement was redesigned to accommodate future content needs.
You might notice the card looks slightly longer than before. That was intentional. My approach was to prioritize clarity over compactness in the first rollout, measure how users engaged with the redesigned buttons, and then iterate. The long-term plan was to eventually retire the “Open detailed view” once we validated the new actions were performing well.
Strategic De-emphasis: Balancing Engagement with Partner Value
By positioning this button within the contact information section, created a logical flow where users can naturally progress from viewing basic details to accessing more comprehensive information.
Birthday banner - a bit of playfulness
The current hover card design lacks cohesion between the birthday animation and notification placement. While the card currently focuses on user and enterprise information, future versions will be more personalized.
Enhanced Name Pronunciation & other Interactions for Better Accessibility
Enhanced the motion and icons with different interactive states, making this accessibility feature more intuitive and usable
OUTCOMES
The Hover card is finally released live to 3 billion users globally 🎉
Though I’m no longer with the team, the final design I left behind approved by all 1P partners went live exactly as it was. No changes, no rework.
In a space as cross-functional and high-visibility as this, having the work hold up all the way through launch felt like a quiet but meaningful win.
That said, I still made sure to think ahead and outlined how we could measure success post-launch. Here’s how I planned to evaluate the impact of the redesigned Hovercard:
Better CTA Usage
At present, the CTA usage is only 0.1%. The hypothesis is that this is due to it being the only button that's more visible than other actions.
Driving relevant partner traffic
Help users focus on what’s relevant in current context (ex - reaching out based on person’s presence) and more.
Reducing accidental clicks
We observed that people frequently attempt to click on certain elements that lack interactive features. We aim to test whether adding contextual interactions will satisfy these click attempts.
And for me, the real outcome wasn't just shipping a cleaner card. It was turning the Hovercard into a strategic connector across Google products while ensuring we had the right metrics in place to prove its long-term value.
TAKEAWAYS
Key takeaways
Designing for scale: This project taught me to think beyond a single surface. I built a solution that worked seamlessly across Gmail, Contacts, and Google’s ecosystem.
Balancing priorities: Improving clarity for users was just as important as supporting partner engagement. Found the sweet spot!
Thinking beyond launch: Design doesn’t stop at handoff. I defined metrics and hypotheses up front so the team could measure impact on real behaviors like CTA usage and accidental clicks.
Durable decisions: One of my proudest moments was seeing my design go live to 3B users with no rework.
Bonus because you stayed :)
Here are some initial variations this card went through before we landed on the phase 1 solution
