Overview
Context
Research Insights
Guiding Principles
Ideation
Main Screen
Schemes
Activities
Closing
Go Back on Top
Main page
Contact
Main page
Contact
Main page

Workplace Pension Dashboard

Workplace Pension Dashboard

A Multi-Scheme, Compliance-First Command Center

A Multi-Scheme, Compliance-First Command Center

My role

Product Designer

(0.1 → 1 Design, Functionality-to-Scalable MVP)

Skills
Lean UX
Data-Driven IA Restructuring
Content Strategy
Responsive Architecture
Scalable UI Patterns
Interaction Design
Rapid Prototyping
Team

CEO (Domain Expert), 1 PM,
1 Engineer

Timeline:

2 Months

(Q4 2024: Pre-Launch MVP)

Overview:

Jarvis is a UK pension provider with an enterprise web app(MVP) that helps employers manage multiple workplace pension schemes, automate & track payments, and maintain compliance.

12+ pension workflows, one hub—less admin, more clarity for employers.

12+ pension workflows, one hub—less admin, more clarity for employers.

Dashboard
Dashboard

See what needs attention, where money’s going, and how much you’re saving—at a glance.

See what needs attention, where money’s going, and how much you’re saving—at a glance.
Scheme Insights
Scheme Insights

Move from high-level oversight to scheme-specific data without switching context.

Move from high-level oversight to scheme-specific data without switching context.
Activities
Activities

Access system-wide updates and actions from a single, filterable hub.

Access system-wide updates and actions from a single, filterable hub.
✦ SUMMARY

TL;DR

Led decision-framing workshops to create JTBD-driven roadmap for high-impact features.

Transformed fragmented MVP into a polished demo platform showcasing Jarvis's core value.

Built modular UI system with reusable components for scalable enterprise solutions.

The goal is to stand out in a market full of dull, compliance-driven dashboards through a sense of strategic control instead of mere data listings.

The goal is to stand out in a market full of dull, compliance-driven dashboards through a sense of strategic control instead of mere data listings.

Team Jarvis

Team Jarvis

✦ Inherited Functionality

We Started with A Barebones Functional Prototype

No User-Centred Design

No User-Centred Design

The MVP was primarily built to prove backend functionality, with minimal attention to hierarchy or workflows.

Fragmented Scheme Data

Fragmented Scheme Data

Multiple screens, with no unified view for tracking contributions or compliance.

Technical Constraints

Technical Constraints

The existing backend architecture required thoughtful UI layering; we couldn’t just “scrap and rebuild.”

Screenshot of the initial MVP

✦ Constraints as Catalysts

Lean ≠ limited

Constraint

Constraint

No formal user testing due to time and budget.

Approach

Approach

Rely on proxy user research (CEO’s domain knowledge + Desk research + Prospect calls insights) and heuristic evaluations (Nielsen’s principles) to spot critical issues.

Desk finding 1
Since the introduction of automatic enrolment in 2012,
Since the introduction of automatic enrolment in 2012,

The Pensions Regulator (TPR) has issued over 346,000 fixed penalty notices to employers for various breaches, including failures related to pension contributions.

The Pensions Regulator (TPR) has issued over 346,000 fixed penalty notices to employers for various breaches, including failures related to pension contributions.

The Pensions Regulator
Desk finding 2
Between January and June 2024
Between January and June 2024

TPR issued 20,677 fixed penalty notices and 7,682 escalating penalty notices to employers for non-compliance with automatic enrolment duties.

TPR issued 20,677 fixed penalty notices and 7,682 escalating penalty notices to employers for non-compliance with automatic enrolment duties.

The Pensions Regulator

✦ Market Research Insights

Industry Norm

Pension Tools are often:

Task-driven & Info-heavy

Focused on data dumps, leaving users to figure out what’s urgent.

Visually Outdated

Compliance is front and center, but rarely user-friendly.

Gaps in Strategic Gains

No clarity on cost-saving opportunities or holistic oversight.

"We shouldn't need a financial degree to manage basic pension tasks."
"I track pension schemes across 12 Excel sheets—it’s chaos."
"I worry we’ll miss penalties because everything’s scattered."
"We track everything manually because that's how it's always been done."
"I'm constantly switching between platforms just to check basic information."
"Every month-end is just endless data checking."
"Most mornings, I’m just checking if we missed deadlines."

Screenshots of typical competitor screen

Screenshots of typical competitor screen

Snapshot of user reviews revealing the everyday frustrations

Snapshot of user reviews revealing the everyday frustrations

User Research Analysis

Employers spend hours reconciling scheme data.

Employers spend hours reconciling scheme data.

High Cognitive Load for non-finance staff, unclear deadlines, jargon-heavy interfaces.

High Cognitive Load for non-finance staff, unclear deadlines, jargon-heavy interfaces.

Key stakeholders lack a centralized system for tracking contributions, payments, and compliance across schemes.

Key stakeholders lack a centralized system for tracking contributions, payments, and compliance across schemes.

Teams spend too much time on routine pension tasks.

Teams spend too much time on routine pension tasks.

Financial Literacy Spectrum

Financial Literacy Spectrum

