BRACE

Transaction data review made easier and faster

OVERVIEW

BRACE is part of my summer internship experience working at Financial Industry Regulatory Authority, Inc (FINRA) as a UX Designer.

 

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.

DURATION

5 weeks

KEYWORDS

Enterprise application

Streamline process

Data-heavy

Agile team

TOOLS

Balsamiq

Sketch

InVision

Principle

 
DESIGN PROCESS
 
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:

01. Labor-heavy

03. Outdated UI

02. Poor Scalability

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 transaction information, 2. transform a suspended transaction into an active one by resolving issues, 3. review transactions and submit to firms. 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 GATHERTING

01. Interview stakeholders

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. Dive-deep working session

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. As one of the auditors said: "it's just painful."  

In addition, I learned that while the system captures a certain amount of transactions, auditors still need to manually enter data into the system on a regular basis, usually every two weeks or monthly. The number of those entries can go up to hundreds, which is time-consuming and prone to error.

Data review workflow for auditors

03. Refine the workflow

After analyzing the information gathered from stakeholder interviews and the working session, 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 the refined workflow can be applied across multiple 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. In four weeks, I had regular design review meetings with a multi-disciplinary team consisting of the stakeholders mentioned above,  two engineers who would implement the design, and my design mentor. I received feedback from perspectives of business, technical feasibility, and design, which leads to further iterations, eventually, the final design.

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

Iteration on home page design

Iteration on data table design

FINAL DELIVERABLES
 

The final deliverables consist of:

  • High-fidelity mockups applying FINRA design guidelines

  • An interactive prototype on InVision demonstrating how screens are connected

  • An interactive map as a supplement for the interactive prototype

  • A walkthrough of the spec feature on InVision with the dev team

High-fidelity Mockups

Interaction Map

 
TAKEAWAYS

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.