Codey Albers

KlimaDAO’s Carbon Dashboard

UI & UX Redesign

07/2023

KlimaDAO provides transparent, neutral, public resources to accelerate climate finance on a global scale. This particular product harnessed the power of generative AI to product real-time analysis of our data-heavy reporting dashboards.

Project

Quick Facts

  1. The original dashboard had solid data coverage but suffered from poor organization, redundancy, and lack of meaningful context, making it harder for users to extract insights.
  2. User interviews revealed that graphs felt visually weak and repetitive, and users struggled to quickly find or interpret the most relevant information.
  3. I redesigned the experience by consolidating data, improving visual hierarchy, and introducing more interactive graph components for deeper exploration.
  4. I introduced AI-generated insights alongside charts, helping transform raw data into actionable, easy-to-understand analysis.
  5. Through usability testing, I refined key interaction patterns (like legend placement and comparison views), resulting in a more intuitive, accessible, and insight-driven dashboard experience.
Project

Research

Before I joined the team at KlimaDAO, they already had some great bones to this product. In essence, the Carbon Dashboard was meant to provide a source of industry reference for scholars, reporters, and carbon brokers to gather information on the price, supply, and retirement activity of carbon- both on and off the blockchain. The accompanying screenshots show what it looked like before I got my hands on it.

​

As you can see, they had some good bones. The dashboard provided the information they wanted to provide. albeit a little less pretty than we would have liked. So we reached out to some of our most frequent users and set up some interviews to ascertain:

​

  1. How exactly they use the data in the dashboard
  2. What specific information is most useful to them
  3. Any pain points in the user journey of seeking out a specific piece of information they might be looking for on the dashboard.

​

After half a dozen interviews it became quite clear that the users viewed the graphs and charts as somewhat visually juvenile. The users also felt that the information within the dashboard was redundant and duplicated in many areas (one could find the same information spread across multiple charts in several different areas of the dashboard). Finally, the data we presented in the dashboard lacked analysis and context.

Prototype

After reviewing the information we cultivated from the user interviews, I composed a list of design requirements and a few user stories. After a about a week of internal iterations, I had a new dashboard with better organized data, an improved graphing library, and plenty of space for some real-time AI-generated analysis of each graph on the dashboard. I began work scheduling some usability tests while our head of product began training a ChatGPT bot to provide the real-time data analysis.

​

With an improved graphing library, we were able to make each of these graph cards interactive. Users could click on graph points and receive information. They could also interact with the graph legend to single out specific lines or bars to view.

​

On the Graph Details screen, the user can see a graph in expanded detail, with real-time AI-generated insights below.

Testing

Testing yielded a few useful insights. Here they are:

  1. The most natural place for a user to see and interact with a graph legend is the bottom center of the card that contains the graph (see accompanying image).
  2. For graphs that show parallel information (for example, Graph A shows the supply of carbon credits off-chain and Graph B shows the supply of carbon credits on-chain), the easiest way for a user to compare these graphs is to place them on the same card, navigated by a segmented button / toggle switch (see image below).
  3. The "Details" button on each graph card that leads a user to more in-depth info is easiest for a mobile user to tap when at the top right of the card on mobile. The interactive legend at the bottom crowded the tap targets (see accompanying image).
  4. We still had some redundancy / duplication in the data, so we combined a few graphs and relocated them to a place that made more sense to the users.

Final Result

Goals:

  1. Enhance app’s credibilty
  2. Create a smoother, more professional user experience
  3. Reduce the time needed to complete essential accounting tasks by 25%.

Codey Albers

KlimaDAO’s Carbon Dashboard

UI & UX Redesign

07/2023

KlimaDAO provides transparent, neutral, public resources to accelerate climate finance on a global scale. This particular product harnessed the power of generative AI to product real-time analysis of our data-heavy reporting dashboards.

Project

Quick Facts

  1. The original dashboard had solid data coverage but suffered from poor organization, redundancy, and lack of meaningful context, making it harder for users to extract insights.
  2. User interviews revealed that graphs felt visually weak and repetitive, and users struggled to quickly find or interpret the most relevant information.
  3. I redesigned the experience by consolidating data, improving visual hierarchy, and introducing more interactive graph components for deeper exploration.
  4. I introduced AI-generated insights alongside charts, helping transform raw data into actionable, easy-to-understand analysis.
  5. Through usability testing, I refined key interaction patterns (like legend placement and comparison views), resulting in a more intuitive, accessible, and insight-driven dashboard experience.
Project

Research

Before I joined the team at KlimaDAO, they already had some great bones to this product. In essence, the Carbon Dashboard was meant to provide a source of industry reference for scholars, reporters, and carbon brokers to gather information on the price, supply, and retirement activity of carbon- both on and off the blockchain. The accompanying screenshots show what it looked like before I got my hands on it.

​

As you can see, they had some good bones. The dashboard provided the information they wanted to provide. albeit a little less pretty than we would have liked. So we reached out to some of our most frequent users and set up some interviews to ascertain:

​

  1. How exactly they use the data in the dashboard
  2. What specific information is most useful to them
  3. Any pain points in the user journey of seeking out a specific piece of information they might be looking for on the dashboard.

​

After half a dozen interviews it became quite clear that the users viewed the graphs and charts as somewhat visually juvenile. The users also felt that the information within the dashboard was redundant and duplicated in many areas (one could find the same information spread across multiple charts in several different areas of the dashboard). Finally, the data we presented in the dashboard lacked analysis and context.

