PREMIUM PORTFOLIO SYSTEM
Component Library
20 custom-crafted portfolio sections, bento cards, and interactive layouts designed to show off deep product thinking, metrics, and engineering details.
01. Career & Experience Layouts
Career Timeline
Experience Flow
Career Timeline
Experience Flow
2023 - Present
2023 - Present
ACTIVE
Senior Product Designer · Linear
Leading design for core workspace collaboration tools and keyboard navigation systems. Shipped commands menu v2.
Senior Product Designer · Linear
Leading design for core workspace collaboration tools and keyboard navigation systems. Shipped command menu redesign.
2020 - 2023
2020 - 2023
Product Designer · Stripe
Designed billing dashboard reporting widgets, customer checkout flows, and Stripe Tax integration dashboard.
Product Designer · Stripe
Designed billing dashboard reporting widgets, customer checkout flows, and Stripe Tax integration dashboard.
Design Stack & Comfort Levels
Proficiency
Design Stack & Skills
Proficiency
Figma
Expert · Systems, Auto-layout
Figma
Expert · Systems, Auto-layout, Variables
React & TS
Advanced · Prototype build
React & TS
Advanced · Prototype build, custom engine
Framer
Expert · Custom code, Overrides
Framer
Expert · Custom code components, Overrides
SwiftUI
Intermediate · iOS layouts
SwiftUI
Intermediate · Native iOS layout exploration
Utility Over Ornament
Every shadow, line, and spacing token must serve user orientation. Clean, purpose-built tools outlast decorative trends.
[ 01 ]
Utility Over Ornament
Every shadow, line, and spacing token must serve user orientation. Clean, purpose-built tools outlast decorative trends.
Performance is UX
Layout shifts, heavy assets, and sluggish feedback destroy focus. High performance builds trust quicker than any copy.
[ 02 ]
Performance is UX
Layout shifts, heavy assets, and sluggish feedback destroy focus. High performance builds trust quicker than any copy.
Handoff is the Design
A mockup is a blueprint. The final design is what runs in the user's browser. Clean specs, edge states, and components make it real.
[ 03 ]
Handoff is the Design
A mockup is a blueprint. The final design is what runs in the user's browser. Clean specs, edge states, and components make it real.
03. Engineering Handoff & Flows
02. Product Metrics & Process Components
conversion rate lift
METRIC IMPROVEMENT
+142%
Optimized multi-step checkout flow by eliminating secondary confirmation prompts and grouping inputs.
+142%
Optimized multi-step checkout flow by eliminating secondary confirmation prompts and grouping inputs.
Design Comparison
Design Comparison
LEGACY SYSTEM
Dense, multi-tab setup forms causing user dropoffs and data validation confusion.
LEGACY FLOW
Dense, multi-tab setup forms causing user dropoffs and data validation confusion.
REDESIGN OUTCOME
Single-column layout with real-time feedback loops and progressive disclosures.
REDESIGNED ENGINE
Single-column layout with real-time feedback loops and progressive disclosures.
"Paul has a rare combination of visual excellence and deep engineering understanding. He shipped checkout flows that cut developer implementation time in half."
"Paul has a rare combination of visual excellence and deep engineering understanding. He shipped checkout flows that cut developer implementation time in half."
Sarah Jenkins
VP of Product · Stripe
Sarah Jenkins
VP of Product · Stripe
Feature Specifications
Handoff spec
Feature Specifications
Handoff spec
Keyboard Navigation (WCAG)
Shipped
Keyboard Navigation (WCAG)
SHIPPED
Physics-based Canvas Handles
In Review
Physics-based Canvas Handles
PROTOTYPE
03. Engineering Handoff & Flows
theme.json
Handoff spec
"color": {
"primary": "/Accent/Sage",
"background": "/Background/Warm"
},
"spacing": {
"gap": "14px"
}
"color": {
"primary": "/Accent/Sage",
"background": "/Background/Warm"
},
"spacing": {
"gap": "14px"
}
User Journey Flow
User Journey Flow
01
Trigger
[ 01 ]
Trigger
02
Decision
[ 02 ]
Decision
03
Success
[ 03 ]
Success
Design Tokens
Design Tokens
Warm Background
#F5F5F7
Warm Background
#F5F5F7
Text Ink
#1D1D1F
Text Ink
#1D1D1F
Soft Line
rgba(0,0,0,0.1)
Soft Line
rgba(0,0,0,0.1)
Process FAQ
Process FAQ
How do you collaborate with developers?
I provide interactive state mockups, design token variables in JSON, and run code prototypes directly in React to alignment check before production.
How do you collaborate with developers?
[ - ]
I provide interactive state mockups, design token variables in JSON, and run code prototypes directly in React to alignment check before production.
What is your design research strategy?
I map customer support hotspots, run 5-user rapid design verification cycles, and build live cohort event tracking to measure metric shifts.
What is your design research strategy?
[ + ]
04. Bento Grid Portfolio Layouts
metrics
99.8%
Lighthouse Score
PERFORMANCE
99.8%
Lighthouse Score
collaboration
ACTIVE WORKSPACE
COLLABORATION
ACTIVE WORKSPACE
Cross-functional alignment
We centralized design specs in a single interactive playground, saving teams up to 8 engineering hours per feature.
Cross-functional alignment
We centralized design specs in a single interactive playground, saving teams up to 8 engineering hours per feature.
Fluid components that adapt fluidly from 320px mobile viewports to ultra-wide 4K monitors.
responsive design
Adaptive layouts
RESPONSIVE DESIGN
Adaptive layouts
Fluid components that adapt fluidly from 320px mobile viewports to ultra-wide 4K monitors.
accessibility
WCAG AAA
Contrast ratio of 7:1 across all typography and states.
ACCESSIBILITY
WCAG AAA
Contrast ratio of 7:1 across all key typography and states.
terminal prototype
$ npm run deploy
TERMINAL LOGS
$ npm run deploy
> build success (320ms)
> build success (320ms)
05. Walkthroughs, Media & CTA Banners
Prototype Player
live preview
Prototype Player
live preview
INTERACTION STEPS
1. Hover over control handles to inspect physical constraints
2. Pinch to adjust width and inspect snap feedback
3. Toggle wireframe overlay to see geometry constraints
INTERACTION STEPS
[ → ] Hover over control handles to inspect physical constraints
[ → ] Pinch to adjust width and inspect snap feedback
[ → ] Toggle wireframe overlay to see geometry constraints
The High-Volume Creator
The High-Volume Creator
A designer managing hundreds of vector assets weekly. Values rapid keyboard shortcuts and direct manipulation over secondary contextual menus.
A designer managing hundreds of vector assets weekly. Values rapid keyboard shortcuts and direct manipulation over secondary contextual menus.
• Goal: Uninterrupted flow during edits
• Pain: Tiny vector handles require high mouse precision
[ ✓ ] Goal: Uninterrupted flow during edits
[ ! ] Pain: Tiny vector handles require high mouse precision
User Interview #04
1:14 / 3:45
User Interview #04
1:14 / 3:45
"I didn't expect the handle to respond to my finger spacing... it felt like sculpting clay."
"I didn't expect the handle to respond to my finger spacing... it felt like sculpting clay."
THE CHALLENGE STATEMENT
Sluggish feedback loops kill designer flow
Our user research identified that designers spend 34% of their active session time clicking small handles or waiting for layout systems to compile. This lag causes design fatigue and increases support tickets.
THE CHALLENGE STATEMENT
Sluggish feedback loops kill designer flow
Our user research identified that designers spend 34% of their active session time clicking small handles or waiting for layout systems to compile. This lag causes design fatigue and increases support tickets.
Let's build something natural.
Available for design leadership & systems contracts starting Fall 2026.
Let's build something natural.
Available for design leadership & systems contracts starting Fall 2026.
Book a 15m call
Book a 15m call
© 2026 Paul Choe
Designed with calm conviction