Turning Complex Data into Clear Actionable Visuals with

Intuitive Data Driven Dashboards

Enterprise UX

B2B Saas

Data visualization

At HCL Technologies, I designed multiple enterprise-level Power BI dashboards and reports rooted in design thinking and agile methodologies, these solutions were crafted to reduce cognitive load, empower users, and drive meaningful business outcomes through thoughtful, user-centered design.

While the projects remain confidential under NDA, this case study illustrates my end-to-end design process, highlighting how I combine UX principles, data storytelling, and interactive UI design to transform complex data into intuitive, actionable insights.

Context

Microsoft Partner Ecosystem platform serves as a centralized hub for tracking partner relationships, program participation, events, performance metrics, and overall business growth, supporting internal teams in managing strategic partnerships and driving informed decisions.

Problem

The platform's overwhelming data layout and poor navigation hindered users from efficiently accessing partner insights, increasing cognitive load and slowing productivity.

Solution

Redesigned the interface using Power BI and Microsoft's design system to streamline workflows, visualize key metrics, and simplify decision-making through intuitive, user-centered interactions.

Tools

• Figma
• Excel
• PPT
• PowerBi

Team

• UX Designer
• Developers
• Project Managers
• Stakeholders Excel

Role

• Stakeholder Interviews
• Data analysis
• User Flow
• Data Visualization
• User Interactions
• Rapid Prototyping

Design Process

There’s no fixed design process that applies to every project or team. Here’s the Agile UX design thinking approach I typically follow to adapt quickly to changing requirements, collaborate closely with cross-functional teams, and iteratively deliver user-centered solutions that align with business goals.

How Might We

Reduce cognitive load and improve task efficiency

to accelerate effective and strategic business decisions.

Assessment of Current Data

The first step is evaluating the data to uncover opportunities for optimizing workflows and guiding design decisions.

Reviewing existing spreadsheets, reports, and dashboards

Mapping how data flows across teams and departments

Identifying what constitutes high-level data versus operational/ supporting data

Understanding inconsistencies and redundancies in current data/processes

Stakeholder Interviews

To ensure the design is rooted in real user needs, I begin by conducting guided interviews with stakeholders.

I use a structured template with focused questions aimed at uncovering:

User Roles

User Actions

Time Consumed

Pain Points

Motivations

Daily Reporting Challanges

Success Metrics

KPIs

Expectations

"It feels overwhelming. I often have to sift through multiple dashboards to find the data I need"

"I’m spending too much time figuring out where to look rather than using the information to make decisions."

"Navigating through the dashboard is time-consuming and I often overlook important data."

"It feels overwhelming. I often have to sift through multiple dashboards to find the data I need"

"I’m spending too much time figuring out where to look rather than using the information to make decisions."

"Navigating through the dashboard is time-consuming and I often overlook important data."

Who is using the dashboard and in what context?
What decisions or tasks are they performing using data?
What’s currently frustrating or slowing them down?
How long does it take to find or interpret insights?
What do users wish they had to improve their workflow?
What are users trying to achieve or prove with the data?
Where do users struggle most in the reporting process?
How do users define a successful dashboard experience?
Which key performance indicators matter most in their decision-making?
How often do users expect to use the dashboard, and what are their usability needs?

Defining Workflows

Information architecture is established based on the collected data, forming the foundation for intuitive dashboards aligned with business objectives.

Data workflows are created, ensuring the delivery of actionable insights to support decision-making at all levels.

The information is continuously iterated and refined through structured meetings with clients for each dashboard view.

Design of each view is informed by client feedback and iteration before finalizing the dashboard layout.

Wireframing

At this stage, wireframes are created to support the data and information architecture that acts as the blueprint for the product, allowing teams to explore structure, layout, and content hierarchy without the distraction of visual design. Each wireframe is built with a strong focus on clarity, consistency, and efficiency, ensuring that the design accommodates both high-level overviews and drill-down capabilities.

Who is using the dashboard and in what context?
What decisions or tasks are they performing using data?
What’s currently frustrating or slowing them down?
How long does it take to find or interpret insights?
What do users wish they had to improve their workflow?
What are users trying to achieve or prove with the data?
Where do users struggle most in the reporting process?
How do users define a successful dashboard experience?
Which key performance indicators matter most in their decision-making?
How often do users expect to use the dashboard, and what are their usability needs?

Color and Typography

