Universal Design Inspection Tool

Simplified the user experience of an internal tool that audits web accessibility issues in Canvas online courses & provides in-application fixes. Used by over 2,000+ instructors at UCF and institutions nationwide to create equitable online learning experiences for students!

ROLE

Product Designer

TEAM

1 Designer

1 Product Manager

2 Engineers

TIMELINE

June 2025 - August 2025

TOOLS

Figma

Figjam

HTML/CSS

BACKGROUND & CONTEXT

Web Accessibility Is Confusing And Intimidating!

Universal Design Online Inspection Tool (UDOIT) is an award winning internal faculty tool developed by UCF’s Center for Distributed Learning (CDL). The tool helps ensure that online courses meet accessibility standards and provides an equitable learning experience for students.


Its primary goal is to help faculty identify and fix accessibility issues in their Canvas courses in a simple, understandable way, ensuring that online courses meet institutionally required compliance standards. UDOIT scans course content, flagging issues such as missing alt text or poor color contrast, generates a WCAG compliance audit and guides faculty towards actionable fixes they can take within the tool itself.


By streamlining what was once a manual review process, UDOIT provides a scalable, instructor-focused solution.


However, the original interface often made accessibility compliance feel confusing and overwhelming, leaving instructors unsure where to begin.

FINAL DESIGN PREVIEW

The Solution? Creating A Faster & Clearer Path To Compliance

The redesigned interface and features of the UDOIT platform clarifies information and transforms accessibility compliance into an opportunity for equity!

PROJECT OUTCOMES

Our Solution's Positive Impact On Faculty Members

The final design solutions that we shipped were successful in making UDOIT a much more streamlined tool for instructors to use!

Faster Navigation & Clearer Context

Through user interviews and surveys, we felt confident shipping the new UI for the summary and issue pages. Faculty were able to understand the accessibility issue, what needs to be done, and take action to resolve issues with less confusion.

Increased motivation & student first framing

Through the newly integrated features, instructors immediately recognized the urgency and felt more motivated to address issues in their online courses to better support students with disabilities.

Increased Motivation & Student First Framing

Through the newly integrated features, instructors immediately recognized the urgency and felt more motivated to address issues in their online courses to better support students with learning barriers.

40% ↑

Faster Task Time

Faculty resolved the issues that were flagged by the tool 40% faster with the redesigned summary and issue pages, navigating with clearer context.

100%

Increased Confidence

20 out of 20 instructors who took our survey felt more confident using the tool to fix accessibility issues in their online courses after the interface design changes.

Read more about the project process! ↓

01. INTRODUCTION & RESEARCH

Understanding Faculty Needs & Ambiguity

To understand issues with the current user experience, our research process involved 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 current tool UI, and posed critical questions to uncover points of confusion and usability barriers.


Some examples of product confusion and questions asked by the instructors are:

"How do I start fixing an issue with my course content?"

"Which issues should I prioritize first?"

"What does this specific issue mean?"

02. THE PROBLEM

How Can We Make Web Accessibility Approachable & Important For Faculty?

Further interviews, surveys, 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 for them 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.

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.

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.

03. THE DESIGN PROCESS: IDEATION

Brainstorming Possible Design 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.

04. PROJECT LIMITATIONS

Navigating Constraints & Challenges

Cross functional meetings between myself, engineering, and product allowed us to define the constraints and parameters that the final solutions would need to respect. This made sure that all of the design work was feasible and aligned with our goals.

Canvas LMS iFrame Limitations

Because the tool is integrated into the Canvas learning platform, designs had to account for a fixed and constrained viewport with limited control over certain interactions.

Engineering & Timeline Accommodations

The search and filtering components, along with the ability to add new pages were not redesigned to accommodate to engineering requirements and avoiding additional development overhead within the project timeline.

05. 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 and timeline constraints in mind to make sure that we focused on the most impactful updates.

06. DESIGN EVALUATION

Design Iterations & A/B Testing Highlights

Here are a few of the past iterations of high fidelity screens that I used to communicate with my team and also amongst our user testing groups. Throughout these iterations, I made a number of tradeoffs to balance usability, technical feasibility, and timeline constraints.

SUMMARY SCREEN

FINAL ITERATION

ITERATION 1

ITERATION 2

Minimized Cognitive Load

Reduced information overload the most amongst the iterations. The label interactions brought attention to the severity, status, and the type of document being flagged without overwhelming the user.

Adapted to constraints

Collapsible headings adapted better to responsive layouts and the Canvas LMS constraints that we had to keep in mind prior to designing. The singular column view was ideal for different screen sizes.

FINAL ITERATION

ITERATION 1

ITERATION 2

Minimized Cognitive Load

Reduced information overload the most amongst the iterations. The label interactions brought attention to the severity, status, and the type of document being flagged without overwhelming the user.

Adapted to constraints

Collapsible headings adapted better to responsive layouts and the Canvas LMS constraints that we had to keep in mind prior to designing. The singular column view was ideal for different screen sizes.

