top of page
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 Goal?
Provide actionable insights to empower marketing professionals in making strategic decisions, ultimately driving an increase in client order rate.
Who are the key personas?
1. Proactive workflow (active)
As a user, I want to proactively track the status of login, registration, and engagement throughout the entire client conversion process.
2. Reactive workflow (passive)
As a user I have been notified of a change in status related to the KPIs
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
“When I receive a notification and check the dashboard immediately, I am unable to quickly identify which part has undergone a significant change. 😔.”
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.
Main Pain Point 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. 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
.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
.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 😔?”
Iteration 3 - Track Metrics & Pattern
Solution
Highlight the step with the highest customer dropout rate
.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
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.
😃
⬆️ 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.
Outcome
The Old Version
Hard to make informed decisions. 😔
The New Version
Intuitive, Actionable. 😃
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.
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
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