Mapping Pension Responsibilities & Gaps

Mapping Pension Responsibilities & Gaps

✦ Opportunity

While existing tools treat pensions as a cost centre, we saw an opportunity to reframe it as a strategic asset.

While existing tools treat pensions as a cost centre, we saw an opportunity to reframe it as a strategic asset.

A New Kind of Pension Platform

Employers needed a system that:

Simplify complex data flows, proactively surface compliance or cost-saving alerts.

Simplify complex data flows, proactively surface compliance or cost-saving alerts.

Instill confidence in non-financial users.

Instill confidence in non-financial users.

Empower to make smarter, more strategic pension decisions.

Empower to make smarter, more strategic pension decisions.

High-level Illustration of Workplace Pension
High-level Illustration of Workplace Pension

A system where pensions are proactive, not reactive—simplifying compliance while supporting smarter decisions,
so employers can focus on what matters most—their people.

A system where pensions are proactive, not reactive—simplifying compliance while supporting smarter decisions, so employers can focus on what matters most—their people.

Product Philosophy
✦ Approach

Guiding Design Principles

Time-to-Action (TTA)

Reduce steps needed to identify and resolve tasks.

Guidance, Not Noise

Activities as workflow tools, not interruptions.

Empowerment Through Context

Show the “Why”, "How" & "What next" behind data.

Scalable Simplicity

Design flows/UI patterns that grow with business.

✦ Dashboard Ecosystem

Bringing Compliance & Strategy Under One Roof

After identifying critical gaps and defining our product philosophy, the next step was reimagining the dashboard’s architecture to reflect how employers actually work.

Process so far

Process so far

Global Zones Classification

Global Zones Classification

IA Mapping

IA Mapping

Core Layout & Architectural Strategy

How might we create a single vantage point that surfaces both urgent actions and long-term savings opportunities?

How might we create a single vantage point that surfaces both urgent actions and long-term savings opportunities?

Left Column

Positions pensions as value drivers, not cost centers.

Right Panel

Heuristic analysis identified buried deadlines —proximity to actions keeps them in focus.

Two-Column Mental Model

Two-Column Mental Model

Mental Model Alignment

Structured the UI around how employers  balance “act now”, “plan ahead” & “How are we doing overall?”.

Risk Mitigation

Surfacing deadlines upfront: “We need to show we keep clients penalty-free.”

Structured categorization of core workflow areas

Structured categorization of core workflow areas

Dashboard Interactions & Guided Flows

“I waste time switching platforms and tabs just to check basic information.”

User review

Below are four high-level flows (each with a corresponding diagram) illustrating how I tackled this challenge:

Below are four high-level flows (each with a corresponding diagram) illustrating how I tackled this challenge:

01 / 04

From Alerts to Action in 2 Clicks

Alerts to action in 2 clicks—no hunting

02 / 04

Global ‘Activities’ Hub

Global ‘Activities’ Hub

03 / 04

Scheme Insights at a Glance

Scheme Insights at a Glance

04 / 04

Subtle Knowledge at the Point of Need

Subtle Knowledge at the Point of Need

✦ Bringing Jarvis’s UX to Life

Building a Scalable Visual Language

Next, we focused on turning research and interaction patterns into a cohesive visual system—clarifying color roles, simplifying layers, and setting a consistent design language.

Blend of Inverted theme & Legacy Surface theme

Blend of Inverted theme & Legacy Surface theme

Color As Intent

Color As Intent

Color as communication

Color as communication

Brand Colors in Action

Brand Colors in Action

Component Curvature

Balancing modernity with familiarity—subtle curves ease visual tension while keeping the interface clear, professional, and approachable.

Balancing modernity with familiarity—subtle curves ease visual tension while keeping the interface clear, professional, and approachable.

Card & Button Radius Decision

Card & Button Radius Decision

Bringing it all together

From philosophy to pixels: A compliance-first interface that feels approachable, not overwhelming.

From philosophy to pixels: A compliance-first interface that feels approachable, not overwhelming.

High-Fidelity UI

High-Fidelity UI

Financial Health Components

Financial Health Components

Scheme List

Scheme List

Right Panel Alerts

Right Panel Alerts

Spending Trends

Spending Trends

NIC Savings Trends

NIC Savings Trends

Critique Insight

Payroll contributions and enrolments were recurring yet buried in global navigation.

Payroll contributions and enrolments were recurring yet buried in global navigation.

✦ Main screen Design Critique

Interaction Cost for Critical Tasks

How might we reduce friction and page-hopping to support time-sensitive workflows on the dashboard?

How might we reduce friction and page-hopping to support time-sensitive workflows on the dashboard?

Before

Key Adjustments

Frequency of Use

Frequency of Use

Frequently used actions deserve surface-level access—removing the need to remember navigation paths for recurring tasks.

After

Leveraged Fitts’s Law

Leveraged Fitts’s Law

Larger buttons with high contrast reduce targeting time.

Reduced Interaction Cost

Reduced Interaction Cost

Cut navigation steps from 3 (global nav → page → upload) to 1 (single click).

Research Insight

How might we design smoother entry points from dashboard context to granular details without friction?

