Universal Design Inspection Tool
Role
Product Designer
Team
1 Designer
1 Product Manager
2 Engineers
Timeline
June 2025 - August 2025
Tools
Figma
Figjam
HTML/CSS
BACKGROUND & CONTEXT
Simplifying Web Accessibility
Universal Design Inspection tool (UDOIT) is a project that I contributed to during my time as a product designer for UCF's Center for Distributed Learning (CDL)! It's used by more than 1,000 users at UCF and by other institutions nationwide.
This is an internal tool that allows faculty to identify and fix web accessibility issues within their online courses on Canvas. It scans course content and evaluates course elements for heading structure hierarchy, alt text for images, color contrast ratios and more, providing a comprehensive WCAG compliance audit.
CDL and Student Accessibility Services partner to ensure online courses meet institutionally required accessibility compliance standards for students. UDOIT streamlines this once manual review process into a scalable and instructor focused solution.
This case study chronicles my design thinking process in streamlining the user experience of UDOIT and solving product ambiguities. In my quest to turn an intimidating tool into an approachable and intuitive experience, I dived into four different areas during this project: prototyping, UX research, visual design, and interaction design.
THE PROBLEM
How Can We Make Web Accessibility Approachable For Faculty?
UDOIT's primary goal is to help faculty fix accessibility issues within their online courses in a way that's simple and understandable. However, it's original interface often had the opposite effect. For many faculty members, accessibility compliance often felt like a daunting, and confusing chore. The tool was difficult to navigate and instructors didn't know where to begin with fixing their course content.
The tool's main flow allows users to view a full list of accessibility issues that were scanned, select an issue, and access more details to fix it. The summary page groups flagged documents and pages from an instructor’s course by issue type.
Here's an example of what the original screens looked like:
01. ISSUE SUMMARY PAGE
02. RESOLVING AN ISSUE
RESEARCH & DISCOVERY
Understanding Faculty Needs & Ambiguity
Our research process centered on understanding faculty perspectives through structured interviews and collaborative feedback sessions. Myself and the others on the team engaged directly with educators across different technical comfort levels and understandings of accessibility compliance.
During our user consultation sessions, we observed how faculty navigated and interacted with the tool, and posed critical questions to uncover points of confusion and usability barriers.
Some examples of product confusion and questions asked by the instructors are:
PAIN POINTS & USABILITY BARRIERS
Critical Insights From Faculty Feedback
Our interviews and feedback sessions revealed several important insights that guided the design approach. These are some of our defined usability barriers:
Accessibility Literacy Gap
Many of the educators had a limited understanding of WCAG standards and general accessibility principles. Contextual education alongside issue identification was needed to make informed decisions.
Interface Navigation Confusion
Faculty experienced disorientation with navigation patterns. Many would lose their place within the interface and struggle to return to previous screens or understand their current location within the workflow.
Ambiguity With Actionable Steps
Faculty expressed strong preference for more clarity on the steps required to remediate issues. The original summary page felt daunting and unapproachable.
IDEATION
Exploring Possible Solutions
Using faculty feedback, my team and I worked together to brainstorm key features and UI improvements for the issue summary page and the specific issue pages, addressing the identified usability barriers. From here, we also narrowed down some ideas and features that we could implement within the timeframe of when our new project updates needed to be deployed.
OUR FIGJAM BRAINSTORMING SESSION!
DESIGN EVALUATION
Initial Design Iterations
My design exploration phase started with some pen and paper! From there, I created low/mid fidelity mockups and prototypes that I presented to the engineering team, as well as a few user testing groups for feedback and understanding on how to move forward. I iterated on these designs based off of critique and modifications that my teammates and user groups wanted to see and felt were necessary.
Here are some key artifacts from my design process that I used as valuable communication tools with developers and test groups throughout our many feedback sessions before our final design solutions:
PROJECT LIMITATIONS
Navigating Constraints & Challenges
Canvas LMS iFrame Limitations
Because the tool is embedded in Canvas LMS via an iFrame, our designs had to account for a fixed and constrained viewport with limited control over certain interactions. I approached each design decision with a focus on preserving visual hierarchy, maintaining adequate spacing, and making sure that the interface felt open and approachable within the confined frame.
Engineering & Timeline Accomodations
The search and filtering components, along with the ability to add new pages were locked to accommodate to engineering requirements and avoiding additional development overhead within the project timeline. We set aside certain brainstorming concepts and focused on refining higher impact design decisions that could still deliver meaningful improvements!
DEFINING CORE FEATURES
Narrowing Our Scope
After another critique and testing session with faculty, our team prioritized the key changes and features to implement for each final screen, while deciding which ideas to set aside. These decisions were also made with project constraints in mind to make sure that we focused on the most impactful updates.
GOING BACK TO THE DRAWING BOARD
INTERACTION & VISUAL DESIGN FEATURES
Interaction & Visual Design Features
FINAL DESIGN SOLUTIONS
What We Shipped!
RESULTS & OUTCOMES
Impact On Faculty Members
After more user interviews and surveys, we felt confident shipping the new layout and interactions for the summary page. Faculty found it quicker and easier to understand and navigate the tool. The hover-to-reveal icons added helpful context about the type of issue and the course material that needed attention.
The updated issue page gave instructors clearer context without having to seek out external resources. Faculty were able to understand the accessibility issue, understand what needs to be done, and take action faster and with less confusion
We also received great feedback on the new Affected Users banner, which clearly shows what kinds of students will be impacted if an accessibility barrier isn’t resolved by the instructor. This shifted accessibility barriers away from a technical checklist to a people-first priority. Faculty immediately recognized the urgency and felt more motivated to address the barriers within their online courses.
LEARNINGS & REFLECTION
Project Takeaways
This project was one of my first opportunities to step into the role of a product designer and present my work directly to stakeholders (I learned a ton!). Working closely with engineering and participating in design jams and critiques taught me how to work within technical constraints, make trade-offs, and still deliver digital experiences that felt thoughtful and user friendly. Collaborating in a team based setting and getting direct feedback from our users was really insightful, and hearing how the design changes directly improved their workflow made the design process incredibly rewarding!
Looking back, I would have liked to push beyond the scope we were given by tackling more screens within the tool and running additional rounds of testing and feedback. While our timeline and technical constraints shaped our focus and design decisions, further exploration could reveal even more impactful improvements that we could have shipped.
We plan to keep improving the overall UDOIT user experience by focusing on other core features and pages within the tool. As part of this effort, we’ll also update language throughout the interface. For example, shifting from “issues” to “barriers” to better reflect the real impact on students!