Jan 2026 - Apr 2025
Product Design Intern
4 months
OxBlue
The project itself :
Project Overview
OxBlue is the leading construction monitoring platform in the U.S., trusted by general contractors and project owners to track jobsite progress through time-lapse cameras and AI-driven analytics. As OxBlue scaled, its UI had grown organically over years, with fragmented components and inconsistent patterns across the product.
I joined as a Product Design Intern with a six-month mandate: migrate OxBlue's existing UI library to Hexagon's NOVA Design System, adapted for OxBlue's Vue.js stack rather than NOVA's native React. Over four months, that work expanded from a system migration into a broader workflow shift, pairing Figma MCP and Claude with hands-on engineering review to compress the design-to-code loop. I delivered the migration roadmap 40% ahead of schedule.
Specific project details and screens are kept private under NDA. The phases below outline the work at a high level.
Phase 1:
Establishing the Blueprint
Design System Architecture & Scalability
The first phase focused on building the foundation: a Vue.js component library translated from Hexagon's NOVA system, tailored to OxBlue's product context.
Audited OxBlue's existing UI against NOVA's foundations ; color tokens, typography, spacing, and component states , to map the gap between where the product was and where it needed to be.
Built a translation layer of design tokens that map cleanly between NOVA (React) and OxBlue (Vue.js), preserving system behavior across stacks.
Established documentation for typography, color, and spatial standards so the team could apply the new system consistently across legacy screens and future features.
Phase 2:
Workflow Transformation
AI-Augmented Design with Claude & Figma MCP
As the foundation took shape, I shifted to optimizing the design-to-implementation pipeline. Pairing Figma MCP with Claude allowed me to scaffold component code directly from Figma files, then validate the output with engineering before each PR.
Automated token mapping and component scaffolding to remove the manual work that typically slows a system migration.
Treated AI as an accelerator for execution, not a replacement for judgment. The decisions about what to migrate first, how to handle edge cases, and when to override a NOVA pattern stayed with me.
This workflow is what allowed the migration to land 40% ahead of the original timeline.
Phase 3:
High-Fidelity Validation
Functional Prototypes for User Testing
Standard click-through prototypes often miss the nuances of real product behavior : state changes, conditional logic, edge cases. To close that gap, I built functional Vue.js prototypes alongside the Figma files.
Prototypes used simulated data and real state management, giving the team a tangible preview of how features would actually behave in production.
This made user testing sessions sharper. Instead of testing intent, we tested behavior. Insights about state management and edge cases surfaced earlier in the cycle.
It also gave stakeholders something to react to that was closer to the final product than any static mockup could offer.
Phase 4:
The New Handoff Standard
Interactive Blueprints for Engineering
The final phase focused on eliminating the guesswork that typically sits between design and engineering.
Delivered functional prototypes alongside Figma files, so engineers had both visual specs and working reference logic for each component.
This reduced the back-and-forth that usually slows handoff and meaningfully shortened the feedback loop with the engineering team.
The result: implementations match design intent more closely the first time, with less need for post-development polish.
Interested in how this approach could work for your team?
Let's talk.