Griffith Foods · UX Engineering Consultant

Maintenance Assistant.

When a $1.9B factory floor's equipment fails, knowledge retrieval shouldn't be the bottleneck. I designed a language model-powered maintenance system that cut time-to-answer from 4 minutes to under 10 seconds, for the people who can't afford to wait.

16Technicians Interviewed
15%Efficiency Improvement
<10sTime to Answer
$1.9BRevenue Client
My Role
UX Designer & Prototype Developer
Platform
Desktop & Tablet Web App
Timeline
16 Weeks
Tools
Figma · Python · OpenAI API · HTML/CSS/JS
The Client

A $1.9B manufacturer where downtime is the enemy.

Griffith Foods. Global food ingredient company. Founded 1919. 30+ countries. 4 plant locations running heavy industrial machinery around the clock.

Every minute a line goes down is lost production. Maintenance knowledge needed to move as fast as equipment fails.

The Problem

The knowledge existed. Nobody could find it in time.

Procedures lived in thousands of PDF pages and inside senior technicians' heads. No unified search. No fallback when key people were unavailable.

The system wasn't broken. It just wasn't built for the speed the floor demanded.

📄Current State: PDF Manual Workflowgf-pdf-manuals.png
Research

16 interviews. Three patterns kept surfacing.

On-floor contextual interviews across all 4 plant locations. Same friction across every role and every shift.

01
Wrong format
2,000-page PDFs. No search. The failure wasn't the information — it was retrieval speed.
02
Knowledge not transferring
Veterans had fixes nobody documented. When they were unavailable, junior techs were on their own.
03
Escalation lost context
Tickets were informal. Every shift change meant starting from scratch on the same problem.
Our User

One behavior pattern dominated every site.

Archetypes built around behaviors and goals, not demographics. One profile showed up at all four plant locations.

Primary User Archetype
The Efficiency Enthusiast
Goals
  • Reduce equipment downtime
  • Faster troubleshooting on the floor
  • Better team knowledge sharing
  • Less reliance on one or two senior techs
Frustrations
  • No reference when troubleshooting on the go
  • Junior staff with no fallback options
  • Answers buried in 2,000-page PDFs
  • Fixes lost between shift handoffs
In Their Words
"I want an answer in seconds, not 20 minutes. Going through a 2,000-page manual for a minor fix doesn't make sense. Calling the maintenance team consumes time we don't have."

"I know this machine better than the manual does. The manual was written by someone who never stood in front of it."

— Senior Maintenance Technician, Griffith Foods

Service blueprint. 4 stages: Detection → Troubleshooting → Procedure → Resolution. The emotional low point hit exactly where clear answers were needed most. That gap was the design brief.

"How might we bring language model capabilities into Griffith's daily maintenance work in a way that actually works for the people doing it?"

— Project HMW Statement

Solution Space

Three jobs. One tool. Zero new behavior required.

Remove friction, don't ask people to work differently. Each capability maps directly to a research finding.

🔍
Search & Diagnose
Plain language in. Structured answer out. Under 10 seconds.
📤
Upload & Expand
Veterans contribute what they know. Indexed instantly. Stays in the system, not in their heads.
🎫
Escalate & Track
One tap to escalate. Machine, query, and attempted fix auto-filled. No context lost between shifts.
The Design

Three constraints shaped every decision.

Speed over completeness. Voice-first input for gloved hands. Dark low-glare UI for industrial lighting. Everything else followed from those three.

Voice Input Feature
Homescreen

Type it like you'd say it out loud.

One search bar. No menus. Type the symptom in plain language, get a structured answer instantly.

Homescreen: Natural Language Search
Search Results

Not just an answer. The right format for it.

Plain-language summary leads. Filter by diagram, steps, or spec sheet. Still stuck — one tap escalates with full context pre-filled.

Search Results
Knowledge Upload

Gets smarter every time someone uses it.

Upload a manual or field note. Tag it, and it's searchable for the whole team immediately. Senior knowledge captured before it walks out the door.

Knowledge Upload
Ticket Escalation

Context survives the shift change.

Machine, query, and attempted fix are auto-filled from the active session. Next technician picks up exactly where the last one stopped.

Ticket Escalation
Browse Manuals

When you know what you need. Browse beats search.

For scheduled maintenance and onboarding. Filter by category, machine type, or document format without needing a search term.

Browse Manuals
Live Prototype

Not a mockup. The real thing.

Fully functional. Language model backend connected to actual Griffith documentation. Search something, browse manuals, raise a ticket.

🖥 Best experienced on desktop. Mobile view is limited.
whimsical-shortbread-647e9e.netlify.app
Open in new tab ↗
Process

Design and engineering ran in parallel.

Tested the language model against real Griffith docs before any screen was finalized. No over-promising.

🧭
Understand
Scoped with Griffith. Defined business outcomes before research began.
🔬
Research
16 contextual interviews across 4 plants. Journey mapping before any wireframes.
✏️
Ideate & Design
Lo-fi to hi-fi in Figma. Feasibility tested in parallel. Validated at every stage.
🧪
Build & Validate
Live prototype with real Griffith docs. 3 rounds of on-floor testing before handoff.
Lo-fi

Structure right before the pixels.

✏️Lo-fi Wireframesgf-sketch-1.png
Mid-fi

Structure locked. Interactions taking shape.

Mid-fi Wireframesgf-sketch-2.png
Design System

Tokens first. Screens second.

Token-to-CSS pipeline built before any screen. Figma → tokens.css → every screen. One value change updates all 13+ screens.

13
Complete screens — zero frameworks, zero dependencies
100%
Token-strict — no hardcoded hex values anywhere
8px
Base grid — all spacing is a multiple: 4 · 8 · 12 · 16 · 24 · 32
Color Tokens
--bg
#0B0F15
Page background — outermost layer
--surf1
#151B24
Cards, nav bar, drawers
--surf2
#1E2632
Inputs, elevated surfaces, hover states
--brand
#0A5B37
Griffith Green — buttons, active states
--brand-ring
#10B981
Focus ring, accent, unread indicators
--warning
#F59E0B
Warning state across badges and alerts
--error
#EF4444
Error, destructive actions
--info
#3B82F6
Informational state
Typography — Poppins
Aa
36px · 600 — Brand / Hero
Section Header
15px · 600 — Section titles
Body label
14px · 400 — Body / primary labels
Supporting
13px · 400–500 — Supporting text
OVERLINE
10px · 600 · 0.08em — Section overlines
Badge label
11–12px · 500–600 — Badges, timestamps
Components
Buttons
Status Badges
Resolved In Progress Pending Escalated
Filter Chips
All Open Resolved Escalated
Search Input
Search maintenance docs...
Border Radius
--r-sm · 8px
Buttons, inputs, badges, chips, cards
--r-md · 16px
Modals, larger surface containers
Impact

Faster answers compound at industrial scale.

A 15% efficiency gain in a factory is a production metric. Every failure resolved faster means less downtime, less escalation, and less dependency on the two people who know everything.

15%
Efficiency improvement in maintenance workflows during prototype validation
<10s
Time-to-answer vs. 4 to 6 minutes with the legacy PDF system
4
Plant locations validated in research before any screen was finalized
What I Learned

The hardest part wasn't the tool. It was trust.

A wrong procedure can damage $500K of equipment or hurt someone. Trust was the product — not the interface.

The most important decisions were about what to leave out.

Next Project
Up next
120Water Sample Manager™