Redesigned : People Hover Card
A People Card is a component integrated across Google workspace, providing at-a-glance information about people and enabling quick communication throughout the platform.
A People Card is a component integrated across Google workspace, providing at-a-glance information about people and enabling quick communication throughout the platform.
My Role
My Role
Research, Interaction Design, Prototyping, Concept Development
Research, Interaction Design, Prototyping, Concept Development
Research, Interaction Design, Prototyping, Concept Development
Year
Year
2023
2023
2023
Team
Team
Jerry Cao (Senior Interaction Designer)
Travis Eliot (Software Engineer)
Jerry Cao (Senior Interaction Designer)
Travis Eliot (Software Engineer)
Jerry Cao (Senior Interaction Designer)
Travis Eliot (Software Engineer)
Overview
Overview
Overview
Redesigned People Hover card in Gmail to align with New Material Design, improving information access for both enterprise & consumer users while modernizing UX, expanding functionality, and establishing a scalable foundation for future development.
Redesigned People Hover card in Gmail to align with New Material Design, improving information access for both enterprise & consumer users while modernizing UX, expanding functionality, and establishing a scalable foundation for future development.
Redesigned People Hover card in Gmail to align with New Material Design, improving information access for both enterprise & consumer users while modernizing UX, expanding functionality, and establishing a scalable foundation for future development.
Why Redesign?
Working on a widely used component means getting my detective hats on!
Why Redesign?
Working on a widely used component means getting my detective hats on!
Why Redesign?
Working on a widely used component means getting my detective hats on!
During my research, I discovered something surprising: the hover card's main Call to Action (CTA) is only used by 0.1% of Gmail users. This raised important questions about the component's effectiveness. To better understand the situation, I collaborated with designers and researchers to analyze existing research and identify key problems with the current hover card implementation.
During my research, I discovered something surprising: the hover card's main Call to Action (CTA) is only used by 0.1% of Gmail users.
This raised important questions about the component's effectiveness.
To better understand the situation, I collaborated with designers and researchers to analyse existing research and identify key problems with the current hover card implementation.
During my research, I discovered something surprising: the hover card's main Call to Action (CTA) is only used by 0.1% of Gmail users. This raised important questions about the component's effectiveness. To better understand the situation, I collaborated with designers and researchers to analyze existing research and identify key problems with the current hover card implementation.
The Paradox of Low Engagement, High Impact — 0.1% CTA Usage Still Drives Significant Partner Traffic
The Paradox of Low Engagement, High Impact — 0.1% CTA Usage Still Drives Significant Partner Traffic
"From Legacy to Modern: Transforming the Hover Card Design Language"
"From Legacy to Modern: Transforming the Hover Card Design Language"
The Clash of Clickables: When Actions Don't Align With User Needs
The Clash of Clickables: When Actions Don't Align With User Needs
Hover card needs a Human touch
Hover card needs a Human touch
From Component to Connector: Transforming Hover Cards for Partner Integration
From Component to Connector: Transforming Hover Cards for Partner Integration
"From Legacy to Modern: Transforming the Hover Card Design Language"
The Paradox of Low Engagement, High Impact — 0.1% CTA Usage Still Drives Significant Partner Traffic
The Clash of Clickables: When Actions Don't Align With User Needs
Hover card needs a Human touch
From Component to Connector: Transforming Hover Cards for Partner Integration
The Paradox of Low Engagement, High Impact — 0.1% CTA Usage Still Drives Significant Partner Traffic
The Paradox of Low Engagement, High Impact — 0.1% CTA Usage Still Drives Significant Partner Traffic
"From Legacy to Modern: Transforming the Hover Card Design Language"
"From Legacy to Modern: Transforming the Hover Card Design Language"
The Clash of Clickables: When Actions Don't Align With User Needs
The Clash of Clickables: When Actions Don't Align With User Needs
Hover card needs a Human touch
Hover card needs a Human touch
From Component to Connector: Transforming Hover Cards for Partner Integration
From Component to Connector: Transforming Hover Cards for Partner Integration
A meaningful redesign to improve functionality and usability
Initial variation : Improved IA and Restructured layout
A meaningful redesign to improve functionality and usability
Initial variation : Improved IA and Restructured layout
A meaningful redesign to improve functionality and usability
Initial variation : Improved IA and Restructured layout
Restructured the layout to create clearer information grouping
Restructured the layout to create clearer information grouping
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
Identified the next most frequently used button and ensured that CTAs deliver value when users view this hover card in their respective contexts
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.
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.
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
Recognised that while compact design has its merits, but thoughtful white space creates a better user experience
Recognised that while compact design has its merits, but thoughtful white space creates a better user experience
A surprising feedback!
I presented this redesign to our partners to gather their feedback but size of the card came out of the box!
A surprising feedback!
Partners provided feedback that the card design exceeded intended dimensions.
A surprising feedback!
I presented this redesign to our partners to gather their feedback but size of the card came out of the box!
While partners were happy about the re-organizing and actions, 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.
They appreciated the reorganization but expressed concerns about the card's length consuming excessive screen space across Workspace products.
While partners were happy about the re-organizing and actions, 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 was probably being too ambitious. Looking at how much space this new card was taking up, it was obvious they wouldn't accept it.
I was probably being too ambitious. Looking at how much space this new design was taking up, it was obvious they wouldn't accept it.
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-evaluating feedback and time constraints
After reevaluating our research, feedback, and engineering constraints, we decided to implement these updates in two phases.
Re-evaluating feedback and time constraints
Based on all our findings, we split the updates into two parts to keep things manageable.
Re-evaluating feedback and time constraints
After reevaluating our research, feedback, and engineering constraints, we decided to implement these updates in two phases.
Phase 1 - Minimal but valuable UX changes and a card that accommodates client requests (Google Chat, Calendar, Sheets, Drive)
Phase 1 - Minimal UX improvements and streamlined card design (Google Chat, Calendar, Sheets, Drive)
Phase 2 - Adding advanced features to support partner integrations and enable user personalization options
Phase 2 - Enhanced features for partner integrations and user customization
While I can't share all the designs (Phase 1 and Phase 2 changes) since they haven't been released to the public yet, I can definitely walk you through the Phase 1 changes that you can see today!
While Phase 2 designs remain confidential, let me walk you through the implemented Phase 1 changes.
While I can't share all the designs (Phase 1 and Phase 2 changes) since they haven't been released to the public yet, I can definitely walk you through the Phase 1 changes that you can see today!
Restructured Layout & Dynamic buttons
Restructured Layout & Dynamic buttons
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.
I optimized the card layout to maintain hierarchy while enhancing the 1P action's visibility. Button placement was redesigned to accommodate future content needs.
Strategic De-emphasis: Balancing Engagement with Partner Value
Strategic De-emphasis: Balancing Engagement with Partner Value
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.
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
Birthday banner - a bit of playfulness
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 Name Pronunciation & other Interactions for Better Accessibility
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
This is finally released to the public. You can view these changes specifically in email
Outcomes
This is finally released to the public. You can view these changes specifically in email
Outcomes
This is finally released to the public. You can view these changes specifically in email
While I can't share specific metrics, I want to outline how we planned to measure success
Better CTA Usage
Better CTA Usage
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.
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.
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.
Will contextual actions result in driving better traffic to partners?
Will contextual actions result in driving better traffic to partners?
Will contextual actions result in driving better traffic to partners?
Help users focus on what’s relevant in current context (ex - reaching out based on person’s presence) and more.
Help users focus on what’s relevant in current context (ex - reaching out based on person’s presence) and more.
Help users focus on what’s relevant in current context (ex - reaching out based on person’s presence) and more.
Did we reduce accidental clicks?
Did we reduce accidental clicks?
Did we reduce 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.
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.
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.
While I can't share specific metrics, I want to outline how we planned to measure success
Bonus because you stayed :)
Here are some initial variations this card went through before we landed on the phase 1 solution
Bonus because you stayed :)
Here are some initial variations this card went through before we landed on the phase 1 solution
Bonus because you stayed :)
Here are some initial variations this card went through before we landed on the phase 1 solution
Now let's connect & make something great!
I'm always open to new opportunities, collaborations, and connections. Whether you have a project you'd like to discuss, want to share your work, or just say hi! Feel free to reach out.
Now let's connect & make something great!
I'm always open to new opportunities, collaborations, and connections. Whether you have a project you'd like to discuss, want to share your work, or just say hi! Feel free to reach out.
Now let's connect & make something great!
I'm always open to new opportunities, collaborations, and connections. Whether you have a project you'd like to discuss, want to share your work, or just say hi! Feel free to reach out.
In some other universe, we're already friends. So why not in this one 😉
@2025 • Crafted by anuhya with inspiration, peer pressure, and sleepless nights with bursting ideas
In some other universe, we're already friends. So why not in this one 😉
@2025 • Crafted by anuhya with inspiration, peer pressure, and sleepless nights with bursting ideas