The platform was designed to help accountants and auditors efficiently analyze client data for auditing and tax reporting. It offered tools for data cleansing, financial analytics, and automated account mapping, addressing the high complexity and accuracy demands of financial professionals working under tight deadlines.

The application was designed for desktop though, and it needed a redesign for cloud.

Financial Platform Data Import

Background

The Challenge

Accountants often work with messy, inconsistent data from various sources, which slows down their ability to provide insights and meet reporting deadlines. Existing tools lacked flexibility, clarity, and automation - resulting in time-consuming manual processes and increased risk of error. It was also a desktop application, and needed to be rebuilt to the Cloud.

We set out to:

Increase the data import task completion rate by at least 20%
Decrease time-to-completion for the task by 50%
Reduce friction and support requests related to import by 75%
Grow our design system and build design ops
Develop a Cloud platform that featured all the tools of the desktop tool

My Role

As the Senior UX Designer, I led the end-to-end design process, from discovery to delivery. I spent a lot of time justifying the value of UX Research, since many of the team members were ex-accountants they saw no need to talk to external users.

Key responsibilities included:

User Research

Conducted interviews and contextual inquiries with auditors and accountants to deeply understand their workflows and frustrations

Workshop Facilitation

Ran collaborative design workshops with stakeholders to co-create solutions and align on priorities

Analysis & Insights

Mapped findings to key user journeys and identified priority pain points and opportunity areas

Prototyping & Design

Created wireframes and interactive prototypes to explore design directions and validate workflows & design system components

Heuristic Evaluation

Identified usability issues in the current user interface by systematically assessing it against established usability principles

Testing

Ran several usability tests with end users of the product to validate our assumptions and gather feedback

The Research

Problem Statement

How might we clarify the import process, increase import success and reduce failure and support calls?

When I joined, the imports team had already created a prototype which was deployed with little satisfaction from users. It was unintuitive, very strict and didn’t offer any flexibility as to where users could get their data from. It forced users to go through a process that was awkward and missing some key features that allowed successful import of the data required to run the platform. In addition, other designers were siloed in their product areas, collaboration was low.

Define Objectives

Research questions

Research methods

Expected outcomes

Determine personas

Determine stakeholders

Expected Outcomes

Gain process knowledge

Desired features

Past experiences

Create data driven culture

Eliminate manual process

Research Methods

User interviews

Interview analysis

Usability testing

Target Persona (quick details)

James Fintech is an auditor for Deloitte. His primary responsibility is importing and mapping the data used to feed the audits for his company's clients and also analyzing that data for risks, errors, fraud and anomalies.

James primarily imports business financial transactions from Excel sheets but sometimes needs to be able to import from QuickBooks and other online accounting platforms. James’s files are often larger than 2GB and include 30,000+ records.

Influences

Business goals

Market research

Fintech industry

Needs

Easy to use tools

Fast reporting

Saving time

Pain Points

Multiple tools

Wasted time

Bad data

Several interviews with our persona type users were conducted and the results analyzed in Dovetail to identify patterns. Most users said the same thing: unintuitive UI, no error messages, too much data manipulation needed before import.

A heuristic evaluation of the current product turned up several issues: inconsistent components and page branding, lack of error messaging that made sense to the uses and unintuitive flow through the product.

In addition, a competitive analysis was done to attempt to gain market insights and learn what our competitors might be up to.

Brainstorming

We set up several brainstorming sessions with the team and using the research results, reviewed the motivations, touchpoints and emotions of the existing user journey.

The workshops allowed the team to co-create the solution, gather stakeholder feedback and align on priorities while making sure the business goals were aligned with the user needs.

User Journey Map

I facilitated this workshop using Miro to analyze the research findings, align the team on user pain points and opportunities and raise awareness of the value of UX activities. This also helped us to determine the stages or steps in the experience and touch points.

Participants were: design, product, engineering, subject matter experts.

01

Users didn’t understand which file types were supported

02

Errors weren’t clearly explained, causing confusion

03

There was no visual confirmation of progress or success

The Design

Design Approach

To address the issues, I collaborated with product and engineering to map out the current flow, then redesigned it based on both user needs and backend requirements:

Created user flows that reflected real-world steps and highlighted technical dependencies
Added validation patterns to catch common errors early
Introduced progress indicators and tooltips
Designed a clear confirmation screen with next steps
Added visual cues for error states
Utilized current design system components and added new ones when appropriate.
I reduced visual noise on the summary screen by grouping related content and simplifying the color palette, which made key actions 30% easier to find (based on usability testing)

User Flows

