Cash Data Management System

 As a UX Design Intern at State Street Global Services, I designed the Cash Data Management Platform, an internal software that aims to streamline the data governance workflow among Business Analysts and Engineers in order to bring them the most efficient experience. As the only designer on the agile team, I was responsible for end-to-end UX design efforts to develop the MVP from concept to deployment. The software was launched in October 2019.

Increase Work Efficiency

Bridge Communication Gap

Maintain Project Consistency

Cash Data 

Management System

Jun-Aug 2019 (10 weeks)


UX Designer | 6 people 

(1 Designer, 2 Product Owners & 3 Engineers)


Internship for 2019 summer

Product Type

Backend Web Application (Internal tool)

My role

UX/UI design, User Research

Current status

Launched in October 2019









Literature Review
User Interviews
Focus Group
Use Cases Study
Problem statement
User pain points
Feature narrative
Design principles
Journey map UX flow
Information Architecture
Low & High-fidelity wireframes
Interactive prototypes
Stakeholder reviews
Field testing
Designer critiques
Extended From 
Design System
Detail fixings

Business Context

Story Happened at the Backend

State Street is an American financial service and bank holding company. The complexity of siloed cash data landscapes creates huge management challenges. Business Analysts and Engineers at State Street were building a data warehouse to manage the data.

Take a Peek of the Problem

However, using Excel to conduct data governance is really time-consuming and error-prone. Both Business Analysts and Developers struggled a lot due to the synchronize issues, inefficient workflow, and operation method.

  Click To See Current Problems  

20+ Spreadsheets in One Excel File

Business Goal

Streamline the workflow of data warehouse building across different teams and improve efficiency for data management.

Define the MVP Scope

Requirements From Product Owners

Product Owners proposed 3 functional requirements for the cash data management system: data editing, data mapping, and data lineage. Data editing and data mapping are existing features in excel, while data lineage is a new feature to help track errors in the system.

Data Editing

create, edit, and delete Data 

Data Mapping

 create data element mappings between tables

Data Lineage

 data's origins and where it moves over time

User Research & Analysis and Synthesis

I collaborated with product owners to conduct one design workshop to spread design thinking and let Business Analysts and Engineers build their own Personas and draw their workflow of the data management to get first-hand data. Then I conduct 12 in-person user interviews with Business Analysts and Engineers and 2 focus groups to form a complete understanding of their workflow and pain points in the context.


user interviews


focus groups


design workshop

I analyzed and synthesized the research results into four levels: Content, Function, Coordination, and Project.

Content level: poor legibility and readability

Function level: poor operability and system status' visibility

Coordination level: unclear responsibility and accountability, sync issues, and isolated & poorly functioning workflow

Project level: poor reliability, maintainability, and scalability



Initiate the New Feature: Overview Page

Data editing, data mapping, and data lineage features can solve most of the problems we discovered in the user research. However, during the research, I learned about the loss State Street suffered two months ago which is also the root cause of this project.

We suffered a huge loss two months ago and we spent lots of effort to make up for it. Someone mass edited the data in the system and we don't know who did these. Even worse, there is no way to recover the previous version.

Data editing, data mapping, and data lineage these three functional features can help increase the operating efficiency on the platform. But the communication gap across teams is also detrimental to productivity and caused lots of delays.  Considering the effort/impact scale, I think this is an important feature to be included in our MVP scope.

Define the Design Scope

The data management platform contains four main pages:

Data Pagecreate, edit, and delete Data 

Mapping page: create data element mappings between tables

Lineage page: display data's lifecycle like  data's origins and where it moves over time

Overview pageshow all the changes that happened in the system

​Considering desirability, urgency, viability, and Effort/Impact scale, instead of realizing all the data editing features like Excel, we would like to let Business Analysts to do the basic data editing in Excel and then import all the tables into the platform as a tentative approach.  So our main focus is the other three functions: mapping, lineage, and overview.

Data Page

create, edit, and delete Data 

Mapping Page

 create data element mappings between tables

Lineage Page

 data's origins and where it moves over time

Overview Page

show all the changes happened in the system

Prioritize Insights to Reframe the Project Goal

Our team is commissioned to simplifying the process. Based on the findings from 12 interviews with staff across the organization, we defined the design goals as follows:

  • Reduce the effort in data mapping and increase the efficiency for writing and viewing

  • Bridge the communication gap among BAs and ENGs 

  • Empower BAs and ENGs be more proactive in maintaining the project consistency

Increase Work Efficiency

Bridge Communication Gap

Maintain Project Consistency

Data Mapping Page

Draw lines between tables
For efficient Data Mapping


01. Understand Business Analysts' work

Data Mapping is to identify the relationship between target elements and source elements, then build relationships. Data transformation is to define the relationship identified in the data mapping session.

Data Mapping


Building the Relationship

Data Transformation 


Defining the Relationship

02. Best Approach to Conduct Data Mapping

