HJBDesign

Introduction

Overview

Working with the Financial Operations team, I designed a new Re-Direct Debit import process, to help save time, simplify & improve the overall user experience for an everyday long-winded and tedious process. This design has now been implemented, saving the team an hour per day, allowing issues to be spotted & addressed early on, and has received strong praise for being beginner friendly and intuitive.

Throughout the project, I also received mentorship from the UX lead in weekly catch-up meetings, where we discussed my ideas and designs from the previous week, discussed general UX best practises and I gained the opportunity to present and discuss my work with the wider UX team.

Client

Financial Operations (FinOps) Team

Role

Product Designer

Duration

4 Weeks

Before

After

Before

After

Eclipse's current Re-DD process mapped onto the new Re-DD Upload screen, showcasing the ability to apply multiple Re-DDs at once, the reduction in clicks & screen swaps needed and the overall simplification of the process.

Summary

The Path to Efficiency

Over the last few months, I have worked with the financial operations team to understand and improve the internal finance system used for customer detail and invoicing. I currently keep a log of user pain points and address the issues listed by redesigning features or creating new ones from scratch.

In this project, I will showcase the research, process and designs I have created for a new Re-DD import process. This new process is faster, removes repetitiveness and is an overall big quality of life improvement. It also allows for real-time error checking, a feature that wasn't available previously.

Problems

Team members are spending 15 minutes per day completing Re-DDs due to navigation inefficiencies (1.5 hours per day).

Team members are spending 15 minutes per day completing Re-DDs due to navigation inefficiencies (1.5 hours per day).

Team members are spending 15 minutes per day completing Re-DDs due to navigation inefficiencies (1.5 hours per day).

No warnings for errors or duplicates for manual added Re-DDs.

No warnings for errors or duplicates for manual added Re-DDs.

No warnings for errors or duplicates for manual added Re-DDs.

Searching for the next customer is tedious due to there being no search bar on the customer screens.

Searching for the next customer is tedious due to there being no search bar on the customer screens.

Searching for the next customer is tedious due to there being no search bar on the customer screens.

The number of screen swaps between customer pages leads to long loading times.

The number of screen swaps between customer pages leads to long loading times.

The number of screen swaps between customer pages leads to long loading times.

Goals

Implement an import to reduce the completion time of any number of Re-DDs down to 1 minute per person.

Implement an import to reduce the completion time of any number of Re-DDs down to 1 minute per person.

Implement an import to reduce the completion time of any number of Re-DDs down to 1 minute per person.

Improve the current site navigation, removing the back-and-forth between customer accounts, reducing the number of clicks.

Improve the current site navigation, removing the back-and-forth between customer accounts, reducing the number of clicks.

Improve the current site navigation, removing the back-and-forth between customer accounts, reducing the number of clicks.

Eclipse is slow with long loading times between screens, so reducing screen swapping is essential.

Eclipse is slow with long loading times between screens, so reducing screen swapping is essential.

Eclipse is slow with long loading times between screens, so reducing screen swapping is essential.

Results

The import allows one person to complete the while team's Re-DDs in within 1 minute.

The import allows one person to complete the while team's Re-DDs in within 1 minute.

The import allows one person to complete the while team's Re-DDs in within 1 minute.

The new import process removes the repeated navigation and reduces the number of clicks to 8 from 109 (for 10 Re-DDs).

The new import process removes the repeated navigation and reduces the number of clicks to 8 from 109 (for 10 Re-DDs).

The new import process removes the repeated navigation and reduces the number of clicks to 8 from 109 (for 10 Re-DDs).

Import includes a status column to display errors and duplicates for easy identification.

Import includes a status column to display errors and duplicates for easy identification.

Import includes a status column to display errors and duplicates for easy identification.

Received strong positive feedback from senior finance stakeholders, with opportunity to extend the project.

Received strong positive feedback from senior finance stakeholders, with opportunity to extend the project.

