Back to selected work

UXLENS • AI

Creating an AI audit tool.

ROLE
Creator

METHOD
Claude, Figma, Github

OUTCOME
Working site

Summary

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 accessibility compliance reports across 6 defined UX dimensions.

Github

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.

Without UXLens

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

With UXLens

Run UXLens

Apply findings

Begin testing

= 40 seconds

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

Heuristic, visual, prioritised

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

Developer tab

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

Heuristic, visual, prioritised

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

Developer tab

Specific, technical, actionable

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

The Criteria

I wanted each dimension of the audit to have a clearly defined criteria, making each audit consistent and trustworthy.

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 should be given the moment a user uses a site.

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…It's 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 should be given the moment a user uses a site.

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…It's 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.

Entry point

Walkthrough length · 0:10

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.

WHY IT’S BUILT THIS WAY

A spinning wheel with no feedback for 20 seconds can sometimes read as a broken experience or a session token expiring even when it hasn't. With UXLens, each backend step actually varies in speed, so users have no way to gauge progress. By surfacing the steps, I could give users visible progress without leaving them in the dark.

Overall info

LANDING PAGE

This is a screenshot of the final landing page, an overall score and plain-language verdict up top with six UX dimensions scored individually so users know exactly where they stand. By parsing each category, users can glean what notes (design or development) need the most attention. Reports also download so findings don't die in a browser tab! They can be dropped into whatever channels or docs the team already works in.

Task tracking

Walkthrough length · 0:13

MARK AS DONE

Each dimension comes with ready-to-act tasks when the card gets expanded. I wanted to show that not only was something "off", but that there was an in-depth critique of the issue. By checking the checkbox, the issue moves from Active straight to Resolved. So, the audit also doubles as a running to-do list instead of a static report you'd have to transcribe elsewhere.

Design vs Developer reports

Walkthrough length · 0:15

DIFFERENT NOTES UNDER THE SAME CATEGORY

The same issue means different things to different people. Design notes translate it into visual and interaction changes, while Development notes hand engineers the exact implementation. Things like ARIA attributes are ready for engineers to act on, while designers focus on visual loading states.

RESULTS

Impact

To get the "2 weeks" data point, I ended up using historical evidence from past workplaces to average the time spent auditing. This was an amalgamation of different companies, but the same general usability checks.

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.

Accepted into the AI for Good competition.

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.