Making web accessibility less complex for professors
ROLE
Product Designer
TEAM
1 Designer
2 Engineers
TIMELINE
June 2025 - August 2025
TOOLS
Figma
Cursor
HTML/CSS, JS
UDOIT helps professors make their online course content accessible and compliant
As education becomes increasingly digitized, web accessibility is essential in making sure every student can participate.
Universal Design Online Inspection Tool (UDOIT) is an open source self service tool used by professors to find and fix accessibility barriers across their online course content, helping to foster equitable learning experiences at scale.
Web accessibility is confusing and intimidating!
Original interaction points and task flows within the tool lacked a clear path forward and the context professors needed to take action. This contributed to high user drop-off and low task completion rates with the tool.
As a result, accessibility barriers could remain unresolved for students who depended on accessible course content.
The solution? Bringing clarity and guidance to the tool's entry points & core workflow
Our solution's positive impact on faculty members
40%
Faster task completion time
Average time it took to remediate issues for professors decreased from 10min -> 6min.
>80%
Positive feedback
Participants responded positively to new interface and component changes after they were implemented.
VIEW THE PROJECT PROCESS
Examining the tool's current framework & interface
1. UDOIT automatically scans content and flags accessibility barriers for professors to review.
Professors must inspect the affected content and remediate each barrier individually
Understanding faculty needs & ambiguity
To uncover specific moments of friction in the existing experience, I conducted structured interviews and collaborative feedback sessions with professors across varying levels of technical comfort and accessibility knowledge.
I observed navigation of the existing tool to understand where professors hesitated, what they misunderstood, and what prevented them from moving forward. These sessions surfaced recurring usability barriers and questions, including:
"How do I start fixing an issue with my course content?"
"Which issues should I prioritize first?"
"What does this specific issue mean?"
Key findings from user research:
Ambiguity with actionable steps
Professors struggled to maintain a sense of where they were & next steps as they moved through the tool.
Accessibility literacy gap
Many educators had a limited understanding of WCAG principles which made it difficult to understand the tool.
Original interface patterns blurred the line between discovery, education, & remediation
Too much information with too little context made accessibility issues difficult to navigate. Unclear issue types, dense lists, and competing remediation actions made it harder for faculty to understand and prioritize barriers.
Revisiting the tool’s flow to improve wayfinding & understanding
I realized that showing everything at once was making remediation feel more complex than it needed to be.
I focused on breaking the experience into smaller, manageable steps using progressive disclosure and familiar drill-down patterns that let professors move deeper into information as it becomes relevant.
Redesigning the entry points for approachability
Separating discovery from remediation gave me an opportunity to rethink how professors first encounter their scan results.
Courses can contain a large number of accessibility issues, so the interface needed to reduce information overload and still scale with course size.
Instead of placing every issue inside a narrow, continuously scrolling panel, I moved the results into a single-column layout with clearer information hierarchy and also explored ways to display flagged document types beyond static icon labels.
I used collapsible groups to progressively reveal individual issues.
Using Figma & code, I prototyped new interaction design of labeled issue-type chips as a means of a filtering pattern. This would pair icons with clear text labels so professors could understand issue categories without relying on unfamiliar visual cues.
Bringing guidance & education into the remediation flow
The original remediation panel hid accessibility guidance behind an additional button, lacked clear steps, and made navigating between issues difficult.
I proposed surfacing guidance upfront, organizing actions into sequential steps, and adding previous/next navigation between issues.
Faculty testing showed that upfront guidance provided stronger context and reduced unnecessary interactions.
What we shipped
Entry point — Issue summary screen
Example of an issue remediation page
What I learned
This project gave me one of my first opportunities to step into the role of a product designer and collaborate cross-functionally on a user facing project. I’m grateful for the experience and for being able to deliver improvements that made this tool easier to use :D
Team collaboration & feedback
Collaborating with my team members and getting feedback from our users was an invaluable part of the design process. I could see how each design iteration performed, and understand technical constraints as well. This feedback loop made the process insightful and successful!
Future improvements & opportunities for broader impact
Since timeline and technical constraints shaped a lot of the design process, expanding the scope to additional screens and conducting broader, more quantitative testing could reveal further areas for improvement. Looking ahead, the team plans to continue enhancing UDOIT by refining key features and updating the broader design system.
Thanks for visiting :-)
Feel free to reach out for any inquiries
FL,