DASHBOARDS & MAPS ↑

DASHBOARDS & MAPS ↑

MATTEO PREDARI

Home

Dashboards and Maps

The Dashboards module, which includes maps, represents a key feature for the product, and this project was initially driven by the need for an Angular JS upgrade to its latest version. EnergyCAP is an energy and sustainability ERP that brings cross-functional teams together in a single platform, to drive cost-effective and responsible utilisation of finite resources.

Added value

Visual Design
UX Design
Documentation

General details

Feature update
Timeframe: 9 weeks

Deliverables

UX Research results
UI Design
Devs documentation

Tools (main)

Miro
Figma
Confluence

Empathise & Define

Empathise & Define

Empathise & Define

The Kickoff

During the first kickoff meeting, it stood clear that the scope of the project needed to be bigger than initially thought and, together with the product owner and product manager, the team decided to include some much-needed improvements.

The reasons for this change are problems with accessibility, cluttering data, and a lack of personalisation options and onboarding.


The main issues that rose during this first phase were:

During the first kickoff meeting, it stood clear that the scope of the project needed to be bigger than initially thought and, together with the product owner and product manager, the team decided to include some much-needed improvements.

The reasons for this change are problems with accessibility, cluttering data, and a lack of personalisation options and onboarding.


The main issues that rose during this first phase were:

During the first kickoff meeting, it stood clear that the scope of the project needed to be bigger than initially thought and, together with the product owner and product manager, the team decided to include some much-needed improvements.

The reasons for this change are problems with accessibility, cluttering data, and a lack of personalisation options and onboarding.


The main issues that rose during this first phase were:

  • AngularJS version is outdated and we need to move to the latest version to keep the IT support.

  • AngularJS version is outdated and we need to move to the latest version to keep the IT support.

  • AngularJS version is outdated and we need to move to the latest version to keep the IT support.

  • Maps don't provide users with valuable information. We had several tickets from customers asking for a better data visualisation on maps.

  • Maps don't provide users with valuable information. We had several tickets from customers asking for a better data visualisation on maps.

  • Maps don't provide users with valuable information. We had several tickets from customers asking for a better data visualisation on maps.

  • There are no onboarding options or empty state screens to help users start.

  • There are no onboarding options or empty state screens to help users start.

  • There are no onboarding options or empty state screens to help users start.

  • The personalisation options are very limited, especially for public shared content.

  • The personalisation options are very limited, especially for public shared content.

  • The personalisation options are very limited, especially for public shared content.

  • For dashboards, it's not easy to find the appropriate widget when adding a new one.

  • For dashboards, it's not easy to find the appropriate widget when adding a new one.

  • For dashboards, it's not easy to find the appropriate widget when adding a new one.

  • Dashboard widgets don't provide enough details about data. We had several tickets asking for extended information in charts and tables.

  • Dashboard widgets don't provide enough details about data. We had several tickets asking for extended information in charts and tables.

  • Dashboard widgets don't provide enough details about data. We had several tickets asking for extended information in charts and tables.

  • From a user point of view, it's not easy to understand high-level information about the dashboard or map. Who created this? What is the main purpose? When was the content updated?

  • From a user point of view, it's not easy to understand high-level information about the dashboard or map. Who created this? What is the main purpose? When was the content updated?

  • From a user point of view, it's not easy to understand high-level information about the dashboard or map. Who created this? What is the main purpose? When was the content updated?

  • The colour scheme of the charts does not honour accessibility standards.

Lean UX Canvas & first things to know

Using a custom Lean UX approach we took the first steps into the project: understanding business problems, and outcomes, and empathising with users and other players.

Besides the Angular update that was mandatory, the main goal was extended to improve the overall user experience for data visualisation, both in dashboards and maps, following the pain points and issues found. The high-level updates include dashboards and widgets, maps, and managing public and sharing options.

The expected result is a visually accessible and usable environment able to display complex data and provide users with on-the-spot information when needed, together with expanded sharing options.

Thanks to an ever-evolving hypothesis prioritisation matrix we were able to prioritise research on the way, at the same time that we laid down the first things to know and mid-term planning.

Ideate

Ideate

Ideate

Ideation and first sketches

The first things to know were related to the onboarding and personalisation flows, features that were not in the product at the moment. With the collaboration of the UX specialist, we started creating user flow diagrams and blueprints that helped us get started with the first sketches.


Thanks to this approach we were able to quickly move from the research results to the new, and more entangled, user flows and wireframes. Later on, we would work on the remaining screens and flows, with a lighter impact on development.


Sharing knowledge and frequent meetings with tech leads and developers helped the team to focus on priorities and actionable items that were validated or discarded on the way depending on the scope and time limitations. Thanks to this tight collaboration across teams, I was able to save a lot of time, iterate better and build a Figma library to build and modify widgets, charts and tables easily via instances. Charts were implemented using an external library: Highcharts.


As a team, in collaboration with the product manager, we worked as well on accessible colours, icons and thumbnails to provide an improved and more inclusive visual experience.

The first things to know were related to the onboarding and personalisation flows, features that were not in the product at the moment. With the collaboration of the UX specialist, we started creating user flow diagrams and blueprints that helped us get started with the first sketches.


Thanks to this approach we were able to quickly move from the research results to the new, and more entangled, user flows and wireframes. Later on, we would work on the remaining screens and flows, with a lighter impact on development.


