top of page
citi.png

Client Usage Dashboard

Responsive Web | B2B | Data Visualization | Finance

The dashboard helps each associate track client usage data for a new insurance-type financial product, reducing the complexity of data analysis and streamlining the process so they can focus more on solving the actual problems.

Problem

Citi Bank's client usage dashboard had poor user engagement and unactionable data charts due to a lack of visual hierarchy, causing users to struggle with accessing and interpreting data effectively.

My Role

User Experience Designer 

Solution & Impact

I redesigned the dashboard by implementing a clear visual and structural hierarchy, categorized data based on business KPIs, and optimized notification timing using user behavior data. This improved decision-making, increased client engagement rates, and enhanced overall user satisfaction, leading to more actionable insights and a fast decision-making time.

Scope

I joined the ICG UX team as a design contractor at Citi Bank in 2022 for 6 months. I was set to become a full-time employee after one year but left to pursue my master's degree at Northeastern University.

Deliverables

Statistical Data Analysis, Competitive Analysis,  Questionnaire Design, Interview and Survey Reports, Personas, Low & Hi-Fidelity Prototype, Quality Assurance Doc, Component Library

Team Members

2 Business Analysts, 2 product Managers, 3 Data Scientists, Head of ICG Group

Firstly, I'd to clarify the goals to ensure the future design aligns with the overall business strategy.

What's the Business Goals?

Provide actionable insights to empower marketing professionals in making strategic decisions, ultimately driving an increase in client order rate.

Who are the key personas?

users.png

Statement of Intent

"😔 I will not spend a large amount of time reviewing the information. Instead, I want a quick snapshot of what has been completed and what I should expect next. "

What’s the Problem?

Users can't easily access the data they need, leading to low usage and poor decision-making.😔

Where to Get Started?

Identify the Right Problems and Find Opportunity Space

Usability Tests + Interviews

h.png

 “It all looks the same to me 😔.”

Through a series of usability tests, we found that users feel like they're walking into a noisy room when using the dashboard, with each data point competing for attention, making it hard to distinguish between key metrics and secondary information. This directly affects their decision-making efficiency.

A clear visual hierarchy is needed to quickly identify urgent situations and take action. This insight prompted us to rethink how to visually and modularly differentiate key data from secondary data.

Problem Identified

The dashboard has an unclear Hierarchy.

1

Improve engagement rates, attract inactive customers to re-engage

3

Identify the obstacles affecting adoption rates

2

Successful Metrics

Monitor the growth in customer acquisition rates

Iteration 1 - Clear Hierarchy

1.png

1. Visual Hierarchy

To support our business objectives and make strategic decisions, I collaborated with product managers to categorize data by its impact on KPIs, using a color-coded system:

for "Urgent" (critical impact)
for "Needs Attention" (moderate impact)
for "Normal" (minimal impact)

2. Structure Hierarchy

Based on questionnaire surveys and interviews with marketing managers,  we reorganized the important supportive data to help users understand the background or reasons behind KPIs, such as historical trends or segmented data.

Key Metrics

Secondary Metrics

2 (1).png

3k

DAU

2 mins

Time On Task

😃

Usability Test

😔 4 seconds

However, multiple concurrent user requests lead to a high server load, resulting in slower response times.

The reason is because we have too many databases...

 

1. Customer database: Internal customer management system (CRM)
2. Activity and transaction database: Application Backend
3. Feedback database: Customer feedback system

Iteration 2 - Reduce Response Time

3 (1).png

1. Design Side

Display secondary data in two modules

2. Development Side

1. Use AJAX asynchronous loading for customer satisfaction data

2. Provide more servers to handle high-traffic

3. Store less frequently changing data such as NPS and CSAT in memory. But set cache expiration time to ensure data freshness within a certain time frame

1 Sec 😃

Response Time

29% 🥲

Client Engagement Rate

Thinking...

How can I better serve a business?

Interview + Focus Group

By collaborating with researchers and conducting interviews and focus group discussions with product and marketing teams internally, we can gain a deeper understanding of the specific pain points they encounter when achieving their business goals.

Insight 1 - “Lost” Metrics

The user doesn't know which step loses the most clients.

 “Why do many clients register, but few convert 😔?”

4.png

Iteration 3 - Track Metrics & Pattern

Solution

Highlight the step with the highest customer dropout rate

5 (1).png

Observation

At the same time, we discovered that they were handling data for new and existing customers separately, making it difficult to effectively measure overall marketing performance.

Analyzing both customer types is important since we can better evaluate the effectiveness of retention and acquisition efforts.

 “ Where is the trend or pattern among new and returning clients? 😔”

Iteration 4 - Evaluate Metrics More Efficient

7.png

Solution

Measure growth strategy - comparison charts

1. New Customer:
Provide data-driven insights to measure the effectiveness of marketing strategies and business growth

2. Returning Customer:
Understand loyalty and satisfaction levels

😃

3.4 - 4.4

User Satisfaction Rate

23% - 39%

Engagement Rate

26%

New Feature Adoption Rate

Keep Retrieving Feedback

We didn't stop there. To further simplify the process of tracking customer usage data for users and help them make better decisions to increase conversion rates, I asked myself: What specific pain points do users encounter when trying to increase their customers' order rates?

With these questions in mind, I conducted 5 online interviews with the primary users. I found something really interesting and hadn't been thought of before.

😔 >60%
of marketers

 “ What's the ideal time to send push notifications? 😔”

Iteration 5 -
Accelerate Decision Making

Solution

Optimal Notification Timing

To address this issue, I designed a User Active Time feature based on user behavior data, which helps marketers reach users at the best time, increasing user engagement and building stronger trust relationships.

8.png

😃

⬆️ 13%

Client engagement in marketing events jumped

Breakpoints - Max Widths

After finalizing the design with the team, I create layouts for the four most common screen sizes and resolutions.  These width ranges cover the majority of users, and these specific breakpoints help the development team standardize the development process, simplifying testing and maintenance.

Below is the responsive design template I've created; however, the content in the design has been blurred to protect privacy.

responsive.png

Outcome

The Old Version

Hard to make informed decisions. 😔

old.png
The New Version

Intuitive, Actionable. 😃

citiDesign.png

Impact

3.4 - 4.6

User Satisfaction Rate

32% - 41%

Engagement Rate

26%

New Feature Adoption Rate

😃 85.53 (great usability)

The System Usability Scale

Enhancing Agile Process Efficiency with Instructions

However, during my collaboration with the technical team, I discovered that many members faced a steep learning curve with the new component libraries.

Consequently, I authored a guide on locating and utilizing specific components in InVision, Angular, and React. This guide, with its clear visual guidance and step-by-step instructions, effectively helps users independently understand and use various development tools.

The team has reported that this guide has at least halved the time spent finding the right components, significantly enhancing overall development efficiency.

4.png

Quality Assurance

Because the team uses CSS components, I Verified UI consistency and identified layout issues. In addition, I performed CSS code reviews to ensure adherence to Angular best practices. Finally, I gathered feedback and produced a QA document for the developers.

Compatibility Testing

9.png

Light Theme Components

What Did I Learn?

Communication is Key

1

Regular communication and feedback loops with stakeholders and developers keep the team informed, foster mutual understanding, and boost work efficiency.

Data-Driven Decision Making based on testing and research

2

Data can sometimes be counterintuitive. Therefore, make design changes based on facts, not feelings.

Try to Ask Right Questions

3

Instead of asking “how to improve the data in the dashboard”, ask “what desirable outcomes users want to achieve”.

What’s Next?

Although the primary users are operations personnel, they are from different departments and have varying goals...

bottom of page