Project Overview
UX Compass
Role
UX Researcher / UI Designer/ Vibe Coder
Platform
Responsive Web
Tools
Figma, Claude, Lovable, ChatGPT
Timeline
20 Weeks
UX Compass is an AI-powered web app designed to support designers across the full product design lifecycle — from ideation to critique. Built using Lovable and enhanced with tools like Claude, ChatGPT, and Google AI Studio, the goal was to rapidly prototype a system that acts like a design lead in your pocket.
The opportunity hiding in plain sight
Every product designer faces the same invisible bottleneck: the gap between intuition and evidence. We know something's wrong with a flow, but articulating why — with enough specificity to act on — takes time we rarely have.
UX Compass was born from a simple frustration: existing AI tools are great at generating UI, but poor at reasoning about UX. They ship pixels. They don't interrogate decisions.
"I didn't want another component generator. I wanted a thinking partner."
Hypothesis
The hypothesis: what if an AI assistant could apply established UX heuristics, map cognitive load, and surface friction — not as a checklist, but as a genuine collaborative analysis?
68%
of design reviews focus on aesthetics over usability
Infinite
iterations possible in a single session
PROBLEM SPACE
Three compounding failures in UX critique
Traditional design review processes are slow, subjective, and unevenly distributed across teams. The result: UX debt compounds silently until it becomes a product crisis.
01
THE SUBJECTIVITY TRAP
Critique sessions devolve into preference battles. Without shared frameworks, "I don't like this" wins over "this violates Miller's Law." Consensus becomes a coin flip.
02
THE ACCESS GAP
Senior UX expertise is a bottleneck. Junior designers wait days for feedback. Solo founders have no one to pressure-test flows with. Knowledge asymmetry blocks velocity.
03
THE DOCUMENTATION VOID
Even when good critique happens, it evaporates. No artifact survives the meeting. The next sprint starts from memory, not evidence. The same mistakes recur.
DESIGN PROCESS
This project challenged the assumption that design and development are sequential. Instead, I used AI tools to collapse the loop — designing in motion, with real running code as my canvas.
Vibe Coding as a Design Method
Discovery & Scope Definition
Used Claude to synthesize research into a crisp problem framing. Mapped the jobs-to-be-done for 3 distinct user types: solo designers, product managers facilitating reviews, and junior designers seeking mentorship. Identified 6 core use cases through rapid conversation-based research simulation.
Information Architecture & Flow Design
Rather than wireframing in isolation, I described flows to Claude and used its output to immediately pressure-test information hierarchy. Multiple IA variants were explored through conversation before a single screen was designed. The key question per flow: "where does a user's mental model break?"
Rapid Visual Exploration
Moved straight from IA to Lovable with detailed prompt engineering. Each prompt specified interaction state, expected response behavior, and error conditions — not just visual appearance. Generated 4 full visual directions in a single session, comparing component density, information hierarchy, and prompt affordance patterns.
Iterative UX Refinement
Used a multi-model approach: Claude for reasoning about UX decisions, ChatGPT for copy variations, Lovable for instant implementation. Ran 20+ micro-iterations on the core analysis flow in a single afternoon. Each iteration targeted a specific hypothesis — label clarity, progressive disclosure timing, result formatting.
Beta Release & Signal Collection
Deployed via Lovable's native hosting. Shared with a targeted cohort of designers and PMs. Instrumented key flows to observe where users paused, re-read, or abandoned. Used session feedback to prioritize the next round of iterations rather than relying on assumptions.
AI WORKFLOW
Each Tool Earned its Role
The workflow wasn't "use AI everywhere." Each model was assigned based on what it genuinely does best — a specialization layer that kept the output high-quality at every stage.
01
UX Critique & Decision Making (Claude)
Deep reasoning about which design choices serve user cognition vs. which serve aesthetic preference. Challenged my assumptions systematically
02
Copy Exploration & Variations (ChatGPT)
Rapid generation of UX copy variants — labels, empty states, error messages, onboarding microcopy — across different tonal directions.
03
Interface Construction / Iteration (Lovable)
Full-stack web app generation from prompts. Deployed functional, interactive interfaces that users could actually click through and respond.
04
Heuristic Review / QA
(Claude)
Returned to Claude after each Lovable build to evaluate the result against the original UX intent. Closed the loop between design thinking and implementation.
Go from Question to Insight
CORE USER FLOW
Designed around a single critical flow. Every other feature was deprioritized until this worked flawlessly.
KEY DESIGN DECISIONS
What made the cut
Every interface decision is a trade-off. Here are the four choices that most shaped UX Compass —
each one representing a path not taken.
Dropped - STRUCTURED FORM INPUT
Initial direction used a form-based input: dropdown for design type, checkboxes for heuristics, date fields. Felt "professional."
Users spent 4× longer reading the form than thinking about their actual problem. The structure frontloaded cognitive work before value was delivered.
Chosen - FREEFORM PROMPT WITH SMART DEFAULTS
Open text input modeled on how designers actually think in conversation. AI infers analysis type from context.
Reduced time-to-first-analysis by an estimated 60%. Users described the experience as "like talking to a senior designer." Progressive specificity: start broad, refine through dialogue.
Dropped - NUMERIC-ONLY SCORING DASHBOARD
A dashboard-first view with 12 UX metrics, spider charts, and trend lines. Comprehensive. Visually impressive.
Beta testers optimized for high scores, not better UX. Numbers without narrative created measurement without understanding. Gamification of the wrong thing
Chosen - NARRATIVE FIRST INSIGHTS / ARTICLES
The Articles page shifts users from passive reading to active application. It reframes content from “UX knowledge” to “how do I improve my product right now?”
Instead of browsing for inspiration, users use articles as decision-making tools — driving faster, more intentional design outcomes.
OUTCOMES
What the Beta Proved
Captured real user feedback through Google Forms to quickly identify friction points, usability gaps, and opportunities for improvement. This created a continuous feedback loop — turning insights into rapid iterations and ensuring each update directly improved the product experience.
What the Process Validated
REFLECTION
Vibe coding isn't a shortcut — it's a different kind of discipline. The speed of Lovable forces you to have sharper design thinking up front, because the cost of trying an idea drops to near zero. The premium shifts from visual execution to decision quality.
The multi-model workflow created a genuine feedback loop: Claude provided the reasoning rigor that Lovable's speed could have bypassed. Each tool made the other more effective.
What Surprised me
The hardest part wasn't the AI tools — it was knowing when to stop iterating. When iteration is costless, you need stronger taste and judgment to recognize when a design has found its form. AI amplifies decision-making speed; it doesn't replace the designer's eye.
UX Compass as a product also became a mirror for its own design process: the same heuristics I was building into the tool, I was applying to its own interface. Meta, but clarifying.
Try UX Compass
Explore ideas, generate wireframes, and get real-time design feedback — all in one place. Dive into articles and key UX principles, then apply them instantly to your work. UX Compass helps you move from concept to clarity faster, so you can make smarter product decisions with confidence.