Back to selected work

UXLENS • AI

Creating an AI audit tool.

ROLE
Creator

METHOD
Claude, Figma, Github

OUTCOME
Working site

TL;DR

I wired Figma to Claude with MCP to create a UX audit too. This tool scans webpages in 40 seconds or less, providing both designers and developers with tailored, actionable WCAG compliance reports across 6 defined UX dimensions.

Github

Site

Tech4Good

Context & Problem

Creating a single manual WCAG audit took almost two weeks. This had me raking through multiple resources surrounding Section 508 and WCAG, and taking notes by hand. This arduous process took two weeks; time that could have been used for testing, iterating, and launching.

UX and accessibility audits can be resource-heavy and time-consuming, resulting in teams putting the process on hold and losing potential users.

What I wanted was to build something that would make audits more efficient.

Begin audit

Begin testing

Start research

(WCAG, Section 508)

Organize research

Split into design

& development

Debrief findings

with the team

Finalise in-house

guidelines

Apply findings

= 2 weeks

Without UXLens

Run UXlens

Begin testing

Apply findings

= 40 seconds

With UXLens

Decisions

Process

It took me 4 steps to create UXLens, starting from ideation, design, and code, to a working tool that real people could use.

Framing the rubric

I defined 6 audit dimensions so the output was structured and defensible, not just a vague AI result.

Design in Figma

I built the component system with tokens, components, and auto-layout before even getting to a line of code.

Figma -> Code

I used a Figma MCP connection to translate my components into the build, while keeping design and code in sync.

Test with real users

I put the tool in front of 3 testers from different professional fields for feedback; none of them designers.

Designer tab

6+ years

B2B experience

B2C experience

Design systems

Heuristic, visual, prioritised

What to change in the design, why it fails, and why it matters to the user.

Developer tab

6+ years

B2B experience

B2C experience

Design systems

Specific, technical, actionable

Output surfaces all findings for code-level fixes. ARIA labels, roles, and more.

Framing the rubric

I defined 6 audit dimensions so the output was structured and defensible, not just a vague AI result.

Design in Figma

I built the component system with tokens, components, and auto-layout before even getting to a line of code.

Figma -> Code

I used a Figma MCP connection to translate my components into the build, while keeping design and code in sync.

Test with real users

I put the tool in front of 3 testers from different professional fields for feedback; none of them designers.

Designer tab

6+ years

B2B experience

B2C experience

Design systems

Heuristic, visual, prioritised

What to change in the design, why it fails, and why it matters to the user.

Developer tab

6+ years

B2B experience

B2C experience

Design systems

Specific, technical, actionable

Code-level fixes: ARIA labels, roles, exact CSS, WCAG references.

The Criteria

Once I'd audited, calculated, and created the elevation system, I need to create a visual that communicated what levels to use on which component.

By following my guide, uniform usage across ITHAKA was guaranteed to be implemented.

Collapse all criteria

Clarity

Is the purpose of each screen immediately legible?

First-glance comprehension. If a new visitor cannot name what a screen is for within five seconds, nothing below it matters.

Visual Hierarchy

Does the eye land where it should, in the right order?

Scored on type-scale separation, spacing groups, and whether the primary action is the loudest thing on screen.

Trust Signals

Are credibility and security cues present where they matter?

Ownership, proof and reassurance at the moment of commitment — not buried on an about page.

Transparency

Does the interface tell users what is happening, and why?

Disclosure of AI-assisted output, explanation during waits, and honesty about what happens after a click.

Accessibility

WCAG checks on contrast, focus order and semantics.

The technical layer, and the only dimension with objective pass/fail criteria — which is why its callouts are the most specific.

Feedback Loops

Does the system confirm, guide and recover gracefully?

Loading, empty, error and success states. A product can pass every other category and still feel broken if it goes silent.

Collapse all criteria

Clarity

Is the purpose of each screen immediately legible?

First-glance comprehension. If a new visitor cannot name what a screen is for within five seconds, nothing below it matters.

Visual Hierarchy

Does the eye land where it should, in the right order?

Scored on type-scale separation, spacing groups, and whether the primary action is the loudest thing on screen.

Trust Signals

Are credibility and security cues present where they matter?

Ownership, proof and reassurance at the moment of commitment — not buried on an about page.

Transparency

Does the interface tell users what is happening, and why?

Disclosure of AI-assisted output, explanation during waits, and honesty about what happens after a click.

Accessibility

WCAG checks on contrast, focus order and semantics.

