← All case studies
Study Hall
·
Web & Responsive Mobile
·
2023
Study Hall Design System
A three-step checkout that a third fewer people abandon.
Button - component
Web & Responsive Mobile
The 30-second version
0:30 read
Role
Lead System Designer
Team
1 UX Manager, 1 Senior PM, 1 Researcher, 5 Engineers
Timeline
10 weeks
Platform
Web & Responsive Mobile
Problem
As Study Hall expanded across ASU, teams were stalled by legacy Adobe XD files, undocumented UI patterns, and zero centralized governance. Every sprint required rebuilding UI components from scratch, causing component bloat, visual inconsistency, and severe designer-developer friction.
-27%
sprint handoff time
900+
Scalable variants created
8.72:1
contrast ratio, WCAG AA complaint
01 Context
The XD-to-Figma Migration
When I joined EdPlus, Study Hall was undergoing a fundamental digital transformation: transitioning our entire design operations from Adobe XD to Figma. Study Hall a joint educational initiative between Arizona State University and Crash Course hosted via YouTube playlists and web portals was growing rapidly. The team needed to ship new learning interfaces continuously while laying down a modern, sustainable design infrastructure.
As the solo design system contributor, my core mandate was clear: architect, build, and document a robust beta version of the Study Hall Design System before the wider design and product teams completed their onboarding into Figma.
The Initial Pain Points Audited
Before touching a component, I audited existing files and observed sprint rituals across design and engineering. We were bleeding time due to seven systemic problems:
Duplicated Efforts: Designers repeatedly rebuilt common patterns like input states, navigation menus, and form structures across separate feature files.
Inconsistent Visual Identity: Slight discrepancies in colors, shadows, and paddings diluted Study Hall's brand presence across courses.
Poor File Management & Detached Instances: A fragmented file ecosystem forced team members to copy-paste elements rather than consume linked master components.
Severe Handoff Overhead: Front-end engineers had to repeatedly inspect and guess spacing values, interaction states, and responsive breakpoints.
Accessibility Blindspots: No standardized checks existed for contrast ratios, mobile tap targets, or focused keyboard states.
02 Research
Comprehensive UI Inventory & Component Audits
My first step was a deep discovery phase across all live Study Hall student portals and learning flows. I cataloged every live screen into a massive UI inventory canvas, identifying redundant buttons, inconsistent cards, and broken layouts.
Because I had to move rapidly without sacrificing enterprise rigor, I benchmarked our architecture against industry-leading enterprise design systems:
Atlassian Design System: Studied for documentation structure and pragmatic developer guidelines.
Shopify Polaris: Analyzed for token-naming taxonomies and form validation feedback loops.
IBM Carbon: Evaluated for accessible contrast hierarchies and strict layout spacing logic.
Ant Design: Referenced for complex data tables and state management.
Adopting the Atomic Design Hierarchy
To break complex student flows into maintainable primitives, I applied Brad Frost’s Atomic Design framework:
Atoms: Color styles, type ramp, 8pt spatial grid, and baseline elevation tokens.
Molecules: Functional compound elements such as accessible buttons, inputs with validation text, tags, and tooltips.
Organisms: Complex navigational headers, profile editing panels, and course progress track cards.
Templates & Pages: Full responsive page scaffolds for course catalogs, identity verification, and checkout screens.
03 Decisions
1. Foundation: The 8-Point Spatial Grid & Typographic Scale
To stop arbitrary spacing guesses between designers and front-end engineers, I established an 8-point grid system with 4-point micro-adjustments.
Spacing values were mapped directly to fixed token increments:
4px,8px,12px,16px,24px, and32px.Combined with strict Figma Auto-Layout constraints (
Fill ContainerandHug Contents), interfaces could scale fluidly from small mobile screens to 1440px desktop viewports without broken margins.
2. The Polymorphic Button Engine & State Architecture
One of the most nuanced components in the entire system was the primary button.
The Challenge: Supporting text-only, icon-left, icon-right, and standalone icon configurations across 5 interaction states (Default, Hover, Pressed, Focused, Disabled) previously required dozens of separate variants.
The Solution: I engineered a polymorphic button using Figma’s component properties (Boolean visibility toggles and Instance Swap properties). Designers could adjust icon position and state with simple panel toggles without breaking auto-layout padding or detaching the component.
3. Dynamic Tooltips & Component Slot Architecture
Modals and tooltips frequently derailed earlier designs because their contents varied drastically depending on whether a student was checking tuition, verifying identity, or confirming course unenrollment.
Instead of building 50+ rigid modal variants, I introduced a slot architecture.
The modal wrapper maintained outer chrome, elevation, dismiss triggers, and scrim backdrops, while the interior was an interchangeable component instance. This allowed any feature team to inject complex multi-step forms directly into standard containers while maintaining system integrity.
4. WCAG Accessibility by Default
Accessibility was integrated directly into component construction rather than treated as a post-launch audit:
Contrast Compliance: Ran contrast matrices across all primary, secondary, and hover tint combinations, guaranteeing a minimum 8.72:1 contrast ratio (surpassing WCAG AAA standards).
Interactive Targets: Mandated a minimum 44px tap target across mobile components to accommodate touch interactions.
Focus Visibility: Standardized high-visibility focus indicator rings on all interactive elements for accessible keyboard navigation.
04 Result
Measurable Impact & Production Rollout
Over the 4-month development cycle, the Study Hall Design System fundamentally transformed how the cross-functional team delivered education products:
-27% Handoff Cycles: Standardized design tokens and Figma Dev Mode integration significantly decreased developer review loops and revision overhead.
900+ Interactive Components: Centralized every production state and interaction pattern under a single, version-controlled library.
Zero Component Detachment: Feature designers transitioned from building standalone primitives to configuring pre-tested system components.
Production Deployments: Seamlessly powered live student flows across course registration, transcript verification, and lesson dashboards.
Screens
Screen 01
1600 × 1000
Screen 02
1600 × 1000
Screen 03
1600 × 1000
Screen 04
1600 × 1000
Next
More case studies.
All case studies →