From three HR tools to one system
Enterprise HR Portal
Branding
UX Design
Web Design
UI Design
User Research
Product Design
Identity
From three HR tools to one system
Context
Overview
As Fidelity scaled past 70,000 employees, the cracks between its vendor HR tools widened, forcing manual exports, duplicate data entry, strained timelines, and inconsistent policy enforcement. Leadership green-lit Workforce Connect to close those gaps, control sensitive data in-house, and improve the employee journey.
Workforce Connect delivers a single, task-driven platform for 70k+ employees and an analytics cockpit for HR partners and internal stakeholders. Its underlying token-driven design language immediately caught the attention of the engineering team, becoming the blueprint for modernizing the firm’s 650+ internal applications.
Challenge
The Problem
The project demanded more than a simple UX facelift; it required dismantling entrenched vendor processes while keeping day-to-day HR operations from stalling. We had to harmonize data models, translate dense policy language into plain English, and persuade stakeholders wary of past “tool consolidation” failures.
In addition, any new design paradigm needed to scale to support the modernization effort of 650+ legacy internal applications while maintaining stringent accessibility, legal, and audit requirements.
Goals
The Solution
Our North Star was simple: make HR effortless for employees and bullet-proof for compliance, while creating a design language the whole company could rally behind. The objectives fell into three buckets. First, replace the vendor trio with a single, compliant portal that shrinks task times by at least 25 %. Second, eliminate redundant license spend and error-prone data workflows. Third, build out a foundational, token-driven component library ready for immediate use and scaling across new and legacy internal apps.
We aimed for the following:
Make HR simple for employees and safe for compliance.
Embed WCAG 2.1 AA and end-to-end analytics from day one.
Establish design language with token-based components that engineers want to use.
Reduce license spend and manual rework.
Data
Research Insights
I began with deep context gathering: understanding HR journeys, running workshops interviewing internal SMEs, stakeholders, and team managers who lived the reconciliation pain. This surfaced consistent, quantifiable friction. Surveys (n = 200) showed 61 % of employees “never knew where to start” for basic HR actions, and 74 % of HR staff named “data reconciliation” their top headache. Accessibility scans flagged 47 contrast issues across core flows, and heuristic audits revealed each vendor UI violated Fidelity brand standards in unique, conflicting ways.
Key findings were:
Stakeholder interviews revealed frustration with “eight apps, eight styles.”
Users bounced between vendors for onboarding tasks, PTO requests, and reviews, each with conflicting UI patterns.
HR staff spent hours reconciling CSV exports, risking compliance slip-ups.
Inconsistent terminology undermined trust and training.
Employees craved a single dashboard with clear next steps.
Strategy
Approach
We split execution into two interconnected workstreams. Platform Build focused on a React architecture with SSO, granular feature flags, and staged data migrations. Design Language zeroed in on brand alignment, tokenizing color, type, spacing, and interactions.
Additional Approach Aspects:
Remote whiteboard sessions translated policy jargon into microcopy.
Prototypes tested every sprint for rapid validation.
Analytics and research tracked adoption and task completion.
Design
Process
Design ran as a service lane inside two-week sprints: discovery Mondays, prototype Wednesdays, validation Fridays. Click-throughs moved quickly into coded Storybook components so we could evaluate feasibility and polish micro-interactions early.
Key Outputs
Workforce Connect dashboard with real-time status and clear next steps.
Pre-populated forms that cut onboarding data entry in half.
Tokenized React components documented in Storybook.
Figma libraries synced with code.
Validation
Testing
Testing was baked into every sprint, not a phase at the end. A small employee beta cohort piloted the onboarding and PTO modules, yielding qualitative data on task time and error rates. Simultaneously, internal HR specialists ran side-by-side evaluations against the old tools to surface any additional edge-case gaps.
Outcome
Impact
Today, Workforce Connect is more than a portal; it’s the proof-of-concept that unlocked org-wide modernization. By eliminating redundant vendor spend and accelerating HR workflows, the project demonstrated how design can drive both cost savings and cultural change.
It also supplied the political capital needed to push the new design language. Engineering leadership now wants net-new apps and phased retrofits for legacy systems to leverage and continue to scale the new system.
Workforce Connect doesn’t just streamline HR operations, it catalyzes a firm-wide design renaissance. Faster tasks, fewer tickets, and a $ 1.2 M annual savings paved the way for a token-driven system now guiding the refresh of 650+ apps.
Appearance
Identity & Branding
We refined Fidelity’s green palette for contrast across light and dark themes, crafted a modular icon set, and encoded every decision into tokens that work in concert with engineering efforts. Branded assets and deliverables accelerated team onboarding and education.
Some branding highlights include:
Leverage the best of Fidelity's existing design language where it made sense.
Accessible palette tuned for WCAG AA.
Iconography mapped to HR & power user app concepts.
Figma tokens stayed in lockstep with engineering.
New logo for the platform.
Final Thoughts
Reflection
The project also demonstrated that a well-crafted design system is a strategic asset, not a side deliverable. Launching the new system in tandem with Workforce Connect meant every pixel, token, and component was pressure-tested in a real product from day one. That credibility led to adoption. Two new apps leveraged the new design system within three months, and leadership soon requested its use across the 650+ app portfolio as modernization efforts continued.
Leading dual tracks, product and system, sharpened my capacity to translate complex SOPs into a fresh platform while coaching cross-functional teams toward a shared design culture. The experience reinforced that sustainable change happens when designers embed themselves in governance, product discussions, and developer workflows, not just the designs.
