Enter password

Product Designer · Palmstreet Present

David Yeo

Product Designer

I design modular product systems that reduce operational chaos at scale. 12+ product areas. Design system to Storybook. AI as a thinking partner.

Design System· Shipping Infrastructure· Live Commerce· AI as Thinking Partner· Figma → Storybook → Netlify· Seller Fulfilment· $3.3M/wk GMV· Design System· Shipping Infrastructure· Live Commerce· AI as Thinking Partner· Figma → Storybook → Netlify· Seller Fulfilment· $3.3M/wk GMV·
🎨

About

Product Designer at Palmstreet. I design structured, scalable systems across 12+ product areas on a $3.3M/week live commerce platform. Design system to Storybook. Shipping infrastructure. Live commerce features. AI as a thinking partner for architecture, not a shortcut.

Figma Storybook Claude React TypeScript Slack Notion Git Granola Netlify

Animated Explorations

Interaction Prototypes & Motion Studies

Non-production interaction concepts exploring motion, feedback, and delight.

Seller Hub 3
0Pending
0Shipped
$3.3KToday
#PS-4821@plantlover_ca
Hold
#PS-4820@rare_coins_nyc
Shipped
#PS-4819@gecko_ranch
Weather

Interaction 01

Seller Hub Revamp

Unified mobile and web seller dashboard. Order cards animate in with status pills, stats count up on entry, and the sidebar nav highlights on scroll. Designed for 120+ power sellers managing hundreds of daily orders.

Animation Settings
TypeCSS @keyframes
TriggerIntersectionObserver
Easingcubic-bezier(.25,.1,.25,1)
Duration400ms
Stagger300ms per card
Refreshing

Interaction 02

Pull-to-Refresh

Custom refresh with morphing icon states. Four phases: idle, pulling, loading, done. The icon shape-shifts between each.

Animation Settings
TypeCSS @keyframes
TriggerScroll position
Easingcubic-bezier(.34,1.56,.64,1)
Duration600ms
Delay0ms
Home
Search
Saved
Profile

Interaction 03

Tab Bar Morph

Bottom nav with icon-to-label morph. The active tab expands to reveal its label while siblings compress. Pure CSS transitions.

Animation Settings
TypeCSS transition
Trigger:active pseudo-class
Easingcubic-bezier(.42,0,.58,1)
Duration250ms
Delay0ms
0:12
Live Now

Interaction 04

Auction Countdown

Live auction timer with colour-shifting urgency ring. Green to amber to red as time runs out. Designed for live commerce streams where every second counts.

Animation Settings
TypeCSS @keyframes
TriggersetInterval()
Easinglinear
Duration1000ms
Loopinfinite
Current: $42.00
Bid placed

Interaction 05

Bid Ripple

One-tap bid with material ripple feedback. Confirmation appears inline so the buyer never loses context during a live stream. Designed for speed under pressure.

Animation Settings
TypeJS click handler
TriggeraddEventListener('click')
Easingcubic-bezier(.25,.1,.25,1)
Duration350ms
Delay50ms
🌿
PlantHaus Toronto
@planthaus_to
Gold
94%
Ship Rate
91%
On Time
99%
Resolve
Total Sales 0
Avg Rating 4.9 ★
Response < 2h

Interaction 06

Seller Metrics Badge

Animated seller trust signal for live commerce. Three progress rings fill on entry, stats count up, tier badge reflects fraud-tiered eligibility. Verified badge slides in last to anchor trust before the first bid.

Animation Settings
TypeCSS @keyframes
TriggerIntersectionObserver
Easingcubic-bezier(.34,1.56,.64,1)
Duration500ms
Stagger200ms per element

Interaction 07

Skeleton Shimmer

Content loading state with sweeping shimmer gradient. Each placeholder block pulses independently with staggered timing. Designed for Palmstreet's feed, product cards, and seller profiles.

Animation Settings
TypeCSS @keyframes
TriggerPage load / fetch
Easinglinear
Duration1.5s
Loopinfinite

Case Study 01

One Designer Built a Working Design System. Here Is How.

Product Designer + Systems Architect · Figma → Storybook → Netlify

Aug 2025 - Present Active

Display Large24 / 700 / -0.02em
Heading18 / 600 / -0.01em
Body14 / 400 / 0
Caption12 / 500 / .08em
Overline10 / 400 / .12em
Primary#B9EC51
Surface#121212
Card#1E1E1E
Success#5ABF73
Warning#F5931E
Error#E53935

Five type scales and six core colors, defined as JSON/TypeScript tokens that engineers import directly. No guessing at hex codes or font sizes - every value traces back to a single source of truth.

The token architecture bridges Figma and code. Change a value in the token file, and it propagates to Storybook, docs, and shipped product.

Primary Secondary Destructive Ghost
Small Default Large
Disabled Hover Pressed
Search...

Four button variants across three sizes with full state coverage: default, hover, pressed, disabled. Every variant maps to a Figma component with matching props.

Form controls (inputs, toggles, selects) follow the same token-driven approach. Engineers use the same prop names in code that designers see in Figma.

