Protected project
Enter the password to view this case study.
01 Overview
Reimagining how we design for digital and hardware products, by connecting design files to live vehicle data so an experience can be driven on a real road instead of clicked through as a static mockup.
Role
Designer and in-house prototyping expert. Built the component framework, the workflow, and the practice around it.
Scope
Tool evaluation → modular prototype architecture → Figma-to-vehicle pipeline → research clinics on real roads.
Outcome
Live prototypes running on production vehicles, supporting 7 research clinics and 500+ participants.
02 The Challenge
Designers create in-vehicle experiences in tools like Figma. But a vehicle is a highly complex system, shaped continuously by weather, road conditions, time of day, and the state of the car itself. Testing a design as a happy path, or as a static mockup, is not enough to know whether it will hold up as a real product.
The gap
The bet
Rather than accept the gap, my team took the initiative to build a prototyping platform that integrates design with real vehicle data, running on production vehicles.
03 The Platform
We evaluated the available prototyping tools and selected ProtoPie as the main tool and interface, because it could connect designs to both hardware and live vehicle data. Around it we built Artemis: a stack that feeds real signals in, translates them, and drives them out to whatever surface is being tested.
Peripherals & Feeders
Where signals and inputs come from
Artemis Core Stack
Where design meets the signal layer
Consumers & Clients
Where the experience is actually felt
04 The Signal Contract
For a designer to build against live data, the data has to be legible to a designer. I defined a shared specification mapping each vehicle signal to its value range, its type, and the interface element it drives. This became the contract between design and engineering, and the thing that let a prototype behave correctly in a moving car.
| Signal | Value | Type | Drives |
|---|---|---|---|
| Vehicle.Powertrain.Gear.SelectedGear | "Park" · "Drive" · "Reverse" · "Neutral" | Text | Gear Selector |
| Vehicle.Speed | 0.0 – 999.99 | Number | Speedometer |
| Vehicle.Body.Lights.DirectionIndicator.Left | true · false | Text | Turn Signal |
| Vehicle.ADAS.BlindSpot.LeftStatus | 0 · 1 | Number | Blind Spot (BLIS) |
| Vehicle.ADAS.TractionBattery.StateOfCharge | 0 – 100 | Number | Battery State of Charge |
| Vehicle.ADAS.TractionBattery.Range | 0.0 – 9999.99 | Number | Battery Range |
| Vehicle.Chassis.Brake.PedalPosition | 0 – 100 | Percent | Brake Pedal Position |
| Vehicle.Chassis.Axle.Row1.Wheel.Left.Tire.Pressure | 0 – n | Number | PSI Tire Pressure |
| Vehicle.TraveledDistance | 0.0 – 99999.99 | Number | Odometer |
A representative slice of the specification. Every element on screen traces back to a named signal with a defined range.
05 The Workflow
The platform only mattered if a designer could actually get something into a car. I designed the complete workflow end to end, so that a change made in a design file could travel all the way to hardware without being rebuilt by hand at every step.
Figma
Design source of truth
Component library and screen specs for panoramic display, cluster, and center stack.
ProtoPie
Logic and live data
Each widget becomes a self-contained “pie” carrying its own interaction logic and signal bindings.
GitHub
Version and review
Prototypes versioned like code, so changes are reviewable, revertible, and shared across the team.
Vehicle
Running on real hardware
Deployed onto production vehicles, driven by live signals on public roads and test tracks.
Why it held up
Versioning prototypes in GitHub meant the team could review, revert, and branch a prototype the way engineers already worked, instead of passing around files.
What it unlocked
Panoramic display, instrument cluster, and center stack designs all integrated into real vehicles through the same path.
06 Modular by Design
The hardest structural problem was collaboration. A full in-vehicle experience is far too large for one person to prototype, but prototyping tools assume a single author. Working with engineers, I broke the design system into widget elements, each expressed as its own self-contained “pie” carrying its own logic. A web override method then orchestrated many pies into one seamless experience.
Independent authorship, single integrated result. Designers could work on separate widgets in parallel without colliding, and the pieces still assembled into one experience.
Component framework
Each component owns its logic and is reusable across projects, so updating one does not disturb the core.
Result
A prototype system that stayed fast and flexible as it grew, instead of becoming a single fragile file.
07 My Contributions
This was a team effort, and my part was to make the platform usable as a design practice: the architecture of the prototypes, the workflow connecting the tools, and the relationships that kept both improving.
I established best practices for using ProtoPie in automotive prototyping and developed a modular component framework where each component carries its own logic and is reusable across projects. The system stayed fast and flexible, and components could be updated without disrupting core logic.
I designed the complete path from Figma to ProtoPie, ProtoPie to GitHub, and GitHub to vehicle integration. Before this, there was no route from a design file to something a customer could sit inside and use.
Working with hardware and software engineers, I broke the design system down into widget elements expressed as “pies.” Using a web override method, we orchestrated many pies into one seamless experience, letting designers work on separate widgets independently while still integrating cleanly.
Over two years I worked directly with the ProtoPie product team, sharing insight through real use cases and one-on-one interviews. That continuous feedback influenced tool enhancements, major feature updates, and workflow improvements on their side.
08 Impact
7
Research clinics
Run across the United States
1,000+
Miles of road testing
On public roads and test tracks
500+
External participants
Customers experiencing live prototypes
3
Display surfaces
Panoramic, cluster, center stack
We successfully integrated the designs for the panoramic display, instrument cluster, and center stack into real vehicles through this platform. As the first designer in the organization to adopt ProtoPie, I built multiple prototypes and became the in-house expert within a year. From there I set standards for product-ready prototyping, onboarded and coached fellow designers, and introduced the workflows combining ProtoPie, GitHub, and the Artemis platform.
I was also one of the few designers consistently attending research sessions in person, supporting studies and witnessing user interactions firsthand. That direct exposure let me refine designs quickly and validate the approach in real driving conditions.
09 Reflection
The lasting lesson is that tooling is design work. The most valuable thing I produced here was not a screen, it was a path: a repeatable route from a design decision to a customer sitting in a moving vehicle experiencing it. Once that path existed, the quality of every design decision downstream improved, because it could finally be tested against reality instead of argued about in a review.
The second lesson is that pushing a tool beyond its intended use is only worth it if you feed what you learn back. Two years of working openly with the ProtoPie team turned our workarounds into product features, which meant the next team did not have to solve the same problems we did.