ENGIE

COMEX dashboard

A global dashboard tailored for the COMEX members of the FGBU department, consolidating all critical information related to the department’s KPIs, such as finance, health & safety, and market data.

It is designed for both desktop and mobile use, making it convenient for meetings. The goal is to support decision-making and provide a clear view of the department’s performance.

Given that it covers 10 categories, the dashboard needed to be straightforward, focused, and uncluttered, highlighting only the most essential KPIs.

*The data and text used in the dashboard has been anonymized or altered to ensure confidentiality and protect sensitive information

The dashboard is structured into 3 levels:

Level 0 - Graphical view

Displays the most important KPIs across 10 categories using charts. It is designed to simplify Level 1 and make it easy to compare key figures

Level 1 - Tabular view

Provides a table per category that lists all KPIs for subcategories

Level 2 - Detailed view

Offers a deeper dive into each sub-category with charts, data boxes, and tables

1 / Interview preparation

The content for Level 1 had already been defined by the COMEX members. As a UX designer, I established several steps to prepare for the interviews:

Research and Benchmarking
Analyzed similar dashboards in the market to understand their strengths, weaknesses, and design practices. This also helped determine appropriate chart types based on user needs, such as grouped bar charts for comparisons, pie charts for parts of a whole, and line charts for trends

Understanding the KPIs
Conducted thorough research on each KPI to be well-prepared for the interviews and ensure effective communication

Recruitment and Invitations
Identified interview participants and sent invitations, including a brief explanation of the project, its objectives, and any preparation required

2 / Interviews

The key elements we focused on during the interviews included:

Content for Levels 0 and 2
It was emphasized that both levels should display only the most essential KPIs and charts, maintaining simplicity and ensuring mobile-friendliness

General Pages in Level 2

We explored the design of a general page that summarizes the overall numbers for each category

Filters

The inclusion of filters for each page was considered to improve usability and allow users to easily refine the displayed data

Data Sources

We identified where the data would originate from and how it would be integrated into the dashboard

Data Update Frequency

We discussed the frequency at which data would be updated to ensure the dashboard remains accurate and current

3 / Layout & Design overview

The dashboard design was optimized for both desktop and mobile, with key elements tailored to each platform’s needs while ensuring consistent navigation and usability.

Chart Area design

Chart Components

Each chart includes essential components, such as the chart title, legend, X and Y axes, axis titles, and the plot area. These elements were standardized to ensure consistency across all visualizations

Chart Types

A variety of chart types were selected based on the data. Each chart type was chosen for its clarity and effectiveness in communicating the data

Text and Spacing
Consideration was given to text sizes to ensure legibility, particularly on smaller mobile screens

Color Usage and Accessibility
A color scheme was carefully selected to ensure readability and accessibility across all visualizations

General Layout and Architecture

Menu Structure
For navigation, a burger menu was implemented on the mobile version for quick access, while a side navigation menu was utilized for the desktop version to provide more space for options

Multi-Level Navigation
The layout accommodates navigation through three levels of content, ensuring a seamless user journey between key sections without unnecessary complexity

Filter Bar
A dedicated filter bar was incorporated in level 0 and 2, allowing users to easily refine data without cluttering the interface

Error Handling
Clear and accessible error messages were designed to guide users in case of problems with the data

Pop-Ups
Pop-up elements were carefully placed to show exact definitions of each KPI

Responsive Design Considerations

The design focused on maintaining consistency across devices while adapting to the constraints of different screen sizes

Managing Limited Space on Mobile
Mobile dashboards face the challenge of limited screen space. Strategies were employed to ensure that information is displayed clearly without overcrowding. For instance, when charts or tables didn’t fit horizontally, a horizontal scroll feature was added to allow users to view the entire content without distorting the layout

Touch-Friendly Interactions
Since mobile interactions are primarily touch-based, all interactive elements were designed with larger touch targets to ensure ease of use and reduce the risk of misclicks

Typography for Mobile
Text legibility was a key consideration for mobile design. Font sizes were adjusted to ensure readability on smaller screens, with larger text for key information and smaller sizes for secondary details

Simplifying Mobile Visualizations
Given the space constraints on mobile, chart complexity was reduced where necessary. For example, the X-axis labels were abbreviated, timeframes were condensed (e.g., displaying 6 months instead of 12 months), and the Y-axis was simplified to improve readability and avoid overwhelming the user.

Results - Some examples

The most complicated page:

General page with all the general KPIs.

Subcategories are for more specialities

General page but includes all the charts of the subcategories because they are minimal and simple

This page helps compare the data and it decreases the number of pages

A subcategory page

A subcategory page