We used Figma to create the user flows which map out the user's steps to complete the import. This helped us understand the logical sequence of actions and ensured the experience is clear, efficient, and aligned with user goals. The engineers had some valuable insights into the process so we ended up making a few changes to the flow due to the way data is processed.

Participants were: design, product, engineering, subject matter experts.

Prototype and Design Rationale - Figma file

I then created a high fidelity prototype using Figma and since we had our design system in place, most of the components with baked in accessibility were already created in addition to our overall brand and design guideline which I followed. The step component for the wizard was new and along the way we created a voice and tone guideline for our personas which was used to improve the error messaging, and altered the button text style based on some user feedback from the usability test phase of this prototype.

Meeting with product and engineering, we broke the project down into sprints and I created a separate Figma page for each user story which contained all the edge case designs and empty states.

Figma Interactions

Included in this screen shot are the interactions shown in Prototype Mode in Figma. They illustrate the interactions including triggers and navigation type designed to make this prototype feel as real as possible. The design system provides variants of each component used to design such things as button states etc.

This was very helpful in testing the interactions and communicating intent to stakeholders and engineers. It bridges the gap between static design and live experience and ensures the design is easy to understand.

Final Design

Import Landing Page

User chooses the location of the data or uploads a file.

This screen used to be a collection of different coloured buttons with no informative text.

By simplifying the screen and grouping the options into a table, users are able to quickly find their import method. the text is brief but informative.

The redesign included proper colours and fonts to match our design system and the use of our data list table.

The Wizard

Step Indicators (Circles with Numbers)

Shape

Uniform circular buttons help create visual consistency and suggest progression.

Color Coding

Filled Blue Circles (Steps 1 & 2): Indicate completed or current steps.

Outlined Circle (Step 3): Indicates current step (in-progress).

Grey Circle (Step 4): Represents an upcoming step - disabled or not yet reached.

Contrast

Blue stands out against the light gray background, improving visual clarity and focus.

Typography

Step Labels: ("Select Source", "Connect", etc.) use clear, legible sans-serif text.

Font Weight: Medium/regular to avoid drawing attention away from the numbers, which are more prominent.

Line Connectors Horizontal Lines: Visually link the steps and indicate flow.

Color: Follows the state of the steps:

Blue lines connect completed steps.

Gray lines lead to upcoming steps.

Hierarchy & Spacing

Numbered steps are visually prioritized via size, color, and central position in circles.

Labels below provide contextual clarity but are secondary in the hierarchy.

Consistent spacing between elements keeps the UI balanced and scannable.

Design Purpose of These Elements

Guidance: Helps users understand their progress in a task.

Affordance: Users know what’s been completed, what’s next, and what’s ahead.

Clarity: Color and shape differentiate states without relying on text alone (a11y-friendly).

Minimalism: Clean, flat design avoids distraction - useful in data-heavy workflows like imports.

Next Steps

The design was broken down into 4 phases, and 2 week sprints were planned for a duration of about 10 months.
An extended roadmap of 24 months was also created to allow for out of scope features we planned to add later.
I worked closely with the engineering team during this time to design last minute edge cases and updates to the design system to support their work.
I also worked closely with product during this time to plan the upcoming releases and monitor Pendo in the app.

Some Key Achievements

Designed intuitive workflows for importing and cleaning complex financial data giving users 80% of their desired features.
Improved the messaging to the users therefore reducing support calls by 50%.
Reduced time spent on manual account mapping through intelligent automation features by 50%.
Improved transparency in analytics tools, enabling faster, more confident decisions.
Created a scalable design system to ensure consistency and accelerate future development by 35%.
Received positive feedback from pilot users on the improved clarity and reduced cognitive load in the platform improving our SUS score to 86%.
Increased awareness of the value of UX and accessibility in the company, UX now included in planning and strategy.
Improved UX processes and advocated for user-centered design adoption, resulting in a 35% reduction in design iteration cycles and a 25% increase in overall product satisfaction.
Mentored and managed 4 co-op students, providing guidance on design principles and user research methodologies, leading to a 50% improvement in their project outcomes and enhanced team collaboration.

Outcome & Impact

Key Performance Indicators (KPIs)

40% decrease in user confusion during import.
Fewer engineering escalations related to import errors.
Faster average time to task completion.
+50 import types.
+1200 new licenses (revenue increase).
-50% support calls about import.

Objectives and Key Results (OKRs)

Improve Software Usability Score (SUS) by 30%.
Identify features for further enhancement.

Reflection

This project reinforced the importance of designing for complexity without overwhelming users. By focusing on real-world workflows and involving users early and often, we were able to build a platform that feels powerful yet approachable - a critical balance in the finance industry.