Torus was undergoing a critical audit to meet WCAG 2.1 AA standards—a non-negotiable requirement for OLI’s mission to serve all learners. While the team was revamping the interface, they lacked a standardized foundation. Without a shared library, every accessibility fix was a manual, one-off effort that led to inconsistent results and mounting technical debt.
I had a strict 2-month window to architect this entire system before my internship ended. My goal was to move beyond temporary patches and establish "Compliance by Default." Success meant creating structural readiness: 100% documentation coverage and a shared language to resolve existing keyboard navigation barriers and semantic confusion.
I investigated why accessibility was failing at scale by auditing our production UI against the Figma library, focusing on the student experience while ensuring consistency for instructors and authors.
Key Insights:
I used Atomic Design to prioritize the fundamental building blocks that make complex forms and dashboards possible.
I established a strict rule-set to fix the confusion between buttons (actions) and links (navigation). By standardizing these roles, I ensured that every interaction—like using a "Pill" for secondary actions—provides a consistent experience for both visual and screen-reader users.
I built the logic for Pagination and Breadcrumbs from scratch. I specifically designed how the system handles long content paths (overflow/ellipsis), ensuring students navigating via keyboard never lose their place in the course.
I moved beyond visual specs to document the technical "how-to" for every component. This included defining keyboard focus patterns and ARIA roles—the exact details missing from the legacy system—to eliminate developer guesswork and meet WCAG 2.1 AA standards.
The final solution transformed Torus from a fragmented UI into a cohesive ecosystem where every building block is inclusive by default.
I integrated Usage Instructions and Logic Rules directly into Figma’s component configuration panels. This ensured technical guidance was always available in-context during implementation, eliminating the need for constant handoff meetings.
I used the Stark plugin to verify color contrast for every element. I also introduced new "Danger-Red" tokens to the system, ensuring that failure states remained WCAG-compliant across both dark and light modes.
I established a governance framework by standardizing the documentation structure itself. By defining exactly how visual specs, interaction logic, and accessibility rules are recorded, I provided future designers with a repeatable "playbook" to continue the Torus rebuild using consistent standards.
By the end of my 2-month window, the project successfully pivoted the team’s mindset—treating accessibility as a fundamental technical requirement rather than a last-minute patch. We achieved 100% documentation coverage for 11 core components, effectively bridging the "fragmentation gap."
This project was a deep dive into the massive technical and communicative effort required to build a functional design system. I realized that the real challenge isn't just building components—it’s designing a tool that other people can actually follow without a meeting.
I spent significant energy ensuring my guidelines were clear and "meta-usable" so the system could stand on its own. Looking back, I’d love to take this a step further by conducting usability testing on the system itself, observing how other builders use my documentation to construct new layouts—the ultimate test of a sustainable, human-centered foundation.
