Enhanced Data Discoverability, RCA Efficiency, and User Engagement

A complete UX and UI restructuring was carried out to improve how users access key performance data, identify root causes, and interact with dashboard components. The project focused on addressing data visibility issues, enhancing visual hierarchy, refining layout structure, and introducing responsive and interactive components for a more intuitive experience.

Customer Overview

Zarthi Logo

Renewable Energy Customer

The customer is a large-scale renewable energy technology provider delivering solar monitoring, analytics, and operational performance management. Their platform handles significant data volume and requires clear, intuitive dashboards to support rapid issue identification and day-to-day decision-making. The engagement focused on improving how users interpret insights and interact with key performance metrics.

Location
Location

Thane, India

Company Size
Company size

1,001-5,000 Employees

Problem Statements

We identified key problems that need to be addressed to deliver a solution aligned with the customer’s problem

01

Root Cause Analysis Difficulty

The biggest pain point was identifying plant issues. The dashboard did not support effective RCA due to scattered information, poor anomaly visibility, and unclear performance grouping, delaying corrective action.

02

Heatmap Reduced Data Insight Clarity

The heatmap visualization did not effectively communicate performance trends or anomalies. Users were unable to identify problem areas quickly, leading to slower decision-making.

03

Flat and Unengaging Dashboard Layout

Though not the core issue, the dashboard’s flat layout and lack of visual hierarchy added friction. Users struggled to scan information, grasp key metrics, and interpret data quickly, slowing overall analysis.

04

Lack of Responsive and Interactive Elements

The old dashboard lacked micro-interactions and responsive design, limiting engagement across devices. Without component-level animations or structured layouts, the experience felt static and less user-friendly across screen sizes.

Our Methodology

Designed, validated, and refined the interface from low-fi wireframes to high-fidelity screens supported by a scalable design system. Delivered reusable components, interactive prototypes, and clear guidelines for smooth development handoff.

01 Discovery & Diagnosis

Conducted heuristic evaluation and heatmap analysis to evaluate user behavior and pinpoint pain points in data visualization. Also performed competitive analysis to understand how similar products present data and assist users in problem identification. Identified key differentiators and usability gaps to align the solution with user expectations and market standards.

The existing dashboard lacked visual hierarchy, consistency, and clear navigation paths, making it difficult for users to locate information and engage with the interface. This confirmed the need for improved layout structure, responsiveness, and a more intuitive visual experience.

02 Solutioning

Studied the provided persona and user flow from the team to understand user goals and interactions. Based on these insights, the team identified key data points and created the user-flow diagram. Reorganized screen layouts to simplify navigation and make the interface more visually clear, ensuring the layout supported user interaction patterns effectively.

03 Execution & Delivery

Developed the first draft of low-fidelity wireframes and validated improvements through heatmap analysis, highlighting enhanced user engagement compared to the earlier version. Created a design decision document to provide the customer with clear reasoning behind each design choice.

Designed high-fidelity screens with a consistent visual system, refined spacing, and structured component architecture. Built a reusable component library and scalable design system, prototyped interactions for clarity, and delivered clickable prototypes along with UI guidelines for smooth handoff development.

Services Involved

We delivered a well-defined micro-services architecture, maintaining efficiency and scalability, throughout project engagement

service-icon

Design

Tick Icon

UI for Web Application

In this Microservice, our Service Leads design visually appealing and functional user interfaces for web applications. They optimize the UI for both desktop and laptop screens, ensuring an intuitive, seamless, and efficient user experience. By following modern web design trends, they create adaptable designs that accommodate different screen sizes, resolutions, and web browsers while maintaining best practices for usability and accessibility.

In this Microservice, our Service Leads design visually appealing and functional user interfaces for web applications. They optimize the UI for both desktop and laptop screens, ensuring an intuitive, seamless, and efficient user experience. By following modern web design trends, they create adaptable designs that accommodate different screen sizes, resolutions, and web browsers while maintaining best practices for usability and accessibility.

Tick Icon

UX for Web Application

In this Microservice, our Service Leads enhance the user experience through a research-driven approach. For web app revamps, they conduct a UX audit including competitive analysis, heatmap insights, and heuristic evaluation to identify key improvements before designing low-fidelity wireframes. For new web apps, they perform competitor research and user interviews to gather insights, followed by low-fidelity wireframing to ensure a seamless and intuitive user experience.

In this Microservice, our Service Leads enhance the user experience through a research-driven approach. For web app revamps, they conduct a UX audit including competitive analysis, heatmap insights, and heuristic evaluation to identify key improvements before designing low-fidelity wireframes. For new web apps, they perform competitor research and user interviews to gather insights, followed by low-fidelity wireframing to ensure a seamless and intuitive user experience.

Key Roles Involved

The functions and specializations that worked in sync to ensure seamless delivery