Back home

DoorDash

DoorDash connects millions of customers with local restaurants and stores. I work within the Integrations team, designing the tools that help merchants and POS providers connect their systems to DoorDash, from developer portals and onboarding flows to internal AI tools. This page is a selection of work from that time rather than a full case study, as much of it is under NDA.
Role
Senior Product Designer
Company
DoorDash

Merchant Integrations

Bank account

Developer Platform - Integrations

DoorDash Help page

Next project

Case study

PwC Junction

Data-fuelled, digital delivery platform.
Home
Sandbox
.glowing-wrapper-glow-outer { position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border-radius: 999px; background: radial-gradient( 85% 120% at 50% 120%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; opacity: 0; transition: opacity 0.8s ease; z-index: 0; /* Keep it behind the button */ } /* Make glow appear when hovering the button */ .glowing-wrapper-button:hover ~ .glowing-wrapper-glow-outer { opacity: 0.8; } .glowing-wrapper-button { box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 3px -1px, /* drop shadow */ rgba(255, 255, 255, 0.22) 0px 1px 1px 0px inset; /* inner light */ } /* Ensure predictable stacking inside the wrapper */ .glowing-wrapper { position: relative; } .glowing-wrapper-animations, .glowing-wrapper-borders-masker, .glowing-wrapper-glow-outer { z-index: 0; } /* --- Button depth (drop + inner shadows) --- */ .glowing-wrapper-button { position: relative; /* create a stacking context */ z-index: 1; /* above the animation layers */ border: 1.5px solid #000; border-radius: 50px; background-color: rgb(44,44,44); /* DROP SHADOW (like your .link-block) */ box-shadow: rgba(0,0,0,0.4) 0px 4px 3px -1px; } /* INNER SHADOW / TOP HIGHLIGHT lives on a pseudo-element so it won't hit icons */ .glowing-wrapper-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* INNER LIGHT (same as .link-block) */ box-shadow: rgba(255,255,255,0.22) 0px 1px 1px 0px inset; } /* Hover state to match your second button */ .glowing-wrapper-button:hover { background-color: rgb(73,73,73); box-shadow: rgba(0,0,0,0.2) 0px 4px 3px -1px; } .glowing-wrapper-button:hover::before { box-shadow: rgba(255,255,255,0.22) 0px 1px 0px 0px inset; }
Let's talk