How might we design smoother entry points from dashboard context to granular details without friction?

Scheme Insights

Entry Points Aligned with Mental Models

Entry Points Aligned with Mental Models

By clicking an active scheme directly from the dashboard, users land on immediate, scheme-specific insights.

One-click access to scheme details

Screenshot of the initial MVP

One-click access to scheme details

Scheme Insight Page

Screenshot of the initial MVP

Scheme Insight Page

✦ Scheme Insights

Inclusive Workflows for Diverse Personas

Inclusive ≠ Complex

Inclusive ≠ Complex

How might we support different decision depths without breaking user flow?

Nielsen’s 6th Heuristic

Nielsen’s 6th Heuristic

How might we simplify multi-scheme scanning without relying on recall?

Compare schemes in context—no back-and-forth.

Compare schemes in context—no back-and-forth.

Side Panel Scheme Switcher

Side Panel Scheme Switcher

View other active schemes’ insights without returning to the dashboard.

Multi-Layered Decision Paths

Multi-Layered Decision Paths

The design supports different personas—balancing strategic views, day-to-day tasks, and member-level data across varied workflows.

Iterative Evolution (#1)

High-value actions require immediate visibility, so these CTAs were moved to the header area, also avoiding unnecessary scrolling on smaller window sizes.

High-value actions require immediate visibility, so these CTAs were moved to the header area, also avoiding unnecessary scrolling on smaller window sizes.

Before

After

Iterative Evolution (#2)

🤔 How might we guide users to act on NIC insights—not just view them—so it prompts confident decisions?

🤔 How might we guide users to act on NIC insights—not just view them—so it prompts confident decisions?

Data as a Catalyst

Data as a Catalyst

Brought salary sacrifice insights into focus with a contextual tip card, helping employers spot untapped NIC opportunities.

Before

After

Epiphany Moment

In the legacy prototype, important updates lived across multiple screens—forcing users to revisit each page for logs.

In the legacy prototype, important updates lived across multiple screens—forcing users to revisit each page for logs.

✦ “Activities” Paradigm

Centralize all event history in one place

🤔 How might we help users act fast while keeping a clean record—without overwhelming dashboard view?

🤔 How might we help users act fast while keeping a clean record—without overwhelming dashboard view?

Reduced Fragmentation

Reduced Fragmentation

Users no longer need to hunt for confirmations in obscure submenus—Activities offers an accessible feed of everything.

Confidence Boost

Confidence Boost

Once an action is done, it instantly appears in Activities, assuring the user that the system registered the change.

Screenshot of Activities Pop-up

Screenshot of Activities Pop-up

✦ Activities

Taxonomy for Clarity & Control

Process

Process

I inventoried (Audit & Categorization) all possible actions, grouping them into six intuitive categories:

‘Activities’ filters

Screenshot of the initial MVP

‘Activities’ filters

Activity Anatomy

Activity Anatomy

Iconography & Hierarchy

Iconography & Hierarchy

Thoughtfully curated semantic icons and consistent labeling make scanning quick and intuitive.

User Control

User Control

A structured feed with intuitive & user-centered filters keeps updates clear.

Activity Context Layers

Activity Context Layers

Activity Attention Mapping

Activity Attention Mapping

✦ Activities Design Critique

Iterative Refinement

Design Critique Insights

Design Critique Insights

#1

#1

Proximity & Accessibility

Proximity & Accessibility

Initially, filters and preferences were only accessible in full-screen Activities, forcing extra steps.

#2

#2

Nielsen’s 6th Heuristic

Nielsen’s 6th Heuristic

For quick controls, icon + text created unnecessary cognitive friction; we missed the opportunity to use simpler inline hints for faster recognition.

Before

Key Adjustments

Contextual Quick Filters

Contextual Quick Filters

Let users filter immediately—no need to expand to main-page & come back. Saves at least two clicks for quick tasks or searches.

Inline Activity Preferences

Inline Activity Preferences

Activity preferences are accessible from the popup, enabling users to disable alerts or refine categories without needing to go to the Activity main page.

Before

After

Activities Full-Screen

Activities Full-Screen

✦ Closing

Next Steps

🤞

🤞

Post-Launch Scalability

Post-Launch Scalability

Future-proof UI for UK auto-enrolment changes without technical debt

🤞

🤞

Data Analytics Strategy

Data Analytics Strategy

Partner with data engineering to implement KPI tracking and measurement frameworks

Learnings & Reflections

Learnings & Reflections

#1

#1

Holistic Design Wins

Holistic Design Wins

Balancing compliance urgency with forward-looking strategy meant mastering multi-layered workflows.

#2

#2

Crits as Rocket Fuel

Crits as Rocket Fuel

Iterative design critiques weren’t just polish—they shaped the product’s core experience.

#3

#3

Prepare for Growth

Prepare for Growth

Taking a functionality-only prototype to market-ready tool proved how thoughtful design drives go-to-market momentum.

#4

#4

Iterative > Perfect

Iterative > Perfect

Proxy user research combined with heuristic audits can fuel rapid iteration in lean environments.

Back to Top

Back to Top

Create a free website with Framer, the website builder loved by startups, designers and agencies.