ESG Web App
A data visualization tool to measure, analyze, and report industry performance across environmental, social, and governance metrics.
Project Background
This was a live project for a company NetZeroPro based in India. The goal was to develop an interactive dashboard that considers carbon accounting metrics across environmental, social, and governance factors. I conducted in-depth user research to understand the needs of both financial analysts and sustainability professionals. Leveraging these insights, I crafted intuitive user flows and wireframes, transforming complex ESG data into visually compelling and actionable insights.
SOLO DESIGNER
Amogh Gharpure
CLIENT
Durgesh Maru
(Co-founder, NetZeroPro)
METHODS
-Agile workflow
-Design sprints
-Competitor study
-UI trend analysis
DATE
Jan-July 2021 (24 weeks)
TOOLS
Figma + Miro, Adobe Photoshop
Impact
40+ Screens
successfully deployed as part of the dashboard
15%
Faster Dev cycle
Detailed design system streamlined the development process
Project Goal
Develop an accessible ESG dashboard that simplifies data tracking and reporting for company employees and managers.
Product Presentation
Following is the overview of the product created for the company's product launch
Timeline
The ESG Accounting Dashboard was developed over 24 weeks through a structured and iterative process. The timeline began with market research and competitor analysis, followed by MVP planning and mapping. A UI trend study informed the creation of a comprehensive design system. Wireframes and information architecture were established, leading to the design of 30-35 unique screens with micro animations.
The project involved extensive back-and-forth with stakeholders and developers in refining requirements and incorporating feedback, all managed within an agile framework of regular scrum meetings and iterative improvements.
Information Architecture
Challenge:
-
Complex Architecture: The project involved designing a robust ESG dashboard with over five key modules: Dashboard, Data Collection, Reduction, Offsetting, and Reporting. The sheer volume of data and functionality required a thoughtful approach to structuring the information.
-
Splitting the Architecture: Due to the extensive nature of the content, it was necessary to split the information architecture into two distinct parts to ensure clarity and usability.
Solution:
-
Modular Approach: Each of the five modules was given its own dedicated section within the two-part architecture. This allowed for a more organized and user-friendly experience, ensuring that each module's workflows were easily navigable.
-
Workflow Optimization: Detailed workflows were created for each module, focusing on the user journey and how they interact with the data and features. This helped in designing intuitive paths for users to accomplish their tasks efficiently.
This is a simplified overview of a 2 part I.A.
Color Contrast
Color contrast played a crucial role in ensuring both brand consistency and accessibility. While dark blue was a core brand color, I proposed incorporating light blue and neutral shades of grey to align with the ESG theme, which emphasizes green and composed elements. This approach not only maintained the brand’s identity but also created a cool, calming aesthetic appropriate for the subject matter.
Designing the Style Guide
The core colors included dark blue for brand alignment, complemented by light blue and neutral greys to evoke a sense of calm and composure, essential for an ESG-focused platform.
​
For typography, I selected Poppins and Lato as the primary typefaces, ensuring both modernity and readability. Poppins was used for headers and key highlights to create a bold, clean visual hierarchy, while Lato was chosen for body text and smaller elements due to its excellent legibility at various sizes.
​
In addition to typography, the style guide defined specific tokens for buttons, headers, footers, and other UI components. This included consistent padding, margin, and alignment rules, ensuring that every element from CTAs to navigation links was cohesive and intuitive. By establishing these guidelines, I not only maintained visual consistency but also ensured that the design was scalable and adaptable, providing a strong foundation for both the current project and future updates.
Design Prototype
One of the key challenges faced while designing the ESG dashboard was ensuring that our design stood out from competitors while staying true to the brand’s identity. The client was concerned that our initial concepts looked too similar to existing products, and they stressed the importance of using the brand's colors consistently and creating an intuitive interface.
​
A few highlights of the design and design decisions have been mentioned below.
Homescreen
The Home Screen is designed with a prominent world map for facility selection, supported by a static header and subheader. The map allows users to intuitively navigate and select facilities across the globe, making it the central hub for the application.
Design Principles:
-
Visual Hierarchy: The world map takes center stage, drawing users’ attention immediately, while the static header and subheader provide context without overshadowing the primary interaction.
-
Intuitive Navigation: Leveraging a familiar geographical layout ensures that users can easily locate and select the desired facility with minimal effort.
Facility Emission
The Facility Emissions page is a data-rich section featuring a loading donut chart, a bar chart with carefully selected colors, and key performance indicators (KPIs). This page is crucial for visualizing the environmental impact of each facility.
Design Principles:
-
Color Theory: Appropriate colors were chosen for the charts to enhance readability and convey the right message, aligning with data visualization best practices.
-
Data Density: The layout was optimized to display multiple data points simultaneously, ensuring users can quickly assess performance metrics at a glance.
Data Collection
The Data Collection page features an extensive records list, along with options for specific selection and manual uploading. This page is integral for managing and inputting large datasets.
Design Principles:​
-
Consistency: Consistent labeling, formatting, and interaction patterns were applied throughout the page to reduce cognitive load and streamline data entry processes.
UX Challenge:
-
Handling Large Data Sets: Ensuring that users could efficiently manage and input large volumes of data without getting lost or overwhelmed was a key challenge, addressed through clear categorization and intuitive search functionalities.
Reduction
The Reduction page presents information in a tabular format, displaying recent figures and changes. This page is focused on monitoring and tracking reduction efforts within the organization.
Design Principles:
-
Tabular Data Display: The tabular layout was designed for clarity and ease of comparison, making it simple for users to track changes over time.
-
Accessibility: The table’s design included clear typography and adequate spacing to ensure readability, even when dealing with large amounts of data.
Carbon Accounting ledger
The Carbon Accounting Dashboard features a large data sheet with horizontal scrolling, accommodating 12-15 columns of data.
Design Principles:
-
Scrollable Data Sheets: The horizontal scrolling feature was designed to accommodate a large amount of data without compromising on readability or usability.
-
Visual Aids: Zebra striping was used to improve the user’s ability to follow rows across multiple columns, reducing errors in data interpretation.
Reporting
The Reporting page includes selection buttons and options for saving formats, allowing users to generate and export reports based on the data collected and analyzed within the dashboard.
Design Principles:
-
Interactive Controls: Selection buttons were designed for ease of use, with clear labeling and feedback, ensuring users could effortlessly generate the reports they needed.
-
User-Centric Design: The saving formats were tailored to common user needs, offering flexibility in how data could be exported and shared.
Project Learning:
-
By prioritizing high-impact areas first, I ensured that the most critical elements were completed early, leaving room for refinements and client feedback
-
Breaking down the design process into smaller milestones helped me stay on track and maintain momentum throughout the project.
-
While the initial design was well-received, additional usability testing revealed areas where the navigation could be improved.
-
In the future, I would like to invest more time in usability testing to identify potential pain points and iterate on the design accordingly.