Received strong positive feedback from senior finance stakeholders, with opportunity to extend the project.

Setup

Pitching The Idea

Eclipse is an internal finance system that is used daily by every finance team for everything from finding customer details, generating direct debits and running reports. Being a member of the Financial Operations team, I often hear complaints about the system firsthand and decided that I could help to improve the system by redesigning some old features and creating new ones.

After pitching the idea and potential benefits to my manager and director, I gained approval to work on this project, starting with the Financial Operations team’s pain points.

User Research

Uncharted Territory

To start, I created an issue log that each member of the Financial Operations team can add their issues to.

After a few issues had been added, I followed up with each team member in a one-to-one meeting, discussing the problems they had listed in more detail and gaining more information about their Eclipse usage and issue frequency.

Problem Statement

From the inteviews, I found that the method of processing Re-DDs was a frequent complaint amongst the FinOps team. The time taken to add Re-DDs to customer accounts was long, and when coupled with the tedious navigation, the task felt repetitive and clunky. This led to the following problem statement:

The members of the FinOps team need a faster, and more intuitive way to create new Re-DD records, as they are currently faced with slow loading times, unclear & long-winded navigation and an overall repetitive process.

Quantifing The Problem

I also wanted to quantify the timing of this process and so I timed myself as an experienced test subject and one of my new colleagues as a new starter with less experience. As repetitive navigation was also mentioned, I also counted the number of clicks the process requires.

⏰ Timing: Harry

00:48 to process 1
07:14 to process 10

00:48 to process 1
07:14 to process 10

⏰ Timing: Rheanna

01:22 to process 1
12:08 to process 10

01:22 to process 1
12:08 to process 10

👆 Number of Clicks

10 to process 1
109 to process 10

10 to process 1
109 to process 10

⏰ Timing: Harry

00:48 to process 1
07:14 to process 10

⏰ Timing: Rheanna

01:22 to process 1
12:08 to process 10

👆 Number of Clicks

10 to process 1
109 to process 10

Goals

#1

Reduce the total time taken to process large numbers of Re-DDs

The new solution should eliminate repetitive actions and navigation to reduce the completion time for any number of Re-DDs down to 1 minute per person (the approximate time taken to complete 1 Re-DD using the old method).

#2

Reduce the number of clicks needed across the full process

The new solution should remove a lot of the complexity from the existing process, making the process more intuitive, less tedious and easier to use for new users. This can be measured by comparing the number of clicks used in the solution compared to the original process.

#3

Remove the back and forth navigation of the current process

The current process involves to much back and forth in the form of drilling in and out of customer profiles. This needs to reworked to reduce the number of occurrences. Swapping between screens also involves long loading times and so should be minimised.

#4

Make the process more user friendly for new / inexperienced team members

The current system has long-winded and unituitive navigation, where buttons and menus are not always labelled well. This is true for the Re-DD screens and can make it difficult for new and inexperienced users to pick up the process. This will need to be tidied up with the new process.

Ideation

Avoiding The Scenic Route

Based on the goals outlined above, I started to come up with ideas for how these might be solved.

Discussing these ideas with the FinOps and UX teams, I bounced ideas and gained feeback on potential solutions.

This was invaluable for narrowing down ideas, ensuring user needs were met, and gave insight into the development and implementation process.

After the meetings, I settled on creating a new process: a mass Re-DD import.

Based on the goals outlined above, I started to come up with ideas for how these might be solved.

I discussed these ideas with members of the FinOps team to gain their feedback, and also with the UX team, where we bounced ideas and potential solutions between each other.

These discussions proved invaluable for narrowing down design ideas, ensuring the ideas were creating what the users needed, and gave me greater insight into how my ideas might be implemented from a development point of view.

After the meetings, I settled on creating a new process: a mass Re-DD import.

Based on the goals outlined above, I started to come up with ideas for how these might be solved.

I discussed these ideas with members of the FinOps team to gain their feedback, and also with the UX team, where we bounced ideas and potential solutions between each other.