Primary Color/ Main Font
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#092642
RGB (9,38,66)
Links
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#2059B3
RGB (32,89,179)
Gray Tones
A gray tone was applied to table elements, including borders, background fills, and secondary text to reduce visual noise and enhance scannability.
#F2F4F5
RGB (242,244,245)
E6E6E6
RGB (230,230,230)
B4B4B4
RGB (180,180,180)
A9A9A9
RGB (169,169,169)
868686
RGB (134,134,134)
4E5158
RGB
(71,81,88)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#3D6666
RGB (61,102,102)
#52B362
RGB (82,179,98)
#A5D971
RGB (165,217,113)
#4D9399
RGB
(77,147,153)
#00CCBB
RGB
(0,204,187)
#ADDECE
RGB (173,222,206)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#F95D6A
RGB (249,93,106)
#FFA600
RGB (255,166,0)
#F7E300
RGB (247,227,0)
#B3127D
RGB (179,18,125)
#D45087
RGB (212,80,135)
#F27C49
RGB (242,124,73)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#7E388C
RGB (126,56,140)
#7548B3
RGB (117,72,179)
#AF75FF
RGB (175,117,255)
#A05195
RGB
(160,81,149)
#B38FCC
RGB (179,143,204)
#E68AD6
#RGB (230,138,214)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#003F5C
RGB
(0,63,92)
#3D85EB
RGB
(61,133,235)
#73d0ff
RGB (115,208,255)
#334666
RGB
(51,70,102)
#596980
RGB
(89,105,128)
#A3BBCC
RGB (163,187,204)
Primary Color/ Main Font
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#092642
RGB (9,38,66)
Links
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#2059B3
RGB (32,89,179)
Gray Tones
A gray tone was applied to table elements, including borders, background fills, and secondary text to reduce visual noise and enhance scannability.
#F2F4F5
RGB (242,244,245)
E6E6E6
RGB (230,230,230)
B4B4B4
RGB (180,180,180)
A9A9A9
RGB (169,169,169)
868686
RGB (134,134,134)
4E5158
RGB
(71,81,88)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#3D6666
RGB (61,102,102)
#52B362
RGB (82,179,98)
#A5D971
RGB (165,217,113)
#4D9399
RGB
(77,147,153)
#00CCBB
RGB
(0,204,187)
#ADDECE
RGB (173,222,206)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#F95D6A
RGB (249,93,106)
#FFA600
RGB (255,166,0)
#F7E300
RGB (247,227,0)
#B3127D
RGB (179,18,125)
#D45087
RGB (212,80,135)
#F27C49
RGB (242,124,73)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#7E388C
RGB (126,56,140)
#7548B3
RGB (117,72,179)
#AF75FF
RGB (175,117,255)
#A05195
RGB
(160,81,149)
#B38FCC
RGB (179,143,204)
#E68AD6
#RGB (230,138,214)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#003F5C
RGB
(0,63,92)
#3D85EB
RGB
(61,133,235)
#73d0ff
RGB (115,208,255)
#334666
RGB
(51,70,102)
#596980
RGB
(89,105,128)
#A3BBCC
RGB (163,187,204)
Primary Color/ Main Font
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#092642
RGB (9,38,66)
Links
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#2059B3
RGB (32,89,179)
Gray Tones
A gray tone was applied to table elements, including borders, background fills, and secondary text to reduce visual noise and enhance scannability.
#F2F4F5
RGB (242,244,245)
E6E6E6
RGB (230,230,230)
B4B4B4
RGB (180,180,180)
A9A9A9
RGB (169,169,169)
868686
RGB (134,134,134)
4E5158
RGB
(71,81,88)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#3D6666
RGB (61,102,102)
#52B362
RGB (82,179,98)
#A5D971
RGB (165,217,113)
#4D9399
RGB
(77,147,153)
#00CCBB
RGB
(0,204,187)
#ADDECE
RGB (173,222,206)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#F95D6A
RGB (249,93,106)
#FFA600
RGB (255,166,0)
#F7E300
RGB (247,227,0)
#B3127D
RGB (179,18,125)
#D45087
RGB (212,80,135)
#F27C49
RGB (242,124,73)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#7E388C
RGB (126,56,140)
#7548B3
RGB (117,72,179)
#AF75FF
RGB (175,117,255)
#A05195
RGB
(160,81,149)
#B38FCC
RGB (179,143,204)
#E68AD6
#RGB (230,138,214)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#003F5C
RGB
(0,63,92)
#3D85EB
RGB
(61,133,235)
#73d0ff
RGB (115,208,255)
#334666
RGB
(51,70,102)
#596980
RGB
(89,105,128)
#A3BBCC
RGB (163,187,204)
Primary Color/ Main Font
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#092642
RGB (9,38,66)
Links
The primary color, also used for typography, was a darker shade of blue instead of black to reduce visual strain, create a softer contrast against the white background, and maintain a calm, professional tone throughout the interface.
#2059B3
RGB (32,89,179)
Gray Tones
A gray tone was applied to table elements, including borders, background fills, and secondary text to reduce visual noise and enhance scannability.
#F2F4F5
RGB (242,244,245)
E6E6E6
RGB (230,230,230)
B4B4B4
RGB (180,180,180)
A9A9A9
RGB (169,169,169)
868686
RGB (134,134,134)
4E5158
RGB
(71,81,88)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#3D6666
RGB (61,102,102)
#52B362
RGB (82,179,98)
#A5D971
RGB (165,217,113)
#4D9399
RGB
(77,147,153)
#00CCBB
RGB
(0,204,187)
#ADDECE
RGB (173,222,206)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#F95D6A
RGB (249,93,106)
#FFA600
RGB (255,166,0)
#F7E300
RGB (247,227,0)
#B3127D
RGB (179,18,125)
#D45087
RGB (212,80,135)
#F27C49
RGB (242,124,73)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#7E388C
RGB (126,56,140)
#7548B3
RGB (117,72,179)
#AF75FF
RGB (175,117,255)
#A05195
RGB
(160,81,149)
#B38FCC
RGB (179,143,204)
#E68AD6
#RGB (230,138,214)
Data Visualization
Created a series of colors that are visually equidistant. This is useful for data visualizations, like pie charts, grouped bar charts, and maps. When colors are not visually equidistant, it’s harder to tell them apart or compare in the chart.
#003F5C
RGB
(0,63,92)
#3D85EB
RGB
(61,133,235)
#73d0ff
RGB (115,208,255)
#334666
RGB
(51,70,102)
#596980
RGB
(89,105,128)
#A3BBCC
RGB (163,187,204)