Shipped Pending Cancelled Gold Seller
DY
David Yeo
Product Designer
NOTIFICATION
New order #PS-4821 received
New
spacing.md
16px
radius.lg
12px
shadow.card
0 4px 24px

Status badges, avatars, notification rows, and spacing tokens - built as atoms that compose into larger patterns. Each component documents its own props, variants, and usage.

Atomic design approach: tokens feed atoms, atoms compose into molecules, molecules assemble into organism-level patterns engineers can drop into any feature.

Monstera Albo Cutting
@planthaus_to · Live Now
$145.00$180.00
#PS-4820
@rare_coins_nyc
Shipped
PH
PlantHaus Toronto
Gold Seller · 94% ship rate
Gold

Product cards, order rows, and seller profiles - three core patterns that repeat across the entire platform. Each is built from the same atoms: badges, avatars, type scales, and spacing tokens.

Patterns are documented with real data so engineers see exactly how content fills each slot. No lorem ipsum.

Live
Storybook deployed on Netlify
3
AI tools adopted by team after evaluation
6+
AI tools tested with structured framework
12+
Product areas covered simultaneously

Every new feature started from scratch. Engineers guessed at colours and spacing. I could not stop shipping to build the system - so I built it while shipping.

Claude handled token naming and architecture decisions. Figma Make handled interactive prototypes. The skill is matching problem type to tool type.

"Thanks for putting it together. Looks very solid." — Kang Zhang, CTO & Co-founder, on design review.

Design SystemAI EvaluationToken Architecture StorybookClaude as Thinking PartnerFigma Make
Weather Check· Smart Shipping· Insurance· Hold Shipments· UPS Ghost Account· Fee Rules· 15+ Projects· One Trust Chain· Weather Check· Smart Shipping· Insurance· Hold Shipments· UPS Ghost Account· Fee Rules· 15+ Projects· One Trust Chain·

Case Study 02

Fifteen Projects. One System. Zero Shipping Infrastructure Before Me.

Product Designer · Mobile + Web

Aug 2025 - Present Active

Shipping FlowsFigma embed placeholder

Palmstreet moves live plants, reptiles, collectibles, and jewelry through live commerce. When I joined, sellers purchased labels through a basic flow. No safety checks. No policies. No insurance. No bulk tools.

During cold seasons, live animals arrived dead: nothing flagged weather risk before shipment. A competitive audit made the gap concrete: Palmstreet lagged behind Whatnot, eBay, and TikTok Shop on 8 of 11 core fulfillment features.

I mapped the full chain before designing anything and saw that every gap created downstream trust damage. Fix them in isolation and they conflict. Fix them as a system and each piece reinforces the next.

Three layers: Detection (Weather Check tags orders by forecast), Policy (flat-rate Smart Shipping, insurance add-ons, hold orders), and Execution (unified fee rules, fraud-tiered eligibility, cross-platform flows).

Interviewed top sellers first. Two segments emerged: efficiency-focused and cost-conscious. That research shaped every major decision.

System DiagramFigma embed placeholder
15+
Interconnected projects shipped
38,299
Shipments processed
195,568
Orders across the system
~44/day
Seller workarounds replaced

"Your work has had a meaningful impact on both sellers and the team." — Yufan Jiang, Design Manager, H2 2025 Performance Review.

Weather CheckSmart ShippingInsurance Hold ShipmentsFee RulesMobile Shipment Mgmt

Case Study 03

Buyers Don't Buy for the Item. They Buy for the Room.

Product Designer · Mobile + Desktop Companion

Oct 2025 - Present Active

Live Commerce UIFigma embed placeholder

Live commerce has no undo. A buyer taps to bid and it is final. A Flash Sale that displays wrong means lost revenue on the spot, for sellers generating $10K to $50K in a single stream.

Single buyers hoarding every unit of a limited item shut out the rest of the community. The platform needed mechanics that rewarded the whole room, not just the fastest clicker.

I ran four buyer interviews before designing anything. The lead finding: community reciprocity drives live commerce more than item value. Buyers purchase from sellers because those sellers purchased from them. "Supportive purchases" are social currency.

That changed the design logic completely. If urgency mechanics favour the fastest clicker, they punish the social buyers who make the community work. Every feature had to pass one test: does this create a fair outcome for every person in the room?

Designed Flash Sale (seller-side icon redesign, collab with Abigail Colmenar on buyer widget). Shipped per-buyer purchase limits across all channels. Created Bless the Chat gift cards as shop-specific credits to reinforce the reciprocity loop.

Research + FlowFigma embed placeholder
$3.3M/wk
Platform GMV (all-time record)
v8.56.0
Flagship release features
100%
Inventory sharing: cross-channel enforcement
4+
Buyer research interviews

"Seller performance badges fully shipped in V8.64 — thanks David." — Allen Xu, Product Manager, #product-oncall.

Flash SaleLimited Purchase ControlBless the Chat Camera LockBuyer Research

Get in Touch

Let's build something that ships.

I design systems, not screens. If you care about craft, research, and infrastructure, we should talk.