Sharing knowledge and frequent meetings with tech leads and developers helped the team to focus on priorities and actionable items that were validated or discarded on the way depending on the scope and time limitations. Thanks to this tight collaboration across teams, I was able to save a lot of time, iterate better and build a Figma library to build and modify widgets, charts and tables easily via instances. Charts were implemented using an external library: Highcharts.


As a team, in collaboration with the product manager, we worked as well on accessible colours, icons and thumbnails to provide an improved and more inclusive visual experience.

The first things to know were related to the onboarding and personalisation flows, features that were not in the product at the moment. With the collaboration of the UX specialist, we started creating user flow diagrams and blueprints that helped us get started with the first sketches.


Thanks to this approach we were able to quickly move from the research results to the new, and more entangled, user flows and wireframes. Later on, we would work on the remaining screens and flows, with a lighter impact on development.


Sharing knowledge and frequent meetings with tech leads and developers helped the team to focus on priorities and actionable items that were validated or discarded on the way depending on the scope and time limitations. Thanks to this tight collaboration across teams, I was able to save a lot of time, iterate better and build a Figma library to build and modify widgets, charts and tables easily via instances. Charts were implemented using an external library: Highcharts.


As a team, in collaboration with the product manager, we worked as well on accessible colours, icons and thumbnails to provide an improved and more inclusive visual experience.

Ideation

Empty states ideas

First sketches

First sketches

Design

Design

Design

It's Figma time! Widgets, new user flows and maps

The main learnings from this project came from the opportunity to work on a complex model of data with an approach that needed to solve accessibility issues, accommodate tight technical and time limitations, and provide an easy way to present documentation for developers.

The main learnings from this project came from the opportunity to work on a complex model of data with an approach that needed to solve accessibility issues, accommodate tight technical and time limitations, and provide an easy way to present documentation for developers.

The main learnings from this project came from the opportunity to work on a complex model of data with an approach that needed to solve accessibility issues, accommodate tight technical and time limitations, and provide an easy way to present documentation for developers.

01 → Users create, add, and share

  • New first-time user experience and improved empty screens.

  • New first-time user experience and improved empty screens.

  • New first-time user experience and improved empty screens.

  • Improved widget creation. Additional filtering, new thumbnails, and descriptions.

  • Improved widget creation. Additional filtering, new thumbnails, and descriptions.

  • Improved widget creation. Additional filtering, new thumbnails, and descriptions.

  • Improved public access management and new sharing options.

  • Improved public access management and new sharing options.

  • Improved public access management and new sharing options.

  • New dialog with the dashboard or map details. What? Who? When?

  • New dialog with the dashboard or map details. What? Who? When?

  • New dialog with the dashboard or map details. What? Who? When?

Updated dialog

Improved widget creation

Dashboard details

Improved public access settings

02 → Users view, use, and edit

  • New dynamic toasts help users navigate, learn, and take action.

  • New dynamic toasts help users navigate, learn, and take action.

  • New dynamic toasts help users navigate, learn, and take action.

  • Expanded view for widgets to provide additional information about the data displayed.

  • Expanded view for widgets to provide additional information about the data displayed.

  • Expanded view for widgets to provide additional information about the data displayed.

  • Data-driven pins on map view provide users with a high-level comparison between objects. Users control what type of data they want to compare.

  • Data-driven pins on map view provide users with a high-level comparison between objects. Users control what type of data they want to compare.

  • Data-driven pins on map view provide users with a high-level comparison between objects. Users control what type of data they want to compare.

  • Improved and more detailed information for buildings available on selection.

  • Improved and more detailed information for buildings available on selection.

  • Improved and more detailed information for buildings available on selection.

  • New colour palette for charts and widgets.

  • New colour palette for charts and widgets.

  • New colour palette for charts and widgets.

Dynamic toasts

Expanded widget view

Data sensitive pins on maps

Improved detailed information for buildings

New color palette

Development

Documentation for developers

Besides the usual prototypes to test interactions and flows, I also created a prototyped document with Figma to present and hand off the documentation to the developers. This is an in-house process that we found particularly beneficial in a wide project like this one.

The main advantages are:

  • Embedded possibilities in other platforms as a prototype (Notion, Confluence, Jira, …), make it easily available to all the teams.

  • No need to deep dive into the design file, as the prototype uses on-screen notes to identify updates and new items.

  • Figma sidebar navigation panel helps other parties to quickly find what they need.

Widget details

Add widgets dialog

Responsive widget details

Widget details

Future considerations

Design debt and descoped items

During the design process, a lot of ideas surfaced but not all of them got to see the light because of the scope, technical feasibility, and effort involved. However, the team had all the important information logged in Miro and or Figma, and some of these ideas even made it to the Jira board.

The simple way we found to keep an organised log for our future selves was to create and close Jira tickets for each descoped idea while marking them as "Won't do". This way, when the project is reviewed or post-researched, it will be easy enough to browse and find ideas that did not make it to the finish line.

CONTACT ME

Whether you're ready to bring your vision to life or
unsure where to start, I'm here to help.

Let's collaborate and create something amazing together!

View on LinkedIn

Thank you for coming this far.
Click here you want to go back to top ↑

2023 | Matteo Predari

CONTACT ME

Whether you're ready to bring your vision to life or unsure where to start, I'm here to help!

Let's collaborate and create something amazing together!

View on LinkedIn

Thank you for coming this far.
Click here you want to go back to top ↑

2023 | Matteo Predari

CONTACT ME

Whether you're ready to bring your vision to life or
unsure where to start, I'm here to help.

Let's collaborate and create something amazing together!

View on LinkedIn

Thank you for coming this far.
Click here you want to go back to top ↑

2023 | Matteo Predari