Prototype

After reviewing the information we cultivated from the user interviews, I composed a list of design requirements and a few user stories. After a about a week of internal iterations, I had a new dashboard with better organized data, an improved graphing library, and plenty of space for some real-time AI-generated analysis of each graph on the dashboard. I began work scheduling some usability tests while our head of product began training a ChatGPT bot to provide the real-time data analysis.

​

With an improved graphing library, we were able to make each of these graph cards interactive. Users could click on graph points and receive information. They could also interact with the graph legend to single out specific lines or bars to view.

​

On the Graph Details screen, the user can see a graph in expanded detail, with real-time AI-generated insights below.

Testing

Testing yielded a few useful insights. Here they are:

  1. The most natural place for a user to see and interact with a graph legend is the bottom center of the card that contains the graph (see accompanying image).
  2. For graphs that show parallel information (for example, Graph A shows the supply of carbon credits off-chain and Graph B shows the supply of carbon credits on-chain), the easiest way for a user to compare these graphs is to place them on the same card, navigated by a segmented button / toggle switch (see image below).
  3. The "Details" button on each graph card that leads a user to more in-depth info is easiest for a mobile user to tap when at the top right of the card on mobile. The interactive legend at the bottom crowded the tap targets (see accompanying image).
  4. We still had some redundancy / duplication in the data, so we combined a few graphs and relocated them to a place that made more sense to the users.

Final Result

Goals:

  1. Enhance app’s credibilty
  2. Create a smoother, more professional user experience
  3. Reduce the time needed to complete essential accounting tasks by 25%.

Codey Albers

KlimaDAO’s Carbon Dashboard

UI & UX Redesign

07/2023

KlimaDAO provides transparent, neutral, public resources to accelerate climate finance on a global scale. This particular product harnessed the power of generative AI to product real-time analysis of our data-heavy reporting dashboards.

Project

Quick Facts

  1. The original dashboard had solid data coverage but suffered from poor organization, redundancy, and lack of meaningful context, making it harder for users to extract insights.
  2. User interviews revealed that graphs felt visually weak and repetitive, and users struggled to quickly find or interpret the most relevant information.
  3. I redesigned the experience by consolidating data, improving visual hierarchy, and introducing more interactive graph components for deeper exploration.
  4. I introduced AI-generated insights alongside charts, helping transform raw data into actionable, easy-to-understand analysis.
  5. Through usability testing, I refined key interaction patterns (like legend placement and comparison views), resulting in a more intuitive, accessible, and insight-driven dashboard experience.
Project

Research

Before I joined the team at KlimaDAO, they already had some great bones to this product. In essence, the Carbon Dashboard was meant to provide a source of industry reference for scholars, reporters, and carbon brokers to gather information on the price, supply, and retirement activity of carbon- both on and off the blockchain. The accompanying screenshots show what it looked like before I got my hands on it.

​

As you can see, they had some good bones. The dashboard provided the information they wanted to provide. albeit a little less pretty than we would have liked. So we reached out to some of our most frequent users and set up some interviews to ascertain:

​

  1. How exactly they use the data in the dashboard
  2. What specific information is most useful to them
  3. Any pain points in the user journey of seeking out a specific piece of information they might be looking for on the dashboard.

​

After half a dozen interviews it became quite clear that the users viewed the graphs and charts as somewhat visually juvenile. The users also felt that the information within the dashboard was redundant and duplicated in many areas (one could find the same information spread across multiple charts in several different areas of the dashboard). Finally, the data we presented in the dashboard lacked analysis and context.

Prototype

After reviewing the information we cultivated from the user interviews, I composed a list of design requirements and a few user stories. After a about a week of internal iterations, I had a new dashboard with better organized data, an improved graphing library, and plenty of space for some real-time AI-generated analysis of each graph on the dashboard. I began work scheduling some usability tests while our head of product began training a ChatGPT bot to provide the real-time data analysis.

​

With an improved graphing library, we were able to make each of these graph cards interactive. Users could click on graph points and receive information. They could also interact with the graph legend to single out specific lines or bars to view.

​

On the Graph Details screen, the user can see a graph in expanded detail, with real-time AI-generated insights below.

Testing

Testing yielded a few useful insights. Here they are:

  1. The most natural place for a user to see and interact with a graph legend is the bottom center of the card that contains the graph (see accompanying image).
  2. For graphs that show parallel information (for example, Graph A shows the supply of carbon credits off-chain and Graph B shows the supply of carbon credits on-chain), the easiest way for a user to compare these graphs is to place them on the same card, navigated by a segmented button / toggle switch (see image below).
  3. The "Details" button on each graph card that leads a user to more in-depth info is easiest for a mobile user to tap when at the top right of the card on mobile. The interactive legend at the bottom crowded the tap targets (see accompanying image).
  4. We still had some redundancy / duplication in the data, so we combined a few graphs and relocated them to a place that made more sense to the users.

Final Result

After implementing the feedback and results from the usability testing, the last step was to imbue the designs with a bit of color to liven things up and help differentiate between data points on this graph-heavy dashboard. I'm quite passionate about making data accessible to all users, so I took great length to ensure that anyone experiencing any type of color blindness would still be able to read and understand the graphs. I took a mono-chromatic approach to the color theme and made sure that each color variable used in the graphs had at least 20-30% luminosity variance. So someone with the most severe case of monochromacy, for example, can still see major and detectable differences in the varying shades of blue.

​

Check out the final result at carbon.klimadao.finance.