Labeling
Redesigning Materia's Image Labeling Widget for Accessibility & Modern UX
Context
The Problem
ACCESSIBILITY BARRIERS
No keyboard navigation support, insufficient color contrast ratios, and missing ARIA labels made the widget unusable for students with disabilities, violating WCAG 2.1 standards.
UNRESPONSIVE LAYOUTS
Fixed desktop-only layouts broke on mobile and tablet devices, excluding students who primarily access course materials on smaller screens.
OUTDATED AESTHETIC
Visual design felt dated and inconsistent with modern web standards, reducing trust and engagement with the learning tool.
HARMFUL COLOR WHEEL FEATURE
An unrestricted color picker for image backgrounds allowed educators to create low-contrast scenarios and visually fatiguing combinations that hurt readability and accessibility.
CONFUSING DUAL INTERFACES
Separate Player and Creator modals had inconsistent design patterns, forcing users to relearn interaction paradigms between creation and practice modes.
Design Process
WCAG 2.1 AA Compliance
Implemented full keyboard navigation, proper focus states, semantic HTML, and ARIA labels. All color combinations now meet minimum 4.5:1 contrast ratios.
Mobile-First Responsive Design
Rebuilt layouts using flexible grid systems and breakpoints to ensure seamless experiences across all device sizes from mobile to desktop.
Retired Color Wheel Feature
Removed the background color picker and replaced it with a curated set of accessible, high-contrast background options that maintain visual hierarchy and readability.
Why this mattered:
This decision prioritized user safety over customization freedom, preventing educators from unintentionally creating inaccessible content.
Unified Design Language
Created consistent component patterns, spacing systems, and interaction models shared between Player and Creator modals, reducing cognitive load.
Modal Redesigns
Both the Player (student-facing) and Creator (educator-facing) modals received complete visual and functional overhauls while maintaining feature parity.
Creator Modal
Educator interface for building labeling exercises with improved organization and streamlined workflows.
Player Modal
Student interface for practicing image labeling with clearer visual feedback and accessible controls.
Interactive Prototype
Explore the full Labeling redesign in Figma, including both Player and Creator modals with complete interaction flows.
Click and drag to explore the interactive prototype
Outcomes & Impact
Impact & Takeaways
The Labeling widget redesign was deployed to 50,000+ students across UCF courses, setting a new standard for accessibility in Materia's widget library.
Key takeaways:
Feature Retirement as Design Decision
Sometimes the best design choice is removing a feature. The color wheel offered unlimited customization but created accessibility risks that outweighed its value.
Consistency Reduces Cognitive Load
Unifying the Player and Creator design languages made both interfaces feel more intuitive, even though they serve different user needs.
Accessibility Benefits Everyone
Features built for accessibility (keyboard navigation, clear focus states, high contrast) improved the experience for all users, not just those with disabilities.
More Visuals