The technical layer, and the only dimension with objective pass/fail criteria — which is why its callouts are the most specific.

Feedback Loops

Does the system confirm, guide and recover gracefully?

Loading, empty, error and success states. A product can pass every other category and still feel broken if it goes silent.

Collapse all criteria

Clarity

Is the purpose of each screen immediately legible?

First-glance comprehension. If a new visitor cannot name what a screen is for within five seconds, nothing below it matters.

Visual Hierarchy

Does the eye land where it should, in the right order?

Scored on type-scale separation, spacing groups, and whether the primary action is the loudest thing on screen.

Trust Signals

Are credibility and security cues present where they matter?

Ownership, proof and reassurance at the moment of commitment — not buried on an about page.

Transparency

Does the interface tell users what is happening, and why?

Disclosure of AI-assisted output, explanation during waits, and honesty about what happens after a click.

Accessibility

WCAG checks on contrast, focus order and semantics.

The technical layer, and the only dimension with objective pass/fail criteria — which is why its callouts are the most specific.

Feedback Loops

Does the system confirm, guide and recover gracefully?

Loading, empty, error and success states. A product can pass every other category and still feel broken if it goes silent.

CREATING

Designs

From the home screen to a scored, fixable audit in both the designer and developer views.

The entry point

Users can paste a live URL or drop in a screenshot in order to audit what has already been shipped. This cuts the tedious documentation and research that usually comes first.

The entry point

Users can paste a live URL or drop in a screenshot in order to audit what has already been shipped. This cuts the very tedious documentation and research that usually comes first.

The loading logic

A spinning wheel with no feedback for 20 seconds reads as broken, even when it isn't — and each backend step actually varies in speed, so users had no way to gauge progress. Surfacing the real steps as they happen (reading the interface, scoring dimensions, writing callouts) turns an unpredictable wait into visible progress, without faking anything

The overall info

An overall score and plain-language verdict up top, then six UX dimensions scored individually so users know exactly where they stand — not just that something's "off." Reports download so findings don't die in a browser tab; they land in whatever channel the team already works in.

Task tracking

Each dimension's expanded card comes with ready-to-act tasks, not just a critique — checkbox included. Checking one off moves it straight to Resolved, so the audit doubles as a running to-do list instead of a static report you'd have to transcribe elsewhere.

Design vs. Dev notes

The same issue means different things to different people. Design notes translate it into visual and interaction changes; Dev notes hand engineers the exact implementation — ARIA attributes, WCAG references — ready to act on without a translation step in between.

RESULTS

Impact

2 weeks to 40 seconds

Audit time collapsed. The same rigour, delivered in the time it takes to make coffee.

6 dimensions

A structured rubric that maps 1:1 with development. It flags the issue and explains it, so teams learn the pattern.

2 reports

Designer and developer each get their own, from one run.

Entered into an AI for Good competition with a tiered model — free for nonprofits, paid for agencies.

User feedback

Though a passion project, I wanted to speak to different types of users. Is it straightforward enough for those outside of tech to understand? How is the tool valuable to different audiences? The tool is based on personal observations, personal pain points, and assumptions, so I wanted to investigate how other professionals would interact with it.

ROBERTO · specialist at a major telecommunications company

"I think this tool would have helped us a lot. One thing I'd find valuable would be a way to see if some things are on some page and not other pages. For the tool to pick it out."

JUDY · healthcare platform user

I always felt navigating [this] medical platform very frustrating. I can use this tool to find out what the issues are and share this with the medical practice.

MARY · founder of a wellness company

At my wellness retreat, we audited our User Experience and User Interface with Jo's AI program and got a score that outlined areas of improvement. We are initially focusing on the pricing model not being clear and working our way down the list. A truly remarkable tool.

What's next?

Two next steps came out of the user conversations.

Customisable audits

Heuristics were important, but they weren't end-all-be-all

As a specialist in Outreach and not a designer, Roberto made the point that though the tool was helpful, he’d be interested in being able to customize the audit. As someone not on the tech or design side, he found that value for him would arise in making sure that every page across the site had a consistent feature, for example, a working chatbot. He was more interested in consistency than any heuristic.

Whole-site scans

What were my trade-offs?

Through observation, I noticed the pain of pasting one page URL at a time. The tool can surface issues in 40 seconds…until you have 30 pages. This was my biggest trade-off: 2 week discovery/research or pasting a page one-by-one? In the end, something automated felt worth it because it could be run in the background while other tasks get done. Exploring more than 1-page is worth testing next.