AI UX Testing Automation Platform Project Report
1. The Concept
AI UX Testing Automation Platform is a web-based SaaS prototype that simulates and audits user behavior across websites to detect usability, accessibility, performance, navigation, trust, and conversion problems before launch. I chose this concept for a one-day sprint because it is more ambitious than a simple dashboard: it tests whether modern AI tools can help design and build a realistic product workflow that connects projects, test runs, issue evidence, reports, session replays, settings, and real browser audit results. The goal was to make the platform feel like a premium QA product instead of a static mockup. Users can create projects, run AI UX tests, review issues, open detailed reports, inspect replay evidence, filter tables, export data, and save work in localStorage. Later upgrades added real audit support through a local Node server with Playwright rendering, screenshots, axe-core accessibility checks, and audit logs.
2. The Stack
The Stack: HTML5, Vanilla CSS, Vanilla JavaScript, localStorage, Canvas charts, and an optional Node.js audit server. The AI Assist: ChatGPT helped shape the original product concept, feature priorities, UX direction, and upgrade roadmap. OpenAI Codex handled the coding phase, including the dashboard interface, navigation system, responsive layout, project/test/issue workflows, modals, replay UI, real audit server, Playwright and axe-core integration, asset organization, README updates, and repeated responsive QA passes.
3. The 1 Day Sprint
Morning (Hours 1-3): We started by defining the product as an AI UX testing automation platform for websites and apps. The first focus was the core SaaS structure: Overview, Projects, Tests, Reports, Session Replays, Issues, AI Insights, Accessibility, Performance, SEO, Integrations, and Settings. We built the initial dashboard around UX scores, AI persona journeys, top detected issues, issue severity charts, trend charts, and a latest replay preview. Afternoon (Hours 4-6): The build expanded from a static dashboard into a working prototype. Codex implemented project creation and editing, test creation, simulated progress stages, issue filtering, issue details, AI confidence explanations, test run reports, localStorage persistence, responsive tables, mobile layouts, sidebar grouping, topbar polish, and richer project/test/report pages. A major upgrade added real audit mode using a local Node server, live HTML fetches, Playwright browser rendering, real screenshots, axe-core accessibility checks, guarded journey evidence, audit engine status, and audit logs.
The Finish Line (Hours 7-8): The final phase focused heavily on polish and QA. We improved the Home dashboard, Projects page, Settings page, Session Replay player, mobile carousel behavior, popup/modal responsiveness, and file organization. We moved JavaScript into js/app.js and CSS into style/styles.css, verified the new paths, tested popups across desktop and mobile sizes, and confirmed syntax with npm run check --if-present. The result became a much more complete prototype with a clear workflow from simulation or real audit to report, issue evidence, replay, and export.
4. The Roadblocks
Roadblocks: The biggest challenge was balancing feature depth with production-quality UI polish. The platform grew quickly, and several screens initially became too dense, especially on mobile. Tables, issue lists, project cards, accessibility findings, and replay panels needed multiple passes to prevent cramped text, awkward card heights, and horizontal overflow. Another roadblock was the difference between simulated and real results. The first version generated realistic mock test data, but the user needed clarity on whether results were real or fake. That required adding real audit capability, fallback labeling, engine status indicators, and report explanations showing which checks were measured and which were estimated. Responsive behavior was also a major challenge. The sidebar, topbar, dashboard cards, mobile carousels, and all popups had to be tested at phone, tablet, desktop, and wide desktop sizes. Some elements looked good on desktop but became too tall or hidden on mobile, so we added mobile carousels for repeated evidence cards and a mobile Command Center for hidden actions like Share and Export.
5. Key Takeaways
What worked best? The product workflow came together strongly. Once the core concept was clear, Codex could rapidly implement connected screens, state management, localStorage persistence, modals, filters, charts, responsive layouts, and the real audit server. The iterative QA process also worked well: each screenshot or issue exposed a specific weak area, and the interface improved through focused polish passes. What worked worst? The hardest parts were premium visual balance and mobile density. AI-generated UI often works functionally before it feels professional. Font sizes, spacing, cards, tables, modals, icons, sticky navigation, and responsive behavior all required repeated manual direction and testing. Real browser auditing was also more complex than simulated testing because it depends on Node, Playwright, Chromium, network access, and server deployment setup.
My final thought: If I had one more day, I would focus on production hardening. The next priorities would be deploying the audit server with PM2, adding authentication, storing audits in a database instead of localStorage, creating real cropped issue screenshots, expanding safe journey automation, improving report exports, and adding CI/CD release gate integration. The sprint proved that AI can accelerate a sophisticated SaaS prototype dramatically, but turning it into a reliable production platform still requires careful engineering, responsive QA, and clear separation between real measured evidence and AI-estimated insights.