Lead Designer Systems Thinking

Designing how
Shipt talks to
its members.

Shipt’s communication infrastructure was fragmented across push, SMS, email, and in-app — with no unified system governing what gets sent, where, or why. I designed the strategy and led the execution across three layers: automated comms, a preference center, and a centralized notification center.

Shipt notification center designs
The Problem

Order status notifications were unreliable.

Time-sensitive updates — your shopper is on the way, a substitution needs approval — weren’t reaching members consistently.

Push opt-ins were low. Email was saturated. SMS was expensive.

No single channel could reliably reach all members. Each one had limitations — low opt-ins, inbox fatigue, or cost.

There was no centralized place to communicate with members.

Promos, retailer announcements, feature updates, deals — all of it was scattered across channels with no unified system.

The solution wasn’t one feature. It was three layers, built in priority order.

I designed the strategy across three layers. Each one had to ship before the next could work.

Priority system — three layers

Automated Comms

The most foundational layer. Ordering is a core member experience — notifications about order status had to be reliable before anything else could work.

Preference Center

Members needed control over what they received and through which channels. Once opt-in quality improved, every downstream feature became more effective.

In-App Notification Center

A centralized hub inside the app — not dependent on push opt-ins or email open rates. Every layer below enables the next above it.

Notification Preference Center

I led the design and development for the Notification Preference Center.

+106.19%
increase in push notification open rate — members who opted in were now receiving more relevant, better-timed communications.
+71%
increase in email click-through rate — granular preference controls drove higher-quality engagement across all channels.
Preference Center design

The real issue wasn’t the notifications.
It was the reach.

The gap

Email hit inboxes but converted at 1.1% CTR. SMS was already overloaded with shopper comms. Push opt-ins were too low to rely on for broad reach. No channel could consistently reach all members — and none offered a passive, always-available surface for non-urgent content.

The Design Approach

This wasn’t just about creating a feed. We needed a framework: one that defines what belongs here, how it’s prioritized, and how it looks so any team can plug in consistently.

Most of the important work happened before any screen was designed. The choices I made in the framework phase determined everything downstream.

01
Strategic framing

I built a framework before I opened Figma.

Before opening Figma, I needed to define what belongs, how it's prioritized, and how any team could ship without a design review. I led a cross-functional brainstorm to surface every notification type, then organized them into five buckets ranked by urgency and user value.

Bucket 1
Bucket 2
Bucket 3
Bucket 4
Step 1

Listing use cases and organizing them in buckets

We started by listing every type of notification the platform could send. We ran a cross-functional brainstorm with Product & Marketing, then grouped all use cases into named buckets.

Highest priorityBucket 4
Bucket 2
Bucket 1
Lowest priorityBucket 3
Step 2

Ranking the Buckets

We arranged the buckets from most to least important based on urgency and member value — creating a clear priority hierarchy that content decisions could map to.

Notification headline 3h
Notification body
CTA #1 CTA #2
Notification headline 3h
Notification body
Step 3

Template System

Defining reusable notification components per bucket so any team can add to the center without needing a design review from scratch.

02
Research-driven pivot

Research challenged our model. I listened.

Research showed users read feeds chronologically with urgency as a secondary signal — not by content type. The 5-bucket model was creating overlap, not clarity. So I challenged our own framework and consolidated to 3.

The Designs

What the Notification Center ended up looking like.

Component

Notification Component

A single, flexible component that handles every notification type in the feed. The visual structure adapts to bucket tier — urgency-ranked notifications use a higher visual prominence, while lower-tier content stays visually quieter.

Notification Component
Visual system

Visual Hierarchy & Tags

Color-coded tier tags make it immediately clear what kind of notification you’re looking at — and how urgent it is. The tagging system gave teams a shared vocabulary for content decisions without needing a design review.

Visual Hierarchy and Tags
Deliberate constraint

Managing the Feed

Users could mark as read or delete — nothing else. Every other control we considered created expectations the backend couldn’t fulfill. A control that doesn’t work erodes trust faster than no control at all.

Managing the feed — deliberate constraint
Real-time

Active Order Updates

Time-sensitive order notifications required a distinct visual treatment to stand out in the feed. Active orders surface at the top when relevant — no hunting through a list of promotional content to find out where your shopper is.

Active Order Updates
Full Case Study

There's more to the story.

The full case study covers the research methodology, the complete card sort and MaxDiff findings, every design exploration considered and rejected, and the delivery roadmap.

Password protected

Incorrect password. Reach out to get access.