Enhanced guidance for improved support

The ask was more guidance. The fix was a different pattern entirely.

Role

Product Designer

Team

Product Manager, HRBP, Technical Managers

Duration

5 weeks

Tools

Figma, HTML, CSS, WalkMe

TL;DR

The PM asked for more guidance pathways and tooltips to cut time-to-completion. My hypothesis was the opposite: the failure was structural — managers were already ignoring the guidance in place, and adding more wouldn't change that.

I brought skeptical stakeholders into the usability evidence rather than argue the point, and it pointed to a pattern problem, not a content one. The result was a contextual drawer system built to match the complexity of the work.

Impact

15%guidance usage, up from under 5%
+4pteSAT, crossing the 80% industry benchmark
<5%legacy guidance engagement (the baseline this replaced)

The ask vs. the reframe

More tooltips was a reasonable read: time-to-completion was high, so the assumed fix was to add more help along the way. I wasn't convinced adding more of an existing pattern could move a number that high — my hunch was the pattern itself, not what it said.

A structural hypothesis, not a content one

The tooltip was the wrong container — ephemeral hints can't carry someone through a multi-stage evaluation. More of them would only fail louder.

Letting the evidence align the room

The hypothesis met resistance, so instead of arguing it, I brought the usage data: one-time tours had an 85% drop-off, and just 5% of users touched a tooltip during an evaluation. That was enough to get stakeholders into usability sessions.

The solutionWhySignalsHypothesisRequirementPatterns

What I found

Swivel chair enablement

To evaluate with any confidence, managers left the tool entirely — shuttling between a knowledge base, personal notes, and training just to interpret a rating.

What the room saw

The usability sessions confirmed it firsthand: managers lost their place mid-evaluation, dismissed modal guidance on sight, and never glanced at a tooltip.

Workday
Knowledge base
Learning portal
Personal notes
+
workday.com/evaluate

Design

With the room aligned on a pattern problem, the design work was to build the right container — and to match its structure to how complex each evaluation stage actually was.

Matching the pattern to the content

A modal interrupts. A redesigned tooltip is still ephemeral. The drawer was the only persistent pattern that could sit alongside the evaluation form without displacing the task: available when needed, out of the way when not.

Content complexity varied across evaluation stages, so I designed a spectrum of variants, each matched to the structure the content actually required.

Drawer header

Drawer header

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Drawer header

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Drawer header

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Drawer header

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Drawer header

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Drawer header

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit.

From Figma to production

WalkMe's out-of-the-box components didn't support the drawer pattern or the variant structure I'd designed. I led the front-end development, writing the HTML and CSS to restructure and restyle each component, with usability-tested prototypes as the validation checkpoint before production.

<div class="drawer" data-variant="nested">
<header class="drawer__header">
<span class="drawer__title">Evaluation guidance</span>
</header>
<div class="drawer__section">
<div class="drawer__section-row" aria-expanded="true">
Rating scale
</div>
<div class="drawer__section-body">…</div>
</div>
<div class="drawer__action">
<button type="button">Continue</button>
</div>
</div>
/* WalkMe couldn't — so I wrote it */
.drawer {
position: sticky;
width: var(--drawer-w);
background: var(--surface);
border-left: 1px solid var(--line);
}
.drawer__section {
padding: var(--space-3);
}
.drawer__action {
position: sticky; bottom: 0;
background: var(--action-primary) !important;
}
/Enhanced Guidance