Unified Dashboard

From navigating a maze of applications to a seamless journey on the Unified Dashboard, our cloud security suite revolutionizes user experience, boosting engagement by 20% and minimizing support tickets to less than 5%.

Why do we need unified platform?

Imagine juggling 30+ apps just to compare data, view, edit, and delete—each requiring its own navigation.

That’s the challenge our users faced.

The solution?
A unified dashboard that streamlines data from all these apps, making comparisons, performance tracking, and operations seamless—all in one place.
No more endless toggling—just efficient, powerful workflows

Introduced "Unified Dashboard" option at the bottom as an index point to view streamlined data applications!

End Product!

Data Unification Product brings new widget visualization types such as multi-column group-by, summary count cards, multi-bar & stacked, and ratio count widgets. This product provides quick accessibility for other products navigation.

The ability to build any widget from any module with the easy-to-use widget builder in Unified Dashboard allows you to quickly create any widget type needed to display the data on your favorite dashboard. This products allows the data to be visualized as widgets and pull information from other applications to add them to your dashboard.
Users can also add multiple dashboards to customize the vulnerability posture view.

Impact on customers

Working with the data analysts and Product Owners , success criteria for the project was measured using a google analytics tool and saw an increased engagement of product within users.

After the launch, we found that we have moved the needle by ~20% where now instead of traversing through various applications, users directly hit the Unified Dashboard platform to perform the operations.

The design was intuitive and the learning curve was minimal as we were successfully able to keep the customer support ticket to less than 5%, which means not many customers felt the new product was cumbersome or had any learning challenges while using it.

Here’s how I make it happen in the team...

As a Lead UX/UI on the team, my responsibility involved creating an efficient and smooth user experience by conducting research methods to define, analyze, and address the pain points in my design and ensuring the technical feasiblity and overcoming any technical challenges. The key things I kept in mind while designing this project were:

Keep the learning curve minimal
Leverage the mental model of the users while creating design workflow and patters.
Show progressive information.

Tools I used to carry out this project

Figma
Miro
Usability testing and A/B Testing
Zoom.

Design Process

A/B Testing was carried out to validate the structure for unified platform.

Version A

Version B

Actions

The next step was to conduct user interviews to gain insights into how participants would react to the visuals presented to them as options.

We had four customers who opted to participate in this test and were presented with two layouts: the Dashboard layout and the Grid layout.

This test aimed to identify which design component is preferred, more intuitive, and better suited to the current platform design. I recorded the sessions and diligent notes.

Findings from A/B testing method

Participants were positively more inclined towards the dashboard layout than the grid layout.
Their mental model was set in a particular direction and preferred the dashboard option as they were well versed with the component.
Grid layout was verbose and noisy which made them feel overwhlemed with the content in it.
The data visualization charts loooked clumsy and no room for them to breath in. The charts looked tiny with no or minimal option to zoom in.

Design Challenges

During the Ideation phase we faced a design challenge.

The team did not have any design library in place. Every team worked in a silo of frameworks having their own UI/UX patterns and components specific to their application. This created inconsistency within the product, and added learning curve for every customer who subscribed to any new product.

Since, the outcome of the project was expected to be a streamlined platform for all apps, it was essential to have a consistent feel, functionality, design pattern and UI component across all the apps. While collaborating with cross-functional team members, I witnessed every member owning an app specific repository where they stored the UX patterns compliant only to their app.

Since a product inconsistent feedback was previously raised by few customers, I decided to create a design library from scratch that would hold common UX components and patterns across all apps and designer could leverage this library to create designs going forward.

How did I solves those challenges?

I first started identifying all the inconsistencies between different pages/products, ie.visuals(color, font size), graphics(icon, images).
Collaborated with project team members and cross functional members, explaining the inconsistencies that affect user experience.
Worked very closely with the teams in determining the significance of their app specific functionality, design components, color palette, etc to prevent regression of design experience.
After working through the above factors, I created a team library in Figma. A step-by-step approach was to:

