Selected Case Studies

Deep-dive into research-driven digital products.

Every project balances intuitive usability, inclusive accessibility architecture, and refined visual craft.

View All Projects
FinAccessibility mobile banking screens showcasing high contrast UI and screen-reader focus states
FINTECH / DESIGN SYSTEM2024
WCAG 2.1 AAA
120+ Inclusive Testing Hours

FinAccessibility — Banking for Everyone

WCAG 2.1 AAA Compliant Design System & Mobile App

A ground-up mobile banking architecture focused on screen-reader optimization, high-contrast visual tokens, and tactile audio-visual micro-interactions.

UX ResearchDesign SystemWCAG AAAAccessibility
Read Case Study
PulseCare clinical interface displaying real-time patient triage data and simplified decision matrices
HEALTHCARE / SERVICE DESIGN2024
HIPAA & WCAG 2.1 AA
45 Healthcare Specialist Interviews

PulseCare — Emergency Triage Platform

Clinical Decision Support System & Service Flow

Streamlining hospital emergency room triage protocols into a zero-latency digital dashboard that cuts check-in processing duration by 38%.

Service DesignUser TestingDashboard UIHealthTech
Read Case Study
EcoTrace mobile application showing interactive environmental emission graphs and habit goal tracking
SUSTAINABILITY / PRODUCT DESIGN2023
WCAG 2.1 AA
Quantitative Survey (n=450)

EcoTrace — Carbon Footprint Tracker

Data Visualization & Behavioral Design Experience

Translating granular household carbon emission datasets into clear, actionable micro-habits that encourage sustained behavioral shifts.

Product DesignData VisBehavioral UXMobile App
Read Case Study
AuraOS spatial user interface concept demonstrating spatial sound waves and high contrast eye-gaze zones
EXPERIMENTAL / SPATIAL UI2023
Inclusive Spatial Guidelines
Usability Testing & Motion Studies

AuraOS — Accessible Spatial Interface

Next-Gen Spatial Audio & Tactile Interaction Matrix

Exploratory UI paradigm for spatial head-worn displays prioritizing spatial audio cues, eye-tracking contrast zones, and customizable gesture models.

Spatial UIAccessibilityResearchPrototyping
Read Case Study
Design System First Approach

Interested in seeing raw process artifacts & prototypes?

I document usability test transcripts, screen reader wireframes, and design system token specs for all major projects.

Technical Snippets & UI Lab

Visual Explorations

A curated collection of UI micro-interactions, accessibility engineering patterns, and design system snippets exploring the boundary between form and code.

Focus ring accessibility test matrix component display
outline: 3px solid hsl(240 100% 50% / 0.85); outline-offset: 2px;
Design Systems
A11y Focus Ring Engine

Dynamic dual-ring focus indicator system that adapts contrast ratio automatically across light and dark canvas layers.

WCAG 2.2 AAA4.5:1 RATIOSYSTEM CORE
Interactive Spec
Fluid typography scaling grid matrix visualization
font-size: clamp(2.5rem, 6vw + 1rem, 5.25rem);
Typography
Fluid Type Math Curve

Mathematical clamp formula scaling display headings seamlessly between 320px mobile and 2560px ultra-wide screens without layout shifts.

CLAMP() MATH0 SHIFTVIEWPORT AWARE
Interactive Spec
Kinetic button micro interaction frame layout
transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
UI Motion
Kinetic Micro-States Matrix

Tactile haptic button states designed with spring physics, providing instant visual feedback while guaranteeing zero layout redraw.

350MS SPRINGGPU COMPOSITEDZERO REDRAW
Interactive Spec
Semantic token theme color palette swatches
–color-background: var(–background); –color-primary: var(–primary);
Token Architecture
Semantic Color Context Mapper

Strict semantic CSS token hierarchy mapping parchment paper hues directly to deep night charcoal contexts for effortless re-theming.

18 TOKENSCSS PROPS0 RUNTIME
Interactive Spec
Asymmetric 12 column spatial design wireframe blueprint
grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem;
Layout Systems
Asymmetric Spatial Grid

Editorial 12-column wireframe layout balancing structured design case studies with high-impact visual whitespace breaks.

12-COL FLEX32PX GUTTERRESPONSIVE
Interactive Spec
Color contrast compliance verification widget mockup
const contrastRatio = calculateAPCA(foreground, background);
Accessibility Tools
Realtime Contrast Inspector Widget

In-browser WCAG compliance checker calculating relative APCA contrast values dynamically during theme customization.

APCA ALGORITHMDYNAMIC HSLWCAG COMPLIANT
Interactive Spec

Interested in custom design system tokens or UI engineering?

Review full project case studies or reach out for collaboration.