Designing and building a fully functional, code-first prototype to reshape collaboration between design, engineering, and AI in enterprise product development.
Sonatype Guide was a high-visibility, executive-sponsored initiative with a fixed six-month release timeline. The product introduced a new security intelligence platform for developers and required tight alignment across design, engineering, product, and marketing from day one.
Instead of relying on static mockups, the UX Lab was developed as a fully functional, production-aligned prototype built directly in code. It served as a live environment for modeling workflows, validating interaction patterns, and stress-testing edge cases using realistic data structures. AI-assisted tooling accelerated iteration and supported rapid exploration within real technical constraints.
Engineering teams reviewed and interacted with actual workflows rather than interpreting documentation. Sequencing decisions reflected real user journeys. Cross-functional discussions were grounded in inspectable behavior, reducing ambiguity and minimizing traditional design-to-development friction.
The UX Lab demonstrated that design artifacts can function as shared infrastructure within enterprise product development. By aligning exploration with implementation realities early, the team established a more integrated, system-aware approach to shipping complex software.
Sonatype Guide needed to progress quickly. The product was executive-sponsored, time-bound, and architecturally complex. Decisions around search behavior, policy visibility, trust scoring, monetization, and cross-surface workflows had to be aligned early. Traditional design artifacts would not be sufficient for this level of coordination.
Static screens require interpretation. Clickable prototypes simulate flows but don't reflect real data behavior, state logic, or implementation constraints. Engineering questions surface late. Edge cases appear during development rather than design.
The team needed a shared environment that could:
The UX Lab emerged as a response to this need: a production-aligned, inspectable prototype built directly in code, capable of modeling both user experience and system behavior in parallel.
Instead of beginning in static design files, the experience was developed directly in code so that workflows could be evaluated within their eventual structural context. Routing, state transitions, and relational movement were modeled as they would behave in production rather than approximated through simulated interactions.
Working in this medium reduced the translation gap between intent and implementation, allowing design decisions and technical constraints to inform one another in real time.
The UX Lab was structured as a usable environment with consistent data models and fully navigable records, rather than a stitched sequence of screens. Search behavior, tab logic, and cross-record relationships could be exercised end to end, revealing friction that would not surface in a static prototype.
Because the environment behaved coherently, engineering partners were able to evaluate workflows through direct interaction instead of interpretation.
AI-assisted tooling was introduced to increase iteration capacity without diluting design judgment. It supported layout scaffolding, component restructuring, and exploratory variations while preserving architectural consistency across the system.
This approach expanded the range of viable paths that could be explored within a fixed timeline, while keeping decision-making grounded in human evaluation and product strategy.
Traditional design artifacts often describe how something should behave. The UX Lab functioned as an artifact that demonstrated how it did behave within defined constraints.
This shift changed the nature of collaboration. Stakeholders engaged with observable behavior instead of hypothetical flows, which reduced ambiguity and strengthened cross-functional alignment.
The UX Lab was built as a production-aligned web application designed to model real behavior rather than simulate interface flows. Its purpose was to exercise the system under the same conditions it would eventually support.
The interface leveraged modular, accessible primitives, including Radix-based components, to ensure interaction consistency across states, breakpoints, and themes. Using a shared structural foundation allowed behavior to remain predictable as complexity increased.
Navigable routes and representative data structures mirrored the relational nature of components and vulnerabilities. Search queries resolved dynamically, tab transitions preserved context, and cross-record navigation reflected real information architecture.
Feature flags were built directly into the prototype to simulate different account tiers, gated intelligence, and credit consumption states. Internal teams could toggle between free and paid experiences, evaluate upgrade prompts, and observe how credit limits affected workflow continuity.
The UX Lab also modeled the experience surrounding Sonatype's proprietary MCP server. This included onboarding flows, configuration guidance, and an informational landing surface explaining how the MCP integrated with developer workflows.
By designing these touchpoints within the same prototype environment, the web UI and MCP configuration journey could be evaluated as a cohesive system rather than separate initiatives. The Lab ensured that setup, usage, and contextual guidance remained intuitive regardless of where a developer entered the journey.
In a typical workflow, design hands off screens and engineering works through the details during implementation. That often means edge cases and structural questions surface late.
With the UX Lab, engineers could navigate real workflows before production work began. They could see how routing behaved, how state changed, and how records connected. Many of the usual clarification cycles simply didn't occur because the behavior was already visible.
Executive reviews also became more straightforward. Instead of presenting slides or static flows, we walked through the system together and encouraged async exploration.
Leaders could search, explore records, and experience transitions directly. Feedback was grounded in observable behavior, which made alignment faster and more concrete.
Because workflows were exercised end to end, dependencies became clearer earlier in the process. It was easier to see which structural elements needed to exist before other features could function properly.
This influenced sequencing decisions. The team prioritized foundational behaviors first, which helped protect the release timeline without introducing downstream instability.
Working in code meant constraints surfaced during exploration. Conditional logic, state complexity, and interaction depth were encountered while shaping the experience rather than during implementation.
That visibility reduced rework and made tradeoffs more explicit. Design and engineering were responding to the same realities from the beginning.
Product definition, interaction design, and structural modeling progressed at the same time. There was no extended mockup phase followed by a separate interpretation phase. As workflows took shape inside the UX Lab, they were immediately reviewable and testable.
Engineering did not rely solely on design documentation. They could navigate flows, inspect interaction patterns, and evaluate structural assumptions within the prototype itself.
Traditional grooming often centers on clarifying edge cases and resolving interpretive gaps between design and development. Because the UX Lab modeled real state behavior, many of those clarifications happened organically during exploration.
Product Marketing used the UX Lab as a reference environment while shaping positioning, naming, and launch materials. Because the system was functional, messaging could be developed against real flows rather than anticipated ones.
The UX Lab was not an argument that all design should happen in code. It was a response to a specific class of problem.
Designing directly in code is most effective when behavior, state, and relational logic are central to the experience. When decisions depend on routing, permissions, dynamic data, or cross-record relationships, static artifacts struggle to capture the full system.
There are still moments when static exploration is appropriate. Early concept work, visual experimentation, and rapid divergence benefit from lower-fidelity tools. The key is choosing the medium that aligns with the complexity of the problem.
Introducing AI into the process reinforced this principle. AI increased iteration capacity and reduced repetitive work, but it did not replace judgment. It functioned as acceleration infrastructure rather than authorship.
The most durable shift was not technical but structural. Shared, inspectable artifacts reduce reliance on documentation and interpretation. When teams respond to behavior rather than explanation, alignment becomes simpler.
The UX Lab demonstrated that under the right conditions, design artifacts can operate as infrastructure within enterprise product development.