FINAL ITERATION

ITERATION 1

ITERATION 2

Minimized Cognitive Load

Reduced information overload the most amongst the iterations. The label interactions brought attention to the severity, status, and the type of document being flagged without overwhelming the user.

Adapted to constraints

Collapsible headings adapted better to responsive layouts and the Canvas LMS constraints that we had to keep in mind prior to designing. The singular column view was ideal for different screen sizes.

INDIVIDUAL ISSUE PAGE

FINAL ITERATION

ITERATION 1

** This is an example of one of many different types of flagged issue pages

LEFT SIDE: Issue resolution — instructors can fix the flagged issue within the tool itself.

RIGHT SIDE: Quick view of the flagged page/document/file within the instructor's online course.

Distinct Steps

Less confusion on what to do was communicated from the users. Clear visual feedback and navigation given to reinforce progress as well.

Contextual Preview

Users heavily preferred being given a preview of the learn more information — provided immediate context of the accessibility issue without the user being navigated to a new modal or page. Reduced time spent understanding the problem before the user takes action.

FINAL ITERATION

ITERATION 1

** This is an example of one of many different types of flagged issue pages

LEFT SIDE: Issue resolution — instructors can fix the flagged issue within the tool itself.

RIGHT SIDE: Quick view of the flagged page/document/file within the instructor's online course.

Distinct Steps

Less confusion on what to do was communicated from the users. Clear visual feedback and navigation given to reinforce progress as well.

Contextual Preview

Users heavily preferred being given a preview of the learn more information — provided immediate context of the accessibility issue without the user being navigated to a new modal or page. Reduced time spent understanding the problem before the user takes action.

FINAL ITERATION

ITERATION 1

** This is an example of one of many different types of flagged issue pages

LEFT SIDE: Issue resolution — instructors can fix the flagged issue within the tool itself.

RIGHT SIDE: Quick view of the flagged page/document/file within the instructor's online course.

Distinct Steps

Less confusion on what to do was communicated from the users. Clear visual feedback and navigation given to reinforce progress as well.

Contextual Preview

Users heavily preferred being given a preview of the learn more information — provided immediate context of the accessibility issue without the user being navigated to a new modal or page. Reduced time spent understanding the problem before the user takes action.

IMPACTED STUDENT PILLS

FINAL ITERATION

ITERATION 1

Centers accessibility on students

The affected student indicator highlights which students will be impacted if the instructor does not resolve this flagged issue in their online course in a timely matter.

Reduces ambiguity

Since the goal is to motivate faculty through clarity and urgency, this iteration directly ties the visual cue to the student centered framing. The Added text explains the icon’s function — Users don’t have to guess what icons mean.

FINAL ITERATION

ITERATION 1

Centers accessibility on students

The affected student indicator highlights which students will be impacted if the instructor does not resolve this flagged issue in their online course in a timely matter.

Reduces ambiguity

Since the goal is to motivate faculty through clarity and urgency, this iteration directly ties the visual cue to the student centered framing. The Added text explains the icon’s function — Users don’t have to guess what icons mean.

FINAL ITERATION

ITERATION 1

Centers accessibility on students

The affected student indicator highlights which students will be impacted if the instructor does not resolve this flagged issue in their online course in a timely matter.

Reduces ambiguity

Since the goal is to motivate faculty through clarity and urgency, this iteration directly ties the visual cue to the student centered framing. The Added text explains the icon’s function — Users don’t have to guess what icons mean.

07. FINAL DESIGNS

What We Shipped!

01. Issue summary screen

02. Example of an individual issue page

03. Accessibility information modal after clicking LEARN MORE

40% ↑

Faster Task Completion Time ↑

Faculty resolved flagged issues with their Canvas courses 40% faster with the redesigned summary and issue pages, navigating with clearer context.

100%

Higher Confidence

20 out of 20 instructors who took our survey felt more confident using the tool to fix accessibility barriers in their online courses after the interface design changes.

08. LEARNINGS & REFLECTION

Project Takeaways

This project gave me one of my first opportunities to step into the role of a product designer, and collaborate cross-functionally. I’m grateful for the experience and for being able to deliver improvements that genuinely made instructor's workflows easier!

Team Collaboration & Feedback

Collaborating with my team communicating and getting feedback from our users was invaluable. I could see how each design iteration performed, and this feedback loop made the process insightful and successful!

Opportunities For Broader Impact

Timeline and technical constraints narrowed our scope and guided many of my design decisions. Looking back, I wish we had expanded to more screens and conducted more broad, quantifiable testing to find additional improvements.

Future Improvements

The team plans to enhance UDOIT further by focusing on additional core features and pages, while also refining interface language. For example, shifting from “issues” to “barriers” to better capture the real impact on students.

SCROLL BACK TO TOP ↑

SCROLL BACK TO TOP ↑

SCROLL BACK TO TOP ↑