Walgreens · Curbside pickup

Curbside pickup that kept going
after checkout.

I owned the UX: the concept, the flows and the wireframes.

Role Sr. UX DesignerTeam Shop and CheckoutTimeline 6-month contractYear 2021

Problem

COVID made curbside urgent overnight, and one pickup touched checkout, order systems, geolocation and the store's own software.

Solution

A two-trigger flow, "I'm On My Way" and "I'm Here," that I took from concept to wireframes and lined up across four teams.

Results

  • Released nationwide
  • 4 teams on one flow
  • Concept to handoff in 6 months
i

A note on the visuals: I was a contractor, so the original files stayed with Walgreens. The screens here are recreated for my portfolio. The notebook sketches are my originals.

01 · The stakes

COVID made curbside urgent.
Nobody had a system for it yet.

Customers needed a fast, low-contact way to get their orders, and Walgreens needed them using it as soon as possible. One pickup touched checkout, order systems, geolocation and the store's own software at once.

02 · The room

Four teams. One pickup moment.
I designed the moments between them.

Each team owned its piece of curbside. I led the UX for mobile and made sure the customer saw the right thing every time another team's system answered.

WebCheckout on desktop
Mobile MeApp shop and checkout
BackendOrders, status and geolocation
In-store softwareWhat managers and associates see

The question we kept asking

How does a store know you're coming,
and what do you see while you wait?

03 · The flow

Two triggers, one email, someone walking out to your car.

"Ready" wasn't automatic. An associate had to say so, and that kicked off everything else. I designed what the customer sees at each step.

Step 1Customer checks outWeb or mobile
Step 2Associate marks it readyFrom the inventory system
Step 3Email goes out"I'm On My Way" and "I'm Here"
Early triggerCustomer taps "I'm On My Way"

The store gets a signal to start pulling the order before the customer arrives.

Arrival triggerWithin 2 miles, one of two paths

Location on: the geofence notifies the store automatically. Location off: tap "I'm Here," add vehicle details, submit.

Both paths end the same wayStaff carry the order out to the customer's car.
User flowBoth arrival paths, automatic and manual, ending at the same handoff. I worked with backend on each response so the front end always knew what to show.
Every order
Customer checks outweb or mobile
Associate marks it readyin-store software
Email goes out"I'm On My Way" + "I'm Here"
Taps "I'm On My Way"store starts pulling the order
At the store, one of two paths
Path Aautomatic
Within 2 mileslocation on
Geofence notifies the store"customer is near"
Path Bmanual
Taps "I'm Here"location off
Adds vehicle detailsmake, model and color
Store notifiedcustomer + vehicle
Both paths
Staff carry the order out to the carthe same handoff, every time

04 · Process

It started on graph paper.

I sketched the On My Way states, the vehicle form and how nearby-store stock should show up, then turned them into wireframes for every step.

Four notebook pages of Walgreens sketches: On My Way states, mobile PDP conditions, basket-level stock check and nearby-store rules
Service blueprintThe VP of Product brought in a service designer to map the full service across all four teams. I worked with them so the blueprint and my flows told the same story.
TeamCheckoutOrder ready + emailEarly triggerArrival triggerHandoff
Mobile (me)Mobile checkout"On My Way" + "I'm Here" email"On My Way" tap confirmationLocation permission + vehicle formWires handed to UI design
WebDesktop checkout
BackendOrder status + email trigger"Get items ready" notificationGeofence + "customer arrived" notification
In-store softwareAssociate marks the order readyStaff carry the order to the car
Service designThe service designer mapped all four teams across both triggers, surfacing the gaps at each handoff.

Reconstructed for this portfolio from my notes. It shows the project structure, not the original artifact.

05 · The handoff

I owned the wires. A UI designer owned the pixels.

At Walgreens, UX and UI are separate roles. These are examples of the wireframes I handed to the UI designer: eight key moments, from checkout to the curb. The final visuals stayed with Walgreens, so this is the part of the work that was mine.

9:41
How would you like to receive your items?✕
PickupStore #0000 · 123 Main St
Ready in as little as 30 min if ordered 1 hr before close.
Free
Same Day DeliveryYour delivery address
Delivers in 1–2 hours if ordered by 6 pm.
$5.99
ShippingShip to home or store
Free on orders over $35.
Free*
Add to cart

Cancel

Step 1 of 8

Pickup at checkout

Pickup, same day or shipping per item, with timing and price up front.

The callPick the store at checkout

Pickup, same day or shipping is chosen per order, with the store up front, so nobody picks a store that can't fill it.

9:41
Walgreens

Mon 2:14 PM

Order confirmed! We're preparing your items now. View order details: wlgrn.com/rph

Mon 2:52 PM

