Design For

Overview Page

1 week


UX Designer | 6 people 

(2 Product Owners & 3 Engineers)


Background Story

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 cash data. However, using Excel to conduct data governance is really time-consuming and error-prone. 

In this project, we would like to streamline the workflow among Business Analysts and Engineers and provide a seamless experience for Business Analysts to possess data management.

What is Current Workflow Like?

Business Analysts work on Excel files individually and hold group meetings to resolve current iteration problems. When Business Analysts finished this iteration, they will send the latest version to Engineers to build and update the data warehouse. 

Dig Into Stakeholders Needs

We have three kinds of stakeholders in this project. BAs and ENGs use the system for day to day work, while managers use the system to check in biweekly.

Stakeholders' Pain Points

Engineers look at the documentation to

Build & Update data warehouse

However, just like it is so hard to read others' codes, the excel file looks like a puzzle to developers with various marks which can only be understood by the owners. Even Business Analysts themselves consider this is confusing.

They tried different methods like colorful marks, strike through wors to solve synchronize issues. However, it's still hard to maintain the project consistency and realize the version control. And they feel so disconnected with each other.


Design Goal

Maintain the project  CONSISTENCY  across teams?

Display the right data in the right way

To maintain the project consistency across teams we need to get business analysts and engineers informed of the changes made in the platform and the problem need to be solved with the 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

Problems users want to get answered step by step 

To define the importance of the information. I used the problems users would like to be answered and the frequency of use to navigate the whole flow of progressive disclosure. 

Prob 1: Any new changes/problems in the system?



How many

Prob 2: Who to ask to help?


Prob 3: Check-in progress - History data

Design Principle




Multi-dimension Data Visualization

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 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

Final Design

Agile development life cycle —— 2 weeks
Made the changes & left comments
When/Where/How many

What's NEXT?

Feedbacks &


View Other Projects !




© 2020  by  Scarlett  Wu - All rights reserved.