UX Case Study · KeyBank · 2024

HR Platform Redesign

Centralizing a fragmented HR experience into a single, navigable hub — so employees find what they need in 3 clicks or fewer.

RoleLead Product Designer
ScopeEnd-to-end redesign
OutcomeLive platform
HR platform homepage prototype
A rebrand became a redesign

A company-wide HR rebrand at KeyBank surfaced a deeper problem: the existing platform wasn't built to communicate. Employees couldn't find critical resources. Managers had no single home. Policies lived in PDFs nobody read. The four-pillar HR brand — Pay, Benefits, Wellness, Career — needed more than a visual refresh. It needed infrastructure.

HR brand four pillars
The four-pillar HR brand framework that anchored the platform redesign
Phase 01 — Analyze
What employees were telling us

Research surfaced four recurring friction points that shaped every design decision that followed.

01 / Navigation
Too many clicks, not enough clarity

An overwhelming menu structure meant employees wasted time searching — or gave up and asked a colleague instead.

02 / Manager tools
No home base for managers

Resources for pay grades, training, and life events were scattered across the platform with no clear path to find them.

03 / PDF dependency
Policies locked in static files

Long PDFs couldn't be searched, linked to, or shared selectively — creating compliance risk and daily friction for everyone.

04 / Personalization
One-size-fits-none experience

Employees, managers, and new hires have different needs. The platform made no distinction between them.

3
Clicks or fewer — the north star metric for every navigation and content decision in the redesign. If an employee couldn't reach any resource in three steps, it needed to move.
Phase 02 — Ideate
Design principles, made concrete

Each pain point mapped to an explicit structural solution. No vague "better navigation" — every decision was tested against the 3-click standard and validated through three rounds of user feedback.

Homepage layout
Persistent, predictable resources

High-priority links live in the right column. Permanent resources anchor the left. Employees learn the layout once and rely on it every time.

Homepage layout wireframe
Mega-navigation
One dropdown, all four pillars

A mega-nav gives employees direct access to sub-sections without drilling through pages. Life Events, for example, is one click from anywhere.

Mega navigation design
Policy pages
Web-first, not PDF-first

Policies moved from static files to interactive web pages with expandable sections, anchor links, and smart search. Shareable by section, not by document.

Policy page design
Pillar pages
What's new + quick links + programs

Each pillar page has a consistent three-zone structure: current updates on the left, quick links on the right, all associated programs below.

Pillar page layout
Phase 03 — Final prototype
The platform

The live site organizes everything under Pay, Benefits, Wellness, and Career — mirroring the HR brand. Here are the key surfaces that solved the four pain points.

01 Homepage + My HR Links

The most-used feature: a personal, editable list of favourite links that appears on every page load. Employees curate it once; it follows them everywhere on the platform.

Homepage with My HR Links
Homepage — My HR Links visible in the top-right for instant personalised access
02 Mega-navigation

Three rounds of user testing shaped this dropdown. It surfaces sub-sections — including Life Events and Manager Resources — without a single intermediate page click.

Mega nav iterations
Navigation structure iterations
Final mega nav
Final mega-nav, live
03 Pillar pages + Manager Hub

Benefits, Pay, Wellness, and Career each got a dedicated pillar page. Managers got something extra: a single hub pulling all four pillars into one view — every resource, no hunting required.

Manager Resources hub
Manager Resources — all pillars in one page
Life Events page
Life Events — policies and benefits by milestone
04 Expandable policy drawers

Leaves of Absence, parental leave, pay grades — each topic expands inline with quick links and full details. No PDF download. No page reload. No lost context.

Policy drawer closed
Accordion — collapsed state
Policy drawer expanded
Accordion — expanded with quick links

Design is better when it's built together.

Working on a similar problem? Let's talk about it.