← Back to work
DESIGN SYSTEMS / PRACTICE & CRAFT

Building the foundations behind better products.

Design systems are more than component libraries. They are shared languages that connect design decisions, accessibility, interaction patterns and engineering delivery.

Component architectureTokensDocumentationGovernance
SYSTEM / 01
FOUNDATIONS
COMPONENTS
Primary actionSecondary
Search components ⌕
✓Accessible by defaultReady
Illustrative design-system specimen — not a production screenshot
MY APPROACH

From fragmented UI to a coherent system.

I think about the system as a product: how people discover it, contribute to it, adopt it and keep it healthy over time.

01 / AUDIT

Find the patterns

Inventory existing screens, identify duplication, and map inconsistencies across workflows.

02 / DEFINE

Build foundations

Establish color, type, spacing, states, accessibility and reusable component rules.

03 / ENABLE

Connect teams

Document usage, variants, interaction behaviors and implementation handoff.

04 / EVOLVE

Keep improving

Define contribution, review and release processes that can scale with the product.

SELECTED SYSTEM EXPERIENCE

Two different contexts. One systems mindset.

01 / HEALTHCAREHANGER

Designing for complex clinical workflows.

Show how shared components and interaction patterns support consistency across patient information, order configuration, validation and approvals.

Clinical workspacePatient overview　 Orders　 Activity

Illustrative component composition. Replace with Hanger design-system screenshots.

Suggested evidenceComponent inventory · Input states · Workflow patterns · Figma variants
02 / RETAIL7-ELEVEN

Creating consistency across fast-moving consumer journeys.

Show how a flexible visual language can support browsing, selection, checkout and delivery states across mobile experiences.

9:41 ●●●
Your order
Fresh favoritesAvailable for delivery
Quick essentialsReady to add
Continue to checkout →
TYPE SCALEAaBRAND COLORS
BUTTON STATESDefault / Hover / Disabled

Illustrative mobile UI and token examples. Replace with your 7-Eleven samples.

Suggested evidenceBrand tokens · Mobile components · Interaction states · Handoff specs
ANATOMY OF A SYSTEM

Show the thinking, not just the library.

This example section demonstrates how to present a component from foundation to behavior, rather than displaying a gallery of screens.

COMPONENT SPECIMEN / ILLUSTRATIVE
Label, input, focus, disabled and error states should be specified together.
01

Structure

Anatomy, sizing, spacing, content rules and responsive behavior.

02

Behavior

Focus, validation, disabled states and interaction feedback.

03

Accessibility

Labels, keyboard use, contrast and semantic patterns.

04

Implementation

Design-to-code naming, properties and documentation.

WHAT TO ADD NEXT

Turn this showcase into proof of your work.

Replace the illustrative samples with real, approved Hanger and 7-Eleven artifacts. The strongest story will show the original inconsistency, the system decisions you made, the resulting components and how teams used them. Add measurable adoption or efficiency outcomes only where you can substantiate them.

← Explore more work