Project Overview

Dozens of spreadsheets. Thousands of transactions. Manual data entry and correction every month.  We can do better.

In five weeks, I worked with a product manager and two software engineers to design BRACE, a web application that automates the transaction data review process with scalability at heart.


* To comply with the non-disclosure agreement (NDA), dummy data are used in the design below.


Digitalize data review process

Bring the manual data review process to the digital world.


5 weeks


Enterprise application

Streamline process


Agile team







Problem Space

Prior to BRACE, FINRA uses the combination of PeopleSoft and Excel sheets to manage transaction data. It worked out well for a couple of years, yet is gradually failing to meet the needs as the business grows.  From interviews with the project manager and three direct users, I distilled three main pain points of the current workflow:

03. Outdated UI

02. Poor Scalability

01. Labor-heavy

Users have to manually enter a large number of transactions from multiple data sources into the system, which is time-consuming and prone to errors.

The company wants to integrate more client data into the system, the current workflow is not ideal for scaling.

The interface of the system looks crowded and outdated - not friendly for fast scan and slows users down while reviewing data.


PeopleSoft interface. (NOTE: It is not the exact system used by FINRA but it shares the same appearance).

As a result, the team is looking to build a system that automates the current billing data review process so we can scale as the service expands. It is why BRACE was born.


Solution Overview

There are three primary tasks users perform using BRACE

1. enter transactions

2. turn a suspended transaction into an active one by uploading supplementary information

3. review transactions, and submit for approval. Below are highlights of how BRACE facilitates each task.

01. Bulk data import

BRACE supports bulk data import from local files to automate the data entry process and save the tedious manual input.


02. One place for data management

Users used to maintain three separate Excel sheets for transforming a suspended transaction into an active one. With BRACE, users can now review all transactions, quickly access suspended transactions using filters, and complete the status transform all in one place.


03. Speed up data review

BRACE uses progressive disclosure to help users focus on the information with the highest priority. Accordions, tooltips, and modals are used to reveal more details upon request.


Requirements Gathering

01. Understand users

To better understand user needs and expectations, I conducted four 30-min interviews with 3 direct users (auditors) and the product owner. From the conversations, I distilled their needs, goals, and frustrations into two personas as below:

In short, I learned that:

  • BRACE is at the service of automating the billing data review and management process for auditors

  • The product owner envisions a standardized workflow that can be applied to 20+ business lines in the future

  • The current system is labor-heavy and is not ideal for scaling


Personas: product owner (left) and auditors (right)

02. Get to know the workflow

I had one two-hour in-depth working session with auditors to further understand the usage of the system, their pain points, and expectations. I then made a flowchart (below) to visualize the current process.


If you look at the top row of the chart, there is a big opportunity for improvement - to transform a suspended transaction into an active one, users need to jump back and forth among three Excel sheets. 

"It's just painful..."

Auditor A

Data review workflow for auditors

03. Refine the workflow

I came up with a refined workflow that streamlines the data review process, with the goal of eliminating manual effort and boosting productivity. I also validated with the product manager to make sure it is applicable for future workstreams.

Refined data review process


Design Iterations

I went through an iterative process from brainstorming, wireframing, creating high-fidelity designs, all the way to getting hand-offs ready for the dev team.

Below are two examples of how screens progress through this process.

Iteration on home page design


Iteration on data table design


Final Deliverables

01 High-fidelity mockups

02 Interactive prototype

03 Interaction map

04 InVision Inspect Tool Onboarding

01 High-fidelity mockups


Describe your image


Describe your image


Describe your image


Describe your image


03 Interaction Map



Context is KEY

Often a solution to a problem can be simple, yet the WHY behind the solution - the understanding and breakdown of the problem is the challenging and fun part. Knowing certain design principles and guidelines makes a designer good, yet thinking critically with the context in mind, knowing when to adhere to certain principles and guidelines and when not makes a designer great.

Iterate and experimenet

For enterprise applications, there can be unique uses cases that are hard to learn from Googling. however, we can experiment on different solutions and work out a version that works best for our use cases. Mastering use cases of different UI patterns, offering design alternatives and testing with users contribute to better design decisions.

Teamwork, teamwork, teamwork

I always appreciate the different perspectives other team members bring. I learn from engineers about technical boundaries and make sure my design is feasible. I get feedback from product managers on whether the design aligns with long-term business goals and how to balance various aspects when conflicts occur so the team delivers in time.  As many books advised, I also found it super helpful to engage the whole team early and often throughout the process so everyone can stay in sync and offer timely feedback.