Business Analysts need to conduct the data mapping between two tables and each table contains 20- 200 + elements. There are three ways to conduct data mapping: Dropdown, Draw lines, and Drag & Drop.


Engineers' Recommendation

Draw lines

✓ Final Solution

Drag & Drop


Engineers strongly recommend the dropdown approach for minimal development efforts and best readability.

After testing:

  • Scroll issues

    • If the mouse cursor is outside of the drop-down, users will most likely scroll down the page instead of the drop-down, hiding the drop-down options from the screen.

  • Lack of overview

    Overwhelming numbers of options can be bewildering and intimidating

    • Hard to navigate

  • Inconsistent UI

    Cause friction with other information

    • Introduce unnecessary friction into the checkout process by hiding information that could simply have been exposed.

version 1

version 2

However, from the usability testing, we found out that the mapping efficiency is lowered for scrolling up and down frequently to find the hidden elements out of the window. Also, Business Analysts rarely check the attributes of the elements when doing the mapping. Business Analysts don't need to learn everything to conduct the operation. Attributes are the secondary information that can be progressively disclosed later.  

For data mapping:Source table + Target table, Name of the elements 

For data transformation:Source table + Target table, Name of the elements, Attributes, Transformation Panel 

Hover to view what Information is needed for 

Since most BAs and ENGs at State Street are still using old windows computers with relatively square screens. So I put the transformation panel at the bottom.

I need to see more elements on one screen. I don't need to see attributes all the time.

Data Transformation

Data Mapping

Name of elements


Name of elements


03. Drilling down to the finest details

For better accessibility, I conducted A/B testing for multiple versions and came up with the final version as below.:

  • Different line styles to differentiate the strong or weak relationships

  • Letter "M" to indicate a successful mapping

  • Optimal color contrast ratio

Solid line — a strong relationship

Dashed line —  a weak relationship

Greyline — Hidden relationship

Final Design

Select target and source data
Name of the Table
Hidden Transformation Panel
Successfully Mapped
Transformation Panel
Hidden Mapping
Dashed line to indicate a weak relationship
Expand for additional information when  making transformation rules
Checkbox to replace typing

Overview Page

Intuitive Visualization 
To bridge the Communication Gaps


01. Understand Current Work Flow

To maintain the project consistency we need to get business analysts and engineers informed of the changes made in the platform and the problems need to be solved in the current agile life cycle. There are four dimensions that need to be shown on the overview page essential to learn about who made how many changes, where and when these changes were made.




How many

02. Intuitive Visualization of Multi-dimension Data

After exploration,  I  come up with prototypes that take advantage of the heatmap and bitmap.  Use X-Axis to indicate the changes., Y-Axis to indicate the location of the changes. And introduce the third dimension color or size to indicate the number of changes. For the secondary level information, I used the tooltip for progressive disclosure to show who made the changes.​

OPTION 1:  Heat Map


  • Easy to track to the right location or date

  • Exist in the current design system

  • Show both changes & comments 


  • Grey background caused some visual noise but also help with eye-tracking

  •  Numbers of the change are not obvious

OPTION2:  Bit Map


  • Easy to locate the changes

  • Easy to read the information about numbers: displayed in both size and color


  • Cause friction during eye-tracking for the irregular size of the circles

  •  Hard to select for some circles are too small

Problems Solved in different levels

There is inconsistency in different levels: from attributes to elements, to iterative spreadsheets, to version control, to accountability of Business Analysts, to the collaboration between Business Analysts and Developers and etc..

  • Unclear information hierarchy between elements and attributes. 

  • Uninformed changes out of expectation & Require large efforts to tell the difference. 

  • Ambiguous responsibility & accountability. 

  • Feel disconnected from each other. 

  • Unclarity & Inconsistency

    • Elements —— attributes
    • Elements —— elements

    • Elements —— files

    • Files —— BAs

    • BAs—— BAs

    • BAs —— ENGs

When I left the team, the software was still in development. In October 2019, this internal software has been successfully shipped and I received positive feedback from our stakeholders and they would like to promote to other teams at state street.

We would like to recommend it to other BAs teams in State Street.
It’s really important to get real-time feedback in agile!  We can see the close connection with BAs in the future


Test Often, Be Bold

Real-time feedback is critical in agile development. Communicate with them directly when in doubt. Have instant feedback, using feedback to make the most informed decisions, and iterate on the employee experience quickly. 

Get Comfortable Working with Ambiguities

There are many times when I can't get feedback from seniors and users at any time.  It's important to have the ability to iterate on your own and constantly criticize your design from different dimensions.


Contextual design helps create an immersion experience and buy-in in an agile environment.  Working with empathy data: consolidate the low-level detailed data and present it in models that can be easily consumed by teams. It's a great way to make the message sticky, foster empathy amongst stakeholders, and invoke the desire to make changes.

View Other Projects !




© 2020  by  Scarlett  Wu - All rights reserved.