- Type
- Professional — in-house product
- My part
- UX refresh workstream — audit, research synthesis, prioritisation, design
- Team
- Product, engineering and a partner design team
- Methods
- UX/UI audit, heuristic evaluation, walkthroughs, time-and-motion study, interviews
- Duration
- 9 weeks, iterative
- Platform
- Responsive web, mobile-first employee portal
Problem
The portal is where three groups meet: branch staff administering multiple client companies, employers managing their own workforce, and employees checking a pay stub on a phone once a fortnight.
It had been live for over five years. Each year added features, and each feature left a compromise behind — an extra click, an inconsistent table pattern, a form that worked on desktop and broke on mobile.
The users were described internally as low-tech and high-touch. They don't explore or hunt for settings. When the interface confuses them they call support, and those calls were a running cost.
The constraint
Go mobile-first, and keep existing users' familiarity intact.
A clean-sheet redesign would have been faster, but for users performing a task once a fortnight, familiarity is a large part of usability. The working rule was: change what people struggle with, preserve what they already do successfully. Every proposal had to pass the question “does this force someone to relearn something that already works for them?” Several strong-looking ideas didn't pass it.
Research
Four passes, broad and cheap first, specific and expensive last.
- UX/UI audit of the current state — a systematic sweep of the live product, cataloguing inconsistencies and dead ends.
- Heuristic evaluation — separating cosmetic debt from friction that violated something users depend on.
- Walkthroughs and a time-and-motion study with a user group of up to 20 people across all three personas. Timing real tasks reordered the priorities: several things flagged as ugly cost nobody anything, and several things nobody complained about were expensive, because people had built workarounds.
- Interviews — to understand why those workarounds existed. Findings were consolidated and prioritised jointly with stakeholders.
What changed the approach
Users weren't struggling with how the interface looked. They were struggling because the system rarely told them what had gone wrong or what to do next. Errors appeared as icons. Confirmations were ambiguous. The product was least communicative exactly where people were least confident.
That gave the work a principle: design for forgiveness — prevent errors where possible, and when they happen, state plainly what is wrong and how to fix it.
Prioritisation
Nine weeks doesn't clear a five-year backlog. Scope was agreed in four tiers before design started.
| Global patterns | Master design theme, dashboard, notifications and wait states, form and field level pain points |
|---|---|
| Priority 1 | Global patterns applied, plus the employee portal |
| Priority 2 | New hire onboarding, reporting, bulk changes, document management |
| Stretch | Payroll timesheets and calculators |
Payroll timesheets were the most requested item and were deliberately parked. They were the highest-risk surface in the product, and nine weeks wasn't enough to change them responsibly. Agreeing that in week one protected the rest of the scope.
The work
Bulk upload: error handling
Employers upload new hires in batches. A failed row previously appeared in a flat table with a red warning triangle and no explanation of which field was wrong or why.
The redesign is a three-step flow — download template, upload, review and submit — ending in plain language: “2 errors found. Please correct highlighted fields before submitting.” Failed fields are marked inline and editable in place, so a correction doesn't mean restarting the upload.
Add the screens once the customer name, logo, company ID and
personal data fields have been replaced with fictional values.
New hire onboarding: the invitation email
A new employee's first contact with the product is an invitation email. The old one ended with a fallback link of about fifteen wrapped lines of raw URL characters, which reads as either broken or fraudulent. The replacement is two numbered steps and a labelled link. No research method surfaced this; it came from following the journey outside the product, into the inbox where it actually begins.
Employee self-service: mobile-first
The employee experience was a desktop dashboard of collapsible widgets, several defaulting to “No Data Found”. Employees are the group least likely to be at a desk and least likely to log in often. It was rebuilt around the reasons employees actually open it: a quick-connect row for the four most common tasks, a pay stub summary split into overview and breakdown, and next and last pay dates visible without a tap. Widgets that were empty by default were removed rather than relabelled.
Design system
Fixing screens individually would have rebuilt the same problem in a newer style. The underlying deliverable was a master design theme covering navigation, filtering, form layout, tables and their actions, inline editing, search and results, error handling, context switching, accessibility, and contextual help.
One-click create menu. Creating anything — a new hire, a payroll, a document, a leave request — previously required knowing where it lived. It is now one labelled menu in the same position on every screen. Nothing moved; something was added.
Contextual help. Short videos, FAQs and documents scoped to the current screen, instead of a separate help centre. For a high-touch user base this is the change with the most direct effect on support volume.
Outcome
Nine weeks, run as a loop: audit and walkthroughs in week one, prioritisation in week two, then weekly design increments — global patterns, employee portal, onboarding, reporting and bulk changes — each reviewed with stakeholders and the user group and fed into the next iteration. The final two weeks were show-and-tell sessions with a wider internal audience.
The refresh was approved and delivered across six workflow areas, the master design theme now governs the portal's patterns, and interactive prototypes for each flow are in use by the teams building it.
What I'd change
- Run the time-and-motion study first. The product was catalogued before people were watched using it, so the initial priorities reflected what looked wrong rather than what cost time.
- Establish a baseline. Support calls were a known cost but were never quantified beforehand, so the improvement can be argued but not measured.
- Propose the scope trade-off rather than concede it. Parking payroll timesheets was the right call, but it belonged in the pitch, not in a week-one concession.
Company name, brand and business metrics withheld. Interface screens will be shown with placeholder data. Full artefacts and prototypes available on request.