Fix the inconsistencies
Removing legacy, stale design patterns and adding new based on the latest product requirement.
Make the color pallet consistent: ex identifying how many colors and shades can be used for a visual representation, i.e charts, buttons, text fields, headers etc.
Check for Typography(icon sizes, text size.

Check for Graphic(check for icons, images, branded icons, if they need to be revised based on company’s goal/vision).
UI components: Leveraging the components from UI component Library, rather than recreating them for every feature scenario. Eg:
- Scroll.
- Hamburger menu(visual).
- Breadcrumbs (steps to indicate progress at every step.

5. Finally hosting the design library on internal GIT system accessible to the designers and developers for reference

Accessibility to attract more customers :)

Perceiving on how to make a webpage AA compliant taught me many new valuable ways to approach a design. For example, one overarching theme was that there are many levels of disabilities and because of this a majority of people have a disability which means a majority of people may struggle to interact with my designs in one way or another.

Making Unified Dashboard AA compliant, not just increased subscriptions from regular customer, but also bagged couple federal customers, whose key constraint is to have an accessible design.

What I do to make the page accessible?

I created a color palette referencing Accessibility in Mind (WEBAIM) that denotes meaningful text should have a contrast ratio of 4.5:1 or higher and large or bold text should have a contrast ratio of 3:1. My primary blue color which is used for buttons and icons has a contrast of a AA+ rating according to WEBAIM.
I intentionally created large target areas and made sure their was space between target areas so that precision would not be an issue when my users need to click or choose important targets.
I went through all of my images and made sure that there was meaningful alternative text assigned to each one.
I installed SiteImprove accessibility tool on my machine to run automated AA tests on pages for better vision.

Wireframes

With the key features and user flow defined , I started to capture my ideas by sketching low-fidelity screens using pen and paper. It enabled me to examine my ideas before moving onto digital wireframes.

Design flow and Personas

Know the customer and the define problem statement.

Know how requirement came into view, wether as an add-on to the feature OR as a pain point.
Know who the customer is and analyze the scalability of the ask with respect to the product being designed.
Define problem space. Know how the product will fit into the overall strategy. - Research for the competitors in the market.

Ideation

Put together the information gathered.
Involving major stakeholders to shout out for any concerns seen in the workflows or missing any criteria. Explore alternative ideas based on information gathered from other members.
Get the ideas rolling on a paper or sketch it out.

Low-Fidelity Prototype

Prepare a design with minimal effort, but also that covers all discussed scenarios and share it with the team.
Wire up workflows with simple design enough to visualize the use case.

I carried out a Usability Testing research Method

I decided to kick off the research phase by looking into existing studies and gather data which would confirm or refute my assumptions.

I achieved this via conducting usability testing to uncover some interesting findings around user's goals and pain points.

Goals

To compare data flowing from various application and perform operations on them, i.e (Edit, Delete, Create etc)
User wanted to view the apps side by side for funfilling operations on multiple applications.
Used the data streaming to fix the vulnerabilities detected in their system.

Pain Points

Users experienced a lot of inconvenience in navigating through products even for conducting simple operations.
Considerable amount of time and effort spent while navigating due to applications and comparing the data on various tabs and windows.
Poor navigation experience caused users to steer away from the application.

Who were our users?

Customer Journey

Intentions

I created a journey map to have better insights on the navigational behavior and usage of the product. The journey began from accessing the Unified platform up until the operational flow of the content within the dashboard.

Actions

At each stage of navigation, I divided the general user experience into different categories: behaviors, goals, mental model, pain points and feelings.
I used emojis to indicate which parts of the user journey were mostly positive, neutral, and mostly negative experiences.
The final part of this task was drawing the curve, and weighing up the most common type of user experience (positive, neutral, negative).

User Flows

After defining the goals and deciding on the features to include, I went on to establish the information architecture of the app by using a User Flow. It helped me visualize the relationship between the content and examine the hierarchy.For this case study, I decided to focus on the phase1 user flows.

Existing Behavior User flow

Unified Dashboard Behavior User flow

Outcome