Suggests

Displaying suggested email addresses in the Multi-invite widget to increase the number of invited colleagues.

Multi-invite widget — Email addresses field with one tag, three suggestion chips below, Free user trial pill, and the price/charge block.
Self Initiated
3 UI directions explored
11 Iterations
2 wk Timeline

Overview

Role
Product Designer (sole designer, my initiative)
Timeline
Mar 2 — Mar 13, 2026
Team
Head of Product, UX Writer, Design team review
Status
Design complete, annotated for development

Problems

  1. Users manually type email addresses when inviting colleagues — friction slows the process.
  2. Users frequently share access with the same people, but there is no "quick pick" mechanism.
  3. Same-domain guests are potential paid users, but there is no nudge to invite them specifically.
  4. Low conversion through the existing invite widget (per the GA4 funnel pulled with Analytics).

Goals

  1. Increase the number of users invited through the widget.
  2. Reduce friction in email entry by showing frequently used addresses.
  3. Surface same-domain guests as top candidates for invite.
  4. Improve invite UX — pick from suggestions instead of typing manually.

Solutions

  1. Show suggested email addresses in the Multi-invite widget — people the user shares with most often.
  2. Top users by number of shared assets are ranked first; show up to 3 at a time.
  3. One click adds a suggestion to the invite list; the list stays open for multi-select.
  4. Embed the widget on User Management → Users tab.
  5. Attach a FeaturePopover "Invite teammates for free" to the "Free user trial" tag.

Metrics

  1. Growth in invites through the widget (vs baseline: 14 over 4 months).
  2. Reduction in time-to-invite.
  3. CTR on the suggested users block.

Questions raised & resolved

  • Resolved How do we define "frequently used"? — Top-N by sharing frequency, capped at ~10 users.
  • Resolved Do we separate same-domain from others? — No, the email itself shows the domain.
  • Resolved How do we explain why we suggest? — "You share with them often."
  • Resolved Do we use the word "guests"? — No, universal phrasing (single-paid plans don't have a "guests" concept).

Interactive Demo

Vanilla JS port of the Multi-invite widget — same input behavior, same suggestion mechanic, same animations as the prototype shipped to dev.

  • Suggestion chips fade in 1.5s after mount, then sit below the input.
  • Click a chip — adds the email as a tag, the chip disappears from the suggestion row.
  • Type an email + Enter / comma — adds it as a tag.
  • Backspace on an empty input — removes the last tag (and re-surfaces it as a suggestion if it was a suggested one).
  • Once you have at least one tag, the price block animates open below the input.
No-jump mechanic The input container is always 108px. Suggestions load after a 1.5s delay — the input area (flex: 1) shrinks as the 36px suggestion row slides in. The outer height never changes, so there is no layout jump.

Self-initiated from CJM

Pattern noticed during CJM mapping Users share assets with a small, recurring set of people — the same names appear across projects. Forcing them to type those addresses from memory every time was unnecessary friction. I proposed using sharing history to power smart suggestions. Not in any brief — brought it to the Head of Product as a low-effort conversion improvement, and got the go-ahead to design it.

Three UI Directions — Reviewed with the Team

I prepared three different takes on the same idea and walked the team and design colleagues through them — to compare trade-offs together rather than ship the first version that crossed my screen. The Dropdown direction was picked to take forward.

Version A — Chips

Tag-style suggestions below the input field. One click adds the email. Clean and compact. Suggestions disappear when added, reappear with Backspace.

Version B — Suggest Dropdown

Overlay dropdown below the input. Header: "YOU SHARE WITH THEM OFTEN." Multiple selection without closing. Head of Product's preferred choice: "cleaner, especially when money is involved."

Version C — Inline Tags

Suggestions appear inside the textarea itself. Most compact, least visual noise. Smallest footprint in the UI.

Shared mechanics across the directions Max 3 suggestions, prioritized by sharing frequency. Click adds email to input, suggestion disappears from the list. Backspace returns the suggestion. FeaturePopover "Invite teammates for free" attached to the "Free user trial" tag.

Process — 11 Iterations

  1. 01

    Started complex, simplified by request

    First version had chips with user avatars and names. PM feedback: too heavy. Simplified to email-only chips.

  2. 02

    Added dropdown variant

    PM liked the dropdown idea better — "cleaner when money is in the picture." Added as Version B alongside chips.

  3. 03

    Added inline variant

    Explored chips inside the textarea itself. Most compact option — minimal disruption to the existing input design.

  4. 04

    Iterated on dropdown details

    Height, overlay behavior, button visibility, header copy — 6 sub-iterations on Version B alone.

  5. 05

    Added FeaturePopover from design system

    Found the right design system component for the "free" messaging. Annotated the connection between suggests and the trial state.

  6. 06

    Full annotation in Figma + English mechanics doc

    All states, transitions, and interaction mechanics described in English for the development team. Animation specs for the textarea expansion (108px fixed height for input + suggests).

Deliverables

3 UI directions reviewed with team Figma annotations on the chosen direction Animation specs: textarea expansion (108px) Analytics events per suggestion interaction Video walkthroughs for each direction

Why This Matters

This case demonstrates something I value: design initiative from observation, not from briefs. I wasn't asked to solve this. I noticed the pattern while doing another task (CJM mapping), framed it as an opportunity, and delivered a ready-to-test solution.

The Head of Product didn't need to think through the trade-offs alone — I came with three directions explored, side-by-side, and a recommendation already in hand.