uw-ssec/uiux-design-team

Designs A/B tests, writes structured hypotheses, computes required sample sizes and test duration, performs significance analysis (chi-squared, confidence intervals), produces ship/no-ship/inconclusive recommendations, and advises on frequentist vs Bayesian approach selection. Use when designing or analyzing an A/B test, calculating sample size for an experiment, evaluating whether a variant won, debugging surprising experiment results, or choosing between frequentist and Bayesian analysis for a design change.

Runs axe-core/pa11y/Lighthouse scans, identifies WCAG 2.2 violations by success criterion, generates structured findings reports, fixes ARIA misuse and missing labels, checks keyboard navigation and color contrast ratios, and produces VPAT-ready accessibility documentation. Use when auditing a web interface for WCAG 2.2 AA/AAA compliance, fixing reported accessibility violations, verifying ARIA usage, checking keyboard navigation or color contrast, or preparing accessibility documentation for a release.

Generates comprehensive color systems including brand palette shade scales (50–950), semantic CSS custom property token mappings, dark mode variants, and WCAG contrast validation — delivered as ready-to-use CSS and design tokens. Use when defining a brand color palette, generating accessible shade scales, mapping semantic color tokens, building dark mode variants, or validating WCAG contrast compliance across a color system.

Use when implementing or extending a shared component library — scaffolding new components with CVA variants, writing Storybook stories, wiring visual regression, or auditing existing components for state and a11y coverage.

Recommends CSS architecture approaches, compares methodologies, generates migration plans, and produces stylelint configs and cascade layer structures. Use when starting a new frontend project and choosing a CSS approach, refactoring inconsistent CSS, hitting specificity wars, integrating a component library, adding theming/dark mode, or deciding between BEM, Tailwind, CSS Modules, or CSS-in-JS.

Produces structured teardown documents, principle-to-application comparison matrices, and pattern libraries by applying a five-layer analysis framework to real products. Use when analyzing a product's UI/UX to extract transferable patterns, benchmarking your own design against a category leader, looking up how a specific product (Stripe, Linear, Notion, Apple, Spotify, Netflix, Tinder, Airbnb, etc.) solves a design problem, or building a competitive teardown.

Bridges design and development by generating component spec sheets, running five-gate visual QA checks, producing asset export packages, and writing redline annotations. Use when packaging a design for developer implementation, writing component specifications, running design QA against a built UI, exporting assets from Figma, or resolving design-vs-code drift before a release.

Conducts structured design evaluations against Gestalt, Nielsen, and Rams principles, produces heuristic evaluation reports with severity-rated findings, and recommends design improvements. Use when running a heuristic evaluation, structuring a design critique, selecting which design framework to apply for a given project context, or auditing a UI against Gestalt/Nielsen/Rams principles.

Scaffolds design system infrastructure, generates Style Dictionary token configs, produces component templates and Storybook setups, and creates UI audit reports. Use when bootstrapping a new design system from scratch, auditing an existing UI for systemization, setting up Storybook + Style Dictionary scaffolding, or defining governance and versioning for a shared component system.

Guides design token architecture and Style Dictionary configuration, generates token files for web CSS variables, iOS, and Android, and audits token naming and reference integrity. Use when implementing or refactoring design tokens, setting up Style Dictionary, defining a three-tier token architecture, wiring multi-platform output (web/iOS/Android), or auditing existing tokens for naming and reference integrity.

Generates and scaffolds reusable UI components with proper state management, props interfaces, lifecycle hooks, and styling encapsulation across React, Vue, Svelte, and Web Components. Use when implementing or scaffolding a reusable UI component in React, Vue, Svelte, or Web Components/Lit; when porting a design across frameworks; or when a component needs hooks, composables, reactive state, slots, or shadow-DOM encapsulation.

Provides CSS layout code and recommendations using Grid and Flexbox, creates responsive column systems, and selects the right layout approach for pages and components. Use when laying out a page or component, choosing between CSS Grid and Flexbox, setting up a column grid, aligning nested components to a parent grid, or building responsive card/dashboard layouts.

Designs information architecture by generating sitemaps, navigation hierarchies, and content taxonomies, running card sort and tree test analyses, and auditing navigation labels against findability criteria. Use when structuring a new site/app's content, when users report "I can't find anything," when running a card sort or tree test, or when auditing navigation labels and taxonomy for an existing product.

Recommends easing functions and durations, generates CSS and Framer Motion animation code, and audits motion for performance and prefers-reduced-motion compliance. Use when adding or fixing UI animation, choosing duration/easing for a transition, debugging janky motion, implementing micro-interactions or page transitions, or auditing motion for prefers-reduced-motion compliance.

Generates responsive layouts with media queries, fluid grids, and container queries, creates breakpoint configurations, optimizes images for multiple resolutions, and validates layouts across viewports. Use when building or refactoring an interface that must work across phone, tablet, and desktop; setting breakpoints; sizing touch targets; serving responsive images; or testing layout across viewports.

Guides creation and refinement of web typography systems including fluid type scales, font selection and pairing, readability optimization, and design token encoding. Use when building a new type scale, converting fixed sizes to fluid clamp() values, choosing or pairing fonts, fixing readability issues (line height, measure, tracking), or encoding typography as design tokens / CSS custom properties.

Audits interfaces against usability heuristics, conducts cognitive walkthroughs, calculates and interprets SUS scores, and produces severity-ranked usability findings reports. Use when auditing an existing interface for usability issues, when running a heuristic evaluation or cognitive walkthrough, when scoring an SUS survey, or when prioritizing UX bugs by severity.

Creates customer journey maps and service blueprints that visualize touchpoints, user emotions, pain points, and opportunities across an end-to-end experience. Use when creating a journey map, customer journey, or CX map; visualizing a user's end-to-end experience for a specific scenario; identifying pain points and emotion lows; aligning teams on user flow; planning improvements to onboarding/checkout/support; or producing a service blueprint.

Guides UX research and discovery workflows including interview planning, persona development, JTBD job stories, competitive audits, and insight synthesis. Use when planning or running user interviews, building personas or JTBD job stories, designing a competitive audit, synthesizing research data, or framing insights and How-Might-We questions for ideation.

Writes, reviews, and refines UI microcopy for digital products including button labels, error messages, empty states, and voice and tone documentation. Use when writing or auditing UI copy — button labels, error messages, empty states, onboarding flows, confirmation dialogs, tooltips, success toasts — or when establishing voice and tone documentation for a product.

Defines aesthetic direction, color palettes, typography pairings, spacing systems, and component visual styles for UI interfaces. Use when designing or coding a new interface that needs a distinctive look and feel, theme, or aesthetic direction; when reviewing visuals for hierarchy or brand alignment; when choosing colors, typography, or styling for a design system; or when an existing UI feels generic ("AI slop") and needs production-grade visual polish.

Creates wireframe layouts and structural diagrams for UI screens, defining content hierarchy, component placement, responsive behavior, and grid structure. Use when sketching or producing a wireframe, mockup, or lo-fi page layout for a new screen; when restructuring an existing page's content priority; when validating UI structure or page layout with engineering; or when communicating responsive behavior across breakpoints.