After the meetings, I settled on creating a new process: a mass Re-DD import.

Edge Cases

#1

What happens if there is an entry in the import file that cannot be processed?

If the import file contains a data error such as an incorrect customer ID or a negative value, there needs to be a warning so that the user will notice it. The user should be able to override the warning if the data is actually fine, but should also be able to exclude this line when creating the new Re-DD records.

If the import file contains data errors such as an incorrect customer ID or a negative value, there needs to be a warning so that the user will notice it. The user should be able to override the warning if the data is actually fine, but should also be able to exclude this line when creating the new Re-DD records.

#2

What happens if there is a duplicate within the import file?

If the import file contains a duplicated row, there should be a duplicate message to warn the user of this. The duplicate should be able to be reviewed and overridden, as the duplicate might actually be correct.

User Flows

To visualise how this import would work, I mapped out the existing Re-DD process and how I would like the new process to function. I then presented these user flows to the FinOps team and using their feedback, confirmed that the mass import process would be suitable in terms of time saving, intuitiveness, reducing clicks & screen swaps and allowing for frequent error checking. This process can be seen below compared with the original processes.

To visualise how this import would work, I mapped out the existing Re-DD process and how I would like the new process to function.

I presented these user flows to the FinOps team and using their feedback, confirmed that the mass import process would be suitable in terms of time saving, intuitiveness, reducing clicks & screen swaps and allowing for frequent error checking. This process can be seen below compared with the original processes.

New Re-DD Mass Import Process

Old Re-DD Record Creation Process

Old Re-DD Error Management & Deletion Process

Design

The Easy Import

Throughout the design phase, I conducted regular user testing with the FinOps team, and consulted with the UX lead in weekly mentoring and discussion meetings. These meetings also included presenting my work to the wider UX team and discussing my ideas and designs with them. This allowed me to spot pain points within my designs, learn best practises, and encouraged me to think about multiple solutions and ideas, discovering the benefits and drawbacks of each.

Throughout the design phase, I conducted regular user testing with the FinOps team, and consulted with the UX lead in weekly mentoring and discussion meetings.

These meetings also included presenting my work to the wider UX team and discussing my ideas and designs with them. This allowed me to spot pain points within my designs, learn best practises, and encouraged me to think about multiple solutions and ideas, discovering the benefits and drawbacks of each.

Uploading

Upload a new Re-DD file ready for processing.

Design

A simple and familiar file upload section with a tabular viewing area below to display the uploaded data.

UX Psychology

Chunking: A visually distinct group structure for each step helps users find the intended workflow order.

Reconciling

Check for duplicates and errors before final submission.

Design

Important information can be reviewed and the status column can alert to errors. Expanding this gives more information and allows overwrites.

UX Psychology

Error Heuristics: To ensure accuracy, users are asked to confirm processing. This is ticked by default for entries without issues.

Proximity and Similarity: Displaying rows of data together emphasises they are related, improving efficiency.

Creating New Records

Submit you're file and create new Direct Debit records.

Design

Upon pressing 'Create Records', the user is given a final chance to review any overwritten errors before creating the new Direct Debit records.

UX Psychology

Usability: Including a search bar helps navigation in the case there are many errors or duplicates to review.

Simplicity: The confirmation screen has no visual clutter, allowing the user to clearly review their decision.

History

View, edit or delete your submission history.

Design

Viewing historic uploads here allows amendments to be made without having to search through customer accounts one-by-one.

UX Psychology

Consistency: Other features of Eclipse make use of the tabular history structure, making this a familiar process for users.

Cognative Load: These tables contain lots of data so I have given them space to breath. This reduces the need for memorisation and improves readability when reviewing.

Results

The Statistics

Number Of Clicks

Before: 109 for 10 Re-DDs.
After: 8 for 10 Re-DDs.

The navigation required and process complexity have both been reduced by having everything in one place, leading to a faster and simpler experience.

