Tables everywhere
Engineers were trying to spot patterns and outliers in data — tables are the worst tool for that.
QUARTIC.AI
Rebuilt a multivariate data analysis workbench for manufacturing engineers — from a rigid, table-heavy tool into a flexible, visualisation-first platform for 50K+ users across Fortune 500 plants.
Read the case study ↓
50K+
USERS
USERS
15+
MODULES
MODULES
50K+Users across plants
$2M+In deals influenced
40%Faster design-to-dev
15+Product modules
01
THE PRODUCT
MANUFACTURING PLANTS GENERATE ENORMOUS AMOUNTS OF SENSOR DATA.
MOST OF IT GOES UNUSED.
Quartic.ai is a decision-intelligence platform that puts that data to work. Sensors on equipment capture hundreds of features at every step of production — temperature, pressure, pH, wavelength readings. MVDA (Multivariate Data Analysis) is the module that lets engineers make sense of it.
The workflow: build statistical models from historical batch data, then run live batches against those models in real time. If a batch starts deviating from the trained norm, the model surfaces it — so engineers can intervene before a faulty batch reaches the end of the line.
01Historical batch data
02Statistical model
03Live batch comparison
04Deviation surfaced
02
WHAT I WALKED INTO
THE PRODUCT EXISTED.
IT WAS GENUINELY BROKEN.
The existing MVDA was usable in the way a spreadsheet is usable — technically functional, but deeply misaligned with how manufacturing engineers actually think and work. Everything was in tables. The workflow was linear and unforgiving. Navigation required users to hold a mental model of decisions made three steps back.
Rigid linear workflow
Made one choice early on? Wrong. You’re starting over. The flow didn’t let users move backwards or skip steps.
No scalability
Large projects with many models and datasets became unmanageable. The project management layer barely existed.
Design inconsistency
MVDA didn’t follow Quartic’s design language. Every module felt like a different product.
03
THE USERS
TWO VERY DIFFERENT PEOPLE
USING THE SAME TOOL.
Research surfaced two personas with near-opposite needs. Designing for both without alienating either was the central tension of the whole project — one builds the models, the other lives with their output.
MODEL BUILDER
Data Analyst
Needs control, precision and depth.
“Give me every knob. I know exactly what I’m tuning and why.”
Goals
- Configure exactly which batches, features and data types feed each dataset
- Run transformations, handle outliers, tune model parameters
Behaviour
- Prefers interactive visualisation over raw tables
- Uses the product daily and deeply — power-user expectations
MONITOR
Process Engineer
Needs signal, not noise.
“Just tell me if something’s wrong with the line right now.”
Goals
- Know instantly if a live batch is deviating
- See high-level summaries and anomaly alerts at a glance
Behaviour
- Doesn’t want to configure anything — just see current state
- Visual storytelling over statistics
04
MY SCOPE
WHAT I OWNED
END TO END.
Four areas, one accountable designer — from the research artefacts through to the components engineers built against.
Design Documentation
Full UX spec — personas, journeys, functional requirements, flow additions, content and error states for every screen.
Design System
Adapted an open-source component library to Quartic’s branding and domain. Cut design-to-dev handoff time by 40% across 15+ modules.
Hi-fi Frames
End-to-end hi-fidelity designs for the full MVDA redesign — dataset wizard, model analysis dashboards, live monitoring views.
Engineering Collaboration
Partnered directly with ML engineers to translate PCA/PLS outputs into interfaces engineers could interpret without a statistics degree.
05
THE WORK — DATASET CREATION
GETTING THE RIGHT DATA IN
WAS HALF THE PROBLEM.
Before a model can be built, engineers create a dataset — selecting which product, recipes, batches, and feature types to include. The old flow was a confusing single form. The redesign is a 6-step wizard handling three data types (time series, discrete, spectral) with free navigation between completed steps and contextual validation at every stage.
- 01Product & Recipe
- 02Batches
- 03Time Series
- 04Discrete
- 05Spectral
- 06Review & Confirm
Product & Recipe → Batches
Configure which product and recipe to pull from, then select up to 100 batches. Handles multi-recipe combinations with inline validation for conflicting assets or missing aliases.
Features — 3 types
Time series (sensor readings over time), discrete (single-point values), and spectral (wavelength data) each have their own step with smart empty states and minimum-selection guards.
Review & Confirm
Summarises all selections before data import. Warns at the review step if no datasets will be created — before any processing is triggered.
06
THE WORK — ANALYSIS & MONITORING
TWO MODEL TYPES.
TWO VERY DIFFERENT JOBS.
Same platform, two fundamentally different mental models. Naming “PCA” and “PLS” as Analysis and Production models was itself a design decision — making purpose clear without requiring a statistics background.
Looking backward
Comparing historical batches
Looking forward
Flagging live deviations
01
ANALYSIS MODEL · GROUP COMPARISON
Retrospective batch analysis
A table-heavy report became a two-panel workbench. Left: a multi-feature projection scatter (PC1 vs PC2) where engineers group batches visually — good against bad — to understand what separates them, then select which batches form the training set. Right: feature contribution and single-feature trend panels explain what’s driving any difference.
Interactive scatter. Select batches, assign to groups, watch clustering emerge.
Bars ranked by variance explained. Click one to see its trend below.
Group A vs B mean and ±3σ confidence bands over time.
02
PRODUCTION MODEL · LIVE MONITORING
Real-time batch ingestion
Production models ingest live batches in real time. The monitoring view shows every batch’s score trajectory as it runs — letting engineers catch a deviation forming before the batch ends. Loading-comparison heatmaps and Hotelling T² charts give the deeper diagnostic views for when something goes wrong.
All models with status — Active, Paused, Monitoring Paused — at a glance.
Every live batch overlaid. Divergence from norm is immediately visible.
Heatmap of which variables load most on each principal component.
Statistical control chart per batch. Crosses the limit → needs attention.
07
DESIGN DECISIONS
THE TRADEOFFS
THAT MATTERED.
INSTEAD OF
Tables of batch data
Rows and columns of numbers for engineers trying to understand batch behaviour across hundreds of variables.
WE USED
Interactive scatter plots + band charts
Patterns and outliers that were invisible in tables become immediately obvious when 100 batches are plotted as points in a 2D projection. Clicking a point drills into that batch’s feature behaviour.
INSTEAD OF
A linear, unforgiving wizard
Start over if you realised you picked the wrong recipe in step 1 after completing step 5.
WE USED
Free navigation between completed steps
Any completed step is tappable from the sidebar. Go back, change a selection, and the downstream steps update their validation state accordingly — without resetting everything else.
INSTEAD OF
Errors revealed at submission
The old flow would fail at the end when required configurations were missing, with no indication of where or why.
WE USED
Contextual validation at every step
Alias missing? Shown inline at the feature it affects. Recipes have no common batches? Told in step 1, not at the review screen. Engineers always know exactly what needs fixing and where.
INSTEAD OF
AI outputs as black boxes
A model says “batch 43 is anomalous.” Why? Unknown.
WE USED
Explainability built into the analysis
Feature contribution charts show which variables drove the anomaly. Loading comparisons explain the model’s own structure. Engineers don’t need a statistics degree — they need enough context to act.
08
REFLECTION
WHAT THISBUILT IN ME.
Domain fluency is a design skill
I could not design MVDA without understanding what PCA actually does, why latent variables matter, and what a process engineer sees when they look at a Hotelling T² chart. The investment in domain knowledge paid back in every single design decision.
A component library is a product too
Adapting an open-source library for Quartic’s needs meant making thousands of small decisions about tokens, states, and behaviour. Getting that right — and documented — is what made the 40% handoff reduction possible.
Visualisation is the UX, not decoration
The entire value of MVDA depends on engineers being able to read a scatter plot and understand what it’s telling them about their production line. The chart design wasn’t a visual layer on top of the product — it was the product.
Documentation creates alignment
The UX spec I wrote before designing anything became the single source of truth for the team — engineering, product, and stakeholders. Decisions stopped being revisited because they were written down.
09
OUTCOME
WHAT
SHIPPED.
Users across Fortune 500 manufacturing plants
In closed deals this work contributed to
Reduction in design-to-dev handoff time
Promoted April 2025 — one of two designers retained post-acquisition
Back to the portfolio
See selected work →