My Role:
UX/UI Designer + Developer
Summary:
UX audits are a core part of evaluating enterprise products, but there’s no good lightweight tool for it. Most teams either use sprawling spreadsheets, generic checklists, or expensive platforms. I wanted a clean, focused tool I could use on real projects, one that combines heuristic evaluation, accessibility checks, and prioritized findings in a single form that exports a professional report.
the challenges
- No existing tool fit the need: Spreadsheets are clunky, dedicated audit platforms are expensive, generic checklists don’t capture severity or prioritization.
- Balancing structure with flexibility: Had to work for different types of applications (marketing sites, enterprise apps, mobile) without being so rigid it slowed the auditor down.
the process
This project was built entirely with AI-assisted development using Cursor and Claude. Rather than writing code line by line, I drove the design through a series of prompts, reviewing and refining the output at each step.
prompt progression:
- Started with the core structure: “Build an interactive UX audit template with Nielsen’s 10 heuristics and WCAG Level A/AA checklist. Each item should have pass/fail/N/A with conditional severity and priority fields.”
- Added issue tracking: “Add a current state issues section at the top of each page where I can log observed problems with severity and priority ratings.”
- Iterated on the findings workflow: “Merge the recommendations section into the issues — each issue should have its own recommended fix field instead of a separate section.”
- Refined the evaluation UX: “Move the recommended fix textarea below the notes and evidence fields in both heuristic and WCAG sections.”
- Added evidence capture: “Add inline image attachment support so I can document issues with screenshots.”
- Built the report output: “Add an auto-generated priority summary that ranks all findings by P1/P2/P3, plus save/load JSON and PDF export.”
- Connected the header: “Make the H1 default to ‘UX Audit’ and automatically append the application name when the user fills in the Application Name field below.”
Each prompt built on the last. I reviewed the output after every step, tested interactions, and adjusted direction based on what I saw — the same iterative design process I’d use in any project, just faster.
key decisions
- Severity AND priority on every finding. Severity = how bad is it. Priority = when to fix it. A critical accessibility issue might be P2 if there’s a workaround, while a medium visual bug on the homepage might be P1 because every user sees it. Having both gives teams better information for sprint planning.
- Conditional fields that only appear on fail. Pass and N/A items don’t need notes, evidence, or fix recommendations. Hiding those fields keeps the form clean and focused, you only document what’s broken.
- Recommended fix inline with each issue, not in a separate section. Originally had a standalone recommendations section, but that meant scrolling back and forth to match issues to fixes. Keeping them together is how you’d actually think about it during an audit.
- Single-file, no dependencies. Vanilla HTML/CSS/JS. No React, no build step, no npm install. Opens in any browser, works offline, easy to fork. The tool should be as lightweight as the audit process it supports.
- JSON save/load for work-in-progress. Enterprise audits take days, not hours. Being able to save your progress and pick it back up, or share the raw data with a teammate, was essential.
the results
- Concept to deployed: in ~90 minutes
- Zero dependencies: runs in any browser
- Deployed via: GitHub Pages