Before: 109 for 10 Re-DDs.
After: 8 for 10 Re-DDs.

The navigation required and process complexity have both been reduced by having everything in one place, leading to a faster and simpler experience.

Before: 109 for 10 Re-DDs.
After: 8 for 10 Re-DDs.

The navigation required and process complexity have both been reduced by having everything in one place, leading to a faster and simpler experience.

Time Taken

Time Taken aa

Time Taken

Before: 10 minutes for 10.
After: 1 minute for any number.

Being able to process all the Re-DDs in one go coupled with the reduction in navigation massively reduces the total time taken each day.

Before: 10 minutes for 10.
After: 1 minute for any number.

Being able to process all the Re-DDs in one go coupled with the reduction in navigation massively reduces the total time taken each day.

Before: 10 minutes for 10.
After: 1 minute for any number.

Being able to process all the Re-DDs in one go coupled with the reduction in navigation massively reduces the total time taken each day.

User Commitment

Before: 8 people per day.
After: 1 person per day.

The import can be used for any number of Re-DDs across all entities so only just one team member can complete the entire team's Re-DDs in one go, saving an hour per day.

Before: 8 people per day.
After: 1 person per day.

The import can be used for any number of Re-DDs across all entities so only just one team member can complete the entire team's Re-DDs in one go, saving an hour per day.

Before: 8 people per day.
After: 1 person per day. aa

The import can be used for any number of Re-DDs across all entities so only just one team member can complete the entire team's Re-DDs in one go, saving an hour per day.

Extra Results

The status column displaying errors and duplicates has proved useful for inexperienced team members, allowing them to feel confident that what they are importing is correct.
I received strong positive feedback from senior stakeholders and my head of department, and have been given the opportunity to extend the project to the wider finance group. This project contributed towards me being the first recipient of the Financial Operations Employee of the Quarter award.
The interactive prototypes I made are now being used as a training tool for new starters. This allows them to become familiar with some of Eclipse's uses, navigation and processes, in a safe environment. It also allows team member's to practice new processes which is useful for cover work.

The status column displaying errors and duplicates has proved useful for inexperienced team members, allowing them to feel confident that what they are importing is correct.
I received strong positive feedback from senior stakeholders and my head of department, and have been given the opportunity to extend the project to the wider finance group. This project contributed towards me being the first recipient of the Financial Operations Employee of the Quarter award.
The interactive prototypes I made are now being used as a training tool for new starters. This allows them to become familiar with some of Eclipse's uses, navigation and processes, in a safe environment. It also allows team member's to practice new processes which is useful for cover work.

The status column displaying errors and duplicates has proved useful for inexperienced team members, allowing them to feel confident that what they are importing is correct.
I received strong positive feedback from senior stakeholders and my head of department, and have been given the opportunity to extend the project to the wider finance group. This project contributed towards me being the first recipient of the Financial Operations Employee of the Quarter award.
The interactive prototypes I made are now being used as a training tool for new starters. This allows them to become familiar with some of Eclipse's uses, navigation and processes, in a safe environment. It also allows team member's to practice new processes which is useful for cover work.

Review

What I Learned

User
Testing:

User Testing:

User
Testing:

This project had a strong emphasis on repeat testing with the FinOps team and I learned how valuable this can be in helping direct design iterations to best tackle the problem.

Copywrite & Edge Cases:

Working with the UX team also brought to my attention the importance clear writing can have on a project, with the edge cases in particular. Showing the process to people unfamiliar with finance language allowed me view the site with the fresh perspective that a new team member would have, and allowed me to make parts of the design clearer and more user friendly.

Mentorship:

In working with and receiving mentorship from the UX lead, I learned to consider development constraints at all stages to allow for more realistic design and also lots of UX best practises, including project justification, measuring results and presenting my work to senior stakeholders.

Deadlines:

This project has also given me the chance to experience designing under a time constraint, an environment that has shown me the importance of organisation and strategy within the design field.