Projects/Printer's Control Panel
Printer's Control Panel
VX design for HP's printer control panel — icon system, interaction states, and guidelines built to hold consistent across every consumer and digital touchpoint.
The brief in three lines.
HP's printer control panel spans consumer and digital touchpoints, each built at different times by different teams — consistency wasn't guaranteed, it had to be actively maintained.
Own the full design process as VX designer: research, icon system, interaction states, and specifications written to be handed directly to engineering without ambiguity.
A consistent, accessible control panel experience — and a set of guidelines the wider GXD team now references when new touchpoints are built.
Physical devices don't get a second impression.
A printer's control panel is one of the least forgiving surfaces in product design. There's no help centre a user reaches for mid-task — the screen either makes sense in the moment or it doesn't. And unlike a web product, you can't ship a quiet fix next week; changes ride on firmware release cycles.
HP's Global Experience Design team needed someone who could own that surface end to end — not just visual polish, but the underlying logic of how consumer and digital touchpoints stay consistent as the product line grows.
"On a physical device, the interface is the only conversation you get to have with the person using it."
Full ownership, not a single deliverable.
Own the complete design process
From early concept through to final specification — for both consumer-facing and internal digital programmes running on HP's GXD standards.
Collaborate directly with engineering
Specifications and guidelines written for implementation, not just presentation — reducing the gap between what's designed and what ships.
Guide junior designers
Mentoring within the team so consistency doesn't depend on one person reviewing every screen.
Specification-first, screen-second.
Rather than designing each screen as its own problem, the work centres on a shared visual language — icon set, spacing, states — so new panels can be assembled quickly and still feel like they belong to the same device.
Research
Understand the touchpoint and its constraints
Concept
Explore icon and interaction options in Figma
Review
Present to business and client stakeholders
Spec
Write guidelines for engineering handoff
QA
Check against WCAG and device constraints
Mapping the moment someone stands in front of the device.
Unlike a web flow, this journey plays out in seconds, standing up, often mid-task. Every stage had to assume the person hadn't read anything beforehand.
Power On
RoutinePanel wakes instantly. No login friction for common tasks.
Select Task
DecisionIcon + label scanned in under two seconds. Ambiguity here cascades.
Configure
ConfidenceSettings grouped by task, not hardware. Defaults do the work.
Execute
WaitProgress state visible at a glance from across the room.
Done / Resolve
OutcomeErrors explain themselves. No manual required.
Three directions, before the icon grid was chosen.
Early exploration tested how much the panel could lean on icons alone before clarity broke down — a real trade-off on a screen this small.
Icon-only grid
Dense, scannable — but 40% of icons were misread in early testing with no label to anchor meaning.
ParkedIcon + label rows
Slightly less dense, but every function is unambiguous. Matched how people described tasks out loud.
SelectedCategorised tabs
Organised, but added a navigation step to every task — too slow for a device people touch dozens of times a day.
ParkedLow-fidelity first, so structure could be argued about honestly.
Wireframes stayed grayscale through several review rounds — enough fidelity to test task flow, not enough to distract stakeholders with colour opinions too early.
From grayscale to interactive prototype
Once the structure held up, the same three flows moved into interactive, dark-theme prototypes — closer to production fidelity, but still built for testing behaviour rather than final visual polish.
Echo — the tokens and components behind the panel.
Colour, type, and component behaviour were locked before individual screens were finalised — down to a formal five-tier responsive system, so nothing downstream had to guess how a component should resize.
Colour tokens
Brand
Ink
Surface
Success
Warning
Error
Type scale — HP Simplified Regular
The panel runs on HP's own corporate typeface, with a type ramp (XL5, XL6, H1 through H8) that resizes across five screen tiers — XS, S, M, L, XL — rather than a single fixed scale. Line-height steps up with screen size too: 100% at XS, rising to 150% at L, so text stays comfortable to read from across a room.
Responsive behaviour
Every interactive component — down to a single dropdown — has documented rules for its five breakpoints. On XL/L/M, a dropdown opens inline below its trigger; on S/XS, the same component opens full-screen as a popup with its own close icon, since there's no room to anchor a floating list on a small panel.
Component states — consumables card
The ink cartridge status card was one of the system's most-reused patterns — the same layout reporting Warranty, Health Gauge, and First Install Date, with only the top status row and icon changing between a healthy state and an error.
Component library
Beneath individual screens sits a shared component set — Button, Toggle, Checkbox, Radio Button, Spinbox, Combobox, Text Field, Text Field with Button, Slider, Text Image Branch — each built once and composed into every screen's Global Header, Area 1/Area 2 content regions, and Global Footer, so a change to the base component propagates everywhere it's used.
The panel, assembled from the system.
Shipped screens from the production build — the home task grid, the Copy settings flow, a print preview grid, and the full status overlay with quick actions, active jobs, and alerts.
Two decisions that shaped the work.
Accessibility as a starting constraint, not a review checklist
WCAG accessibility standards were built into the process from the first concept, not checked at the end. That meant contrast, touch-target sizing, and state clarity were design inputs from day one — which is a very different (and better) result than retrofitting accessibility onto an already-approved design.
Guidelines written for engineers, not just for review decks
Specifications were structured so engineering could implement directly from them — precise states, spacing, and behaviour — rather than needing a follow-up conversation to fill in the gaps. That discipline is what keeps a control panel consistent once it's shipped and other teams start extending it.
A reference point, not just a redesign.
A consistent icon and interaction language across HP's printer control panel touchpoints, reducing the guesswork for new screens.
Accessibility built in from concept stage, not patched in afterward — aligned to WCAG standards throughout.
Specifications precise enough for engineering to implement with minimal back-and-forth.
Guidelines the wider design team now uses as a reference when extending the panel to new products.
What this project reinforced.
Physical interfaces reward restraint
There's no tooltip to fall back on. Every icon has to be legible at a glance, which forces genuinely disciplined visual design rather than clever design.
Good specs are a form of respect for engineering
A precise handoff document isn't bureaucracy — it's the difference between a design surviving implementation intact or drifting with every build.
Consistency has to be designed, not hoped for
Across a product line as large as HP's, nothing stays consistent by accident — it takes an explicit shared system that new work can plug into.