Action clarity
Every CTA was rendered as a primary button. Users couldn't tell which action was the next step.
+ 01 / Intro
GuidehubBrought in as emergency support after an executive escalation — diagnosed a broken upstream artifact and restructured the relay that produced the surface symptoms.
- Role
- Senior designer
- Impact
- Client trust recovery · award reception
- Timeline
- Sep 2023 – Dec 2023
- Status
- Shipped
Toyota Guidehub is Toyota’s internal supply-chain operations platform. This engagement focused on the workflow — a multi-step flow letting Distribution Service Manager personas review vehicle configuration codes across linked sub-guides before approvals propagated downstream. When I joined, the project had been escalated to executive review and the consulting partner had been switched mid-engagement. Trust was eroding. I was brought in as senior emergency support to firefight.
01PC Manager approves
02PCA codes auto-generate
03DSM reviews & validates
04UUU codes + function kind assigned
05Guide approved, propagates downstream
PCA approval flow — where the engagement lived
+ The problems
02
When the surface kept breaking, I traced it upstream.
The project was in crisis, so triage came first. I identified the three most critical surface symptoms — the ones that were objectively wrong, not matters of taste — and traced them to a single upstream cause.
PROBLEM 01
Designs were being driven by individual aesthetics, not by shared principles.
Across the screens I audited in the first week, the same three fundamentals were broken everywhere. Each one is an objective rule, not a matter of taste — which is why I led with them.
Color semantics
Green / blue / red meant different things on different screens. The user's learned mapping was broken.
Viewport reality
Wireframes only worked on an infinite Figma canvas. At the real 1280-px implementation breakpoint, layouts broke.
01 · Action clarity — every CTA looked equally important
One primary action per screen. Secondary actions should carry less visual weight. Across the platform, almost every interactive element was rendered as a filled primary button, leaving users with no signal about which step was actually next.
02 · Color semantics — same color, different meaning across screens
Color is language, not decoration. Same meaning → same color; different meaning → different color. In the platform, success- green, info-blue, and error-red each meant something different depending on the section — so the user’s learned mapping broke every time they navigated.
03 · Viewport reality — wireframes only worked on an infinite canvas
A 1440-design that breaks at the real implementation breakpoint isn’t finished. The form below was specified at full Figma canvas width, with all fields visible at once — so the bottom actions appeared reachable on paper but were never on screen at implementation size.
PROBLEM 02
The hierarchy was breaking because the BRD was pre-deciding the UI.
Once the surface symptoms were named, I looked for the cause. Tracing the artifact upstream, the breakdown wasn’t on the design team’s side — it was in what the design team was being handed.
- The BRD specified UI elements — buttons, dropdowns, modals — as part of the requirements.
- Designers received those UI atoms and placed them all at the same hierarchy level, because the BRD asked for them equally.
- Result: cluttered, undifferentiated interfaces. The design spec was being decided by the BRD; designers were effectively painting it.
+ The fix
03
Two moves: clean up the visible damage, then fix the artifact that produced it.
I didn’t try to fix every screen. I picked the three most objectively-evaluable problems on the surface and rebuilt the upstream BRD so the same problems stopped getting generated.
Surface fix — visual hierarchy, restored
For Action clarity specifically, I led a pass that restored a single primary action per screen and pulled secondary / tertiary actions down a tier in weight. The same logic applied to color semantics and viewport audits across the platform — but the before / after is clearest on the action-hierarchy fix.
BEFORE
Every action rendered as primary; no hierarchy signal.
AFTER
One primary action; consistent secondary + tertiary treatment.
Upstream fix — a new BRD communication framework
The surface fix would have only held if the BRD kept handing designers UI atoms. So I worked with the design and business teams to define a new BRD communication framework — one that carried outcome and context across the relay, and left the UI decision on the design side where it belonged.
✕ WHAT WAS MISSING IN THE OLD BRD
- What the user was trying to accomplish, or why
- Context around who the user is and what scenario they’re in
- Anything that didn’t read as a build spec — colors, button placement, and interactions were hard-coded
✓ WHAT THE NEW BRD FRAMEWORK CAPTURED
- Desired outcome first, not the interface
- Problem context + intent, not just feature lists
- UX-option pathways that allow discussion and choice
THE RELAY, RESTRUCTURED
+ Impact
04
Earning trust through action.
The most concrete result was the project itself — escalated to executives when I joined, rescued by the time it shipped. The more durable result was what came after.
Beyond resolving the tactical issues, I played a core role in upskilling and unblocking the design team — and the relationship outlived the engagement.
As a result, I was later asked to lead training initiatives — Designers’ Collective, Figma Fundamentals, and the Data Visualization Practicum — shaping the next generation of internal design talent.
Surface symptoms are easier to argue about. Structural causes are easier to fix. The lesson I’d carry into the next emergency engagement: ask “where does this artifact come from?” before fixing what it produces.