Your order's ready! Let us know when you're on the way and when you're here: wlgrn.com/omw
Text message
Step 2 of 8

The "ready" text

Sent when the associate marks it ready. One link covers both moments.

The callLet the text and email do the work

A text and an email carry both moments, "I'm on my way" and "I'm here," so customers don't need the app to use curbside.

9:41
Your order is ready for pickup!
WWalgreens
Hi Ash, your order is ready for pickup!

For even faster pickup, let us know when you're on the way!

I'm on my way
I'm here
◎ Pickup address

Store #0000
123 Main St
Anytown, IL 00000

▣ Store hours

Mon–Fri 8am–10pm
Sat–Sun 9am–9pm

Choose your pickup method
Curbside pickup

Arrive between 9am and 9pm.

Park in a curbside spot, then tap "I'm here" below.

or
Drive-thru pickup

Check your store's drive-thru hours.

Once you're in the drive-thru, we'll hand it through the window.

Step 3 of 8

The "ready" email

One email, two moments: "On my way" starts the prep, "I'm here" brings it out. Curbside or drive-thru is explained below.

The callLet the text and email do the work

A text and an email carry both moments, "I'm on my way" and "I'm here," so customers don't need the app to use curbside.

9:41
🔒 walgreens.com
‹ BackW
Thanks! We're getting your order ready.

Order #00000000 · Store #0000

What happens next
  1. We pull your items and bag them.
  2. When you arrive, tap "I'm here" in your email, or we'll know if location is on.
  3. A team member brings it to your car.
Need to change something?Call the store
Step 4 of 8

On my way

Tapping "On my way" tells the store to start pulling the order.

9:41
‹PickupW
Order #00000000On the way · Store #0000
◎Turn on location for faster pickup

We'll let the store know when you're within 2 miles, so your order is ready when you pull up.

Turn on location

Not now, I'll tap "I'm here"

Allow "Walgreens" to use your location?Used to tell your store when you're close to pick up an order.

Allow While Using App

Allow Once

Don't Allow

Step 5 of 8

Location in the app

The app asks for location services, so the 2-mile geofence can tell the store you've arrived.

The callMake location optional

With location on, the 2-mile geofence tells the store. With it off, a short vehicle form does the same job.

9:41
🔒 walgreens.com
‹ BackW

Your order is ready! Choose how you'd like to pick it up, or get it in-store at the photo counter.

Choose a pickup option
Drive-up curbsidePark in a pickup spot. We bring it to your car.
Walk-up curbsideNo vehicle? Meet us out front.
Drive-thruUnavailable at this store
ⓘ Liquids, perishables and bulky items can't go through the drive-thru. We'll suggest curbside.
Continue
Step 6 of 8

Drive-up or pick up

Every way to meet the order, with unavailable options and limits shown up front.

The callSet limits before the curb

Drive-thru can't take liquids or bulky items, so the wires steer those orders to curbside before anyone shows up.

9:41
🔒 walgreens.com
‹ BackW
Pickup information

Store #0000 · 123 Main St

Pickup order forJordan L.
Tell us what you're driving
Select⌄
Select⌄
Select⌄
e.g. 3
Submit details
Step 7 of 8

"I'm here" fallback

For anyone with location off: just enough to find the car.

The callMake location optional

With location on, the 2-mile geofence tells the store. With it off, a short vehicle form does the same job.

9:41
🔒 walgreens.com
‹ BackW
Thank you!

We're collecting your order now. A team member will be right out with it.

Waiting more than 5 minutes?Call the store and we'll sort it out.Call store

View the pickup FAQs

Email for weekly deals
Email
Sign up
Step 8 of 8

The handoff

Confirmation, plus a way out if something goes wrong.

06 · How I led it

Leading the UX while my lead was stretched thin.

  • Ran UX for mobile shop and checkout day to day while my design lead and manager covered other projects.
  • Kept web, backend and in-store software working from one flow, without authority over any of them.
  • Partnered with the service designer the VP of Product brought in, so the blueprint and my flows matched.
  • Handed my wires and flows to a UI designer, then handed off the full package when my six-month contract ended.

07 · The results

Released nationwide, built for speed.

Nationwiderelease across Walgreens stores
4 teamsworking from one flow
6 monthsfrom concept to handoff

Walgreens wanted customers using curbside as soon as possible. Two triggers gave them a fast way in, with or without location turned on.

More case studies

ClearCarHow I turned an acquired widget into a portal dealers live in.View case study →DigiCast block clerk, auctioneer and seller rep screensDigiCastBidding software for ACV's physical auction lanes.View case study →

Thanks for reading.

Head back home, or browse the rest of my work.

← Back homeAll work

Back to top ↑