Redesigned : People Hover Card

A component integrated across Google workspace, providing at-a-glance information about people & enabling quick communication throughout the platform.

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.

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.

As a UX/Visual designer, I established the card's strategy and worked on future enhancements, including personalization features and increasing partner traffic engagement.

Product

Web

Skills

Visual design
Stakeholder management
Interactive prototyping

Timeline

Q1 2023 - Q4 2024

Team

Jerry Cao (Senior Interaction Designer)
Travis Eliot (Software Engineer)

Why Redesign?

The People Hover Card required a redesign to better serve both enterprise and consumer users.

While the previous hover card provided essential information, it wasn't generating much traffic to partner products. Though it offered rich functionality for Enterprise users in Gmail, there was potential to make it more interactive and streamline communication across workspace apps.

To gain deeper insight, I partnered with lead designer and researcher to analyze existing research and pinpoint key issues with the hover card. From our findings and requirements, I identified these main focus areas -

  • 01

    This hover card needed updating to GM3 to align with Google's modern design language and user expectations.

    02

    Low Usage, High Impact: While the CTA has only 0.1% engagement, it remains valuable for partner traffic flow.

    But is accessing further information a primary task?

    03

    Humanizing the Hover Card: Making birthday message feel more personal

    Drive better traffic to other 1P partners with the hover card

    04

    Misaligned Actions and Visual Clutter

    UI is cluttered with disabled icons. & Add to contacts is visible to everyone, including the no-reply emails.

    05

    From Component to Connector: Transforming Hover Cards for Partner Integration

    Drive better traffic to other 1P partners with the hover card

  • 01

    This hover card needed updating to GM3 to align with Google's modern design language and user expectations.

  • 02

    Low Usage, High Impact: While the CTA has only 0.1% engagement, it remains valuable for partner traffic flow.

    But is accessing further information a primary task?

  • 03

    Humanizing the Hover Card: Making birthday message feel more personal

    Drive better traffic to other 1P partners with the hover card

  • 04

    Misaligned Actions and Visual Clutter

    UI is cluttered with disabled icons. & Add to contacts is visible to everyone, including the no-reply emails.

  • 05

    From Component to Connector: Transforming Hover Cards for Partner Integration

    Drive better traffic to other 1P partners with the hover card

  • 01

    This hover card needed updating to GM3 to align with Google's modern design language and user expectations.

  • 02

    Low Usage, High Impact: While the CTA has only 0.1% engagement, it remains valuable for partner traffic flow.

    But is accessing further information a primary task?

  • 03

    Humanizing the Hover Card: Making birthday message feel more personal

    Drive better traffic to other 1P partners with the hover card

  • 04

    Misaligned Actions and Visual Clutter

    UI is cluttered with disabled icons. & Add to contacts is visible to everyone, including the no-reply emails.

  • 05

    From Component to Connector: Transforming Hover Cards for Partner Integration

    Drive better traffic to other 1P partners with the hover card

A meaningful redesign to improve functionality and usability

Initial variation : Improved IA and Restructured layout

  • 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

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 (& 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 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.

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

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

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.

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

While I can't specify metrics, I want to outline how we planned to measure success

While I can't specify metrics, I want to outline how we planned to measure success :

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.

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.

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.

Bonus because you stayed :)

Here are some initial variations this card went through before we landed on the phase 1 solution