TPT

Employer portal for pension contribution submission

Services:

UI Design

Year:

2024

Link:

tpt.org.uk

Project Summary

Project Overview

The Challenges

Design

The Results

PROJECT OVERVIEW
TPT one of the UK’s leading providers of workplace pensions. The objectives for this project was to deliver a portal that gives the employer options to manage employee contributions, history, members HR data and support.
I've joined as a UI designer to work with UX designer, Tech Lead and PM. The project involved close cooperation with the main stakeholders. The development and QA teams have been outsourced.
KEY OBJECTIVES

Key features for the TPT Employer's Portal:

- Provide a dashboard view ("bird eye view") for the employer with real-time data and reminders about upcoming events and tasks
- Manage contributions and contribution upload for employees and employers
- Option to change, review, update employee contributions
- Upload HR Data
- Add members, active members, new joiners, leavers and temporary workers
- Contribution history submission and transaction history
- Support section with templates and request forms

The Challenges

THE CHALLENGES

Simplify the process of submitting and managing employee contributions.

The existing system was limited in functionality but rich in complexity.

Provide real-time visibility into contribution status and related metrics.

The existing system did not update automatically and the users were not updated with any outstanding contributions uploads

Re-think the submission management: submitting contributions, including bulk upload options and automated validation checks.

The new solution had to be flexible to work for all type of employers, including for the employers that submit the contributions on behalf of other employers

UX

INFORMATION ARCHITECTURE

Employer's portal - just a part of the TPT applications eco-system

TPT Employer Portal was defined as being just one application part of a larger suite of TPT portals an employer has access to. The signup and login flows were therefore done prior entering the Employer Portal. The navigation has been designed very simple with just 3 levels deep. The user had always access to all other pages by using the left hand nav.

Wireframes

All user journeys have been mapped, wireframed and presented back to the stakeholders and PO for the final sign-off.

Business requirements and user needs

Real-Time Submission Tracking

Employers want to monitor the status of pension contributions in real time to ensure there are no submission errors.

Intuitive Navigation

Enable employers to efficiently manage and submit pension contributions without extensive training or technical expertise.

Bulk Upload Functionality

Users managing large employee groups need the ability to upload bulk data for multiple employees, saving time on manual input.

Automated Notifications

Employers need automatic alerts and notifications for upcoming deadlines or submission errors, reducing the risk of missed contributions.

Flexible Payment Scheduling

Employers need flexibility in scheduling pension contributions, allowing them to select payment dates that align with their payroll cycle.

Audit Trails and Reporting

Employers need detailed reports on all pension contribution activities for auditing purposes, including a history of changes and approvals.

Data Export Capability

Employers need to easily export pension contribution data to CSV or other formats for further analysis or for record-keeping.

Data Mapping

Employers need to easily import pension contribution data from CSV and cross match data between platforms

Audit Trails and Activity Logs

Users need transparency and accountability, enabling employers to track actions for internal audits and compliance verification.

Customisable Contribution Plans

Users need flexibility to accommodate diverse employee needs and organisational structures, enhancing employee satisfaction and retention.

Automated Contribution Calculations

Reduce manual errors and save time by automating complex calculation processes, ensuring accurate contribution amounts.
Problem statement
The user research highlighted the users want to be able to track any errors in the submission process so they can avoid any delays in processing the pension contributions.
Solution
After multiple iterations the approach has been chosen to offer the user the option to choose and compare multiple products and features depending on the chosen location. At any given location the user can multi-select and compare available products and services but also nearby locations that also offer Regus services
Problem statement
The user testing and analytics results highlighted that users want to be notified about upcoming submission deadlines and any issues with their pension contributions to avoid penalties.
Solution
Each time users log into the platform, they are presented with an overview dashboard displaying all upcoming events, pending submissions, and any missed deadlines related to pension contribution submissions.
The system also created an automated notification system that sends reminders to employers via email or SMS for upcoming deadlines or incomplete submissions.
Problem statement
Employers managing large workforces find manually entering pension data for each employee inefficient.
Solution
Designed a bulk upload feature that allows employers to upload pension data using pre-defined templates (e.g., CSV, Excel). The back end system performs automatic validation on the uploaded data, flagging any errors or discrepancies for correction before submission. This would save time, reduce human error, and streamline the pension contribution process for large employers.
Problem statement
Some of the Regus users are long-term customers and needed a tailored experience that catered to their business needs every time they logged in.
Solution
The strategy adopted included some of the following points:
- Geo-Targeted Content: Presenting location-specific content and recommendations, such as nearby offices or events, based on the user’s current, saved or preferred location.
- Tailored Recommendations: Used data from past interactions to recommend products and services that aligns with the user's preferences or needs.
- Saved Searches and Preferences: Allowing users to save their preferred locations, workspace types, or other filters, making it easy to resume where they left off.
- Seamless Multi-Device Experience: Ensure that personalization settings sync across devices, providing a consistent and continuous experience, whether the user is on a desktop, tablet, or smartphone.

Design system foundations: tokens and styles

DESIGN TOKENS & STYLES

The benefits of using design tokens:

Maintain a single source of truth for consistency
Improve management of a scaling design system
Remove the guesswork when building products
A more efficient handoff to the dev team

Styles

Styles were also used for gradients, multiples fills  and shadows
TYPOGRAPHY
COLOUR SCHEME

Primary colours

TPT Black
Primary
#262626
White
Primary
#FFFFFF
Navy 100
Primary
#151FD
Navy 80

Primary

#444C8A
Navy 60

Primary

#7379A7
Navy 40
Primary
#A1A5C5
Navy 20
Primary
#D0D2E2
Navy 10
Primary
#F7F8FF
Turquoise 100
Primary
#41E2BA
Turquoise 80
Primary
#67EBC8
Turquoise 60
Primary
#8DEED6
Turquoise 40
Primary
#B3F3F3
Turquoise 20
Primary
#D9F9F1

Secondary colours

The colours listed below are the secondary colours that have been used as backgrounds for call out modules or cards.
Fuschia 100
Secondary
#A51890
Fuschia 80
Secondary
#B746A6
Fuschia 60
Secondary
#C975BD
Fuschia 40
Secondary
#DBA3D3
Grey 70
Secondary
#676767
Grey 50
Secondary
#808080
Grey 40
Secondary
#B2B2B2
Grey 20
Secondary
#676767
Error Red 100
Secondary
#D91E18
Error Pink 20
Secondary
#FFEDED
Warning Yellow 100
Secondary
#FFB800
Warning Yellow 20
Secondary
#FFF5E9
Success Green 100
Secondary
#008500
Success Green 20
Secondary
#E5f9E5

Components

The results

Improved efficiency

Employers experienced a significant reduction in the time and effort required to manage employee contribution submissions.

A more streamlined process

File upload contributions and automated validation checks, lead to faster and more accurate submissions.

Enhanced visibility

Enhanced visibility: Both employers and employees gained real-time visibility into contribution status and related metrics through the dashboard's customisable overview.

Data-driven insights

Employers benefited from the dashboard's reporting and analytics capabilities, which enable them to generate insights, conduct trends analysis, and make informed decisions regarding pension contributions. This leads to better strategic planning and optimization of pension schemes.

More Work

Regus

Amarula