Font Color: #092642

Microsoft Font

Segoe UI

Regular

Semibold

Bold

Regular

14px

Button Font

Metric Title

Regular

32px

30px

Line Height

Font Size

Font Weight

Section Title

Semi bold

24px

20 px

Tile Title

Sub Metrics

Metrics Context

Metrics Value

Tile Heading

Tile Metric

Regular

Semibold

Regular

12px

Semibold

12px

20px

14px

12px

14px

12px

18px

12px

20px

12px

18px

Data Visualisations

Once the layout and structure are finalized, the next step is to bring the data to life through purposeful and intuitive visualizations.

Data visualization cards are designed to highlight key metrics and trends at a glance. These modular components serve as the building blocks of the dashboard, enabling users to quickly scan, compare, and interpret insights without diving into raw data.

Each card is crafted to match the data type and user intent—whether it’s a line chart for trends over time, bar charts for comparison, pie charts for distribution, or tables for detailed breakdowns.

Visualizations are designed with clarity, minimalism, and hierarchy in mind—emphasizing the “so what” behind the numbers. Tooltips, filters, and drill-down options are added to support deeper exploration when needed, without overwhelming the primary view.

Cards are responsive and reusable, allowing for consistency across different dashboard views and scalability across future updates.

LATAM 250
Events Registration Map by
Planned
Delivered
Search by Partner Name or MPNID
Partners
Arbit Consult...
The Bauen G...
Devoteam M...
Blueprint Inte..
Novalytica AG
Blueforte Gm...
72
71
70
69
68
67
Events
4.9
4.8
4.7
4.6
4.5
4.5
Survey Score
View
View
View
View
ViewView

Details
Brazil
USA
Portugal
USA
Switzerland
Germany
Country
Top Partners by Events Delivered
Registration
AIAD

DIAD

PRIAD

MAIAD

PVAIAD

RPAIAD
200/225

300/225

200/165

100/75

200/235

100/175
Chart
Table
Registration vs Attendance by Programs
0
400
300
200
100
Survey and NPS
42.5
NPS Score
+2.5
4.7
XIAD Score
-0.1
758
157
161
4.59
4.33
N/A
N/A
Survey Responses
Follow ups
All Up NSAT
Content Rating
Presenter Rating
Food (In-Person)
Venue (In-Person)
A14 Area
APAC
Australia
Canada
CEE
France
GCR
101
129
200
350
204
300
Registration
99
140
150
300
250
180
Attendance
98.01%
108.52%
75%
85.71%
122.54%
60%

Fill Ratio (%)
Active Registrations vs Actual Attendance by
A14 Area
Location

Customizable interactive charts allowed users to personalize their data views over time, resulting in a more tailored and relevant user experience.

Try this interactive prototype!

Design-to-Dev Handoff

Dashboards are built using reusable UI components to maintain consistency and support scalability across modules and views.

All components, specs, assets, and annotations are documented and shared with developers through tools like Figma to ensure clarity and consistency.

Who is using the dashboard and in what context?
What decisions or tasks are they performing using data?
What’s currently frustrating or slowing them down?
How long does it take to find or interpret insights?
What do users wish they had to improve their workflow?
What are users trying to achieve or prove with the data?
Where do users struggle most in the reporting process?
How do users define a successful dashboard experience?
Which key performance indicators matter most in their decision-making?
How often do users expect to use the dashboard, and what are their usability needs?

Delivering Impact

The MVP dashboard opened to high-level information, allowing users to quickly understand key metrics and trends with minimal navigation. Overall, the advancements led to a more engaging and user-friendly dashboard, improving user satisfaction and adoption rates.

Watch the video below to get an overview:

The bookmark navigation feature ensured a seamless transition between different dashboard views, maintaining consistency and enhancing the overall user experience.

Summary widgets and cards display key metrics, along with tooltips & annotations, providing clear and comprehensive insights, and enhancing overall data comprehension.

Customizable interactive charts allowed users to personalize their data views over time, resulting in a more tailored and relevant user experience.

The introduction of overlays accessible by quick links for accessing partner information minimized the need for context switching, thus streamlining workflows and reducing the time and effort needed to obtain relevant data.

Table view highlight

Above all, prioritized accessibility by meticulously ensuring that every card and the entire dashboard were designed to be fully inclusive. Figma's built-in accessibility checker and A11y contrast checker guaranteed compliance and an inclusive experience for all users.

vbvmn XZN SKC asc

Turning Complex Data into Clear Actionable Visuals with

Intuitive Data Driven Dashboards

At HCL Technologies, I designed multiple enterprise-level Power BI dashboards and reports rooted in design thinking and agile methodologies, these solutions were crafted to reduce cognitive load, empower users, and drive meaningful business outcomes through thoughtful, user-centered design.

While the projects remain confidential under NDA, this case study illustrates my end-to-end design process, highlighting how I combine UX principles, data storytelling, and interactive UI design to transform complex data into intuitive, actionable insights.

Context

Microsoft Partner Ecosystem platform serves as a centralized hub for tracking partner relationships, program participation, events, performance metrics, and overall business growth, supporting internal teams in managing strategic partnerships and driving informed decisions.

Problem

The platform's overwhelming data layout and poor navigation hindered users from efficiently accessing partner insights, increasing cognitive load and slowing productivity.

Solution

Redesigned the interface using Power BI and Microsoft's design system to streamline workflows, visualize key metrics, and simplify decision-making through intuitive, user-centered interactions.

Tools

• Figma• Excel• PPT• PowerBi

Team

• UX Designer• Developers• Project Managers• Stakeholders Excel

Role

• Stakeholder Interviews• Data analysis• User Flow• Data Visualization• User Interactions • Rapid Prototyping

How Might We

Reviewing existing spreadsheets, reports, and dashboards

Mapping how data flows across teams and departments

Identifying what constitutes high-level data versus operational/ supporting data

Understanding inconsistencies and redundancies in current data/processes

User Roles

User Actions

Time Consumed

Pain Points

Motivations

Daily Reporting Challanges

Success Metrics

KPIs

Expectations

"It feels overwhelming. I often have to sift through multiple dashboards to find the data I need"

"I’m spending too much time figuring out where to look rather than using the information to make decisions."

"Navigating through the dashboard is time-consuming and I often overlook important data."

"It feels overwhelming. I often have to sift through multiple dashboards to find the data I need"

"I’m spending too much time figuring out where to look rather than using the information to make decisions."

"Navigating through the dashboard is time-consuming and I often overlook important data."

The bookmark navigation feature ensured a seamless transition between different dashboard views, maintaining consistency and enhancing the overall user experience.

Summary widgets and cards display key metrics, along with tooltips & annotations, providing clear and comprehensive insights, and enhancing overall data comprehension.

Customizable interactive charts allowed users to personalize their data views over time, resulting in a more tailored and relevant user experience.

Get in Touch

• Figma
• Excel
• PPT
• PowerBi

• UX Designer
• Developers
• Project Managers
• Stakeholders Excel

• Stakeholder Interviews
• Data analysis
• User Flow
• Data Visualization
• User Interactions
• Rapid Prototyping