Carbon Graph is a supply chain sustainability platform designed for companies seeking to reduce carbon emissions. With dynamic life cycle carbon footprinting, Carbon Graph allows users to identify the greatest sources of carbon intensity and risk (hotspots) for targeted and cost-effective reduction strategies. Core features of their LCA platform include:

Carbon Graph's team built first iterations of the LCA platform focusing on core functionality. Their team used Shadcn UI component library for the front-end development to speed up the process. And it was going smoothly until they encountered a few design-related roadblocks. The problem was mainly information organization and UI, although, their team was also looking to introduce new features and it was becoming hard to do without structured UX/UI approach. This is where we started working together to improve their LCA platform.

I started the process by analyzing platform and creating a list of sections and information types within each one of them. At this point I noticed that most pages are very linear in terms of interaction and content presentation. Everything was a long scroll with basic layout and large amounts of unused space. It looked fine for the first iteration of the product but lacked better information organization and visual excellency.

How do we improve it?

Analyzed pages definitely needed a few things to present users with a better experience:

• Typography hierarchy
• Easily accessible navigation
• Improved dynamic layout
• Intuitive interactive widgets (charts and graphs)
• Refined visual style to guide user's attention and highlight important data

While Carbon Graph has an innovative LCA platform with their own unique features, they still compete both directly and indirectly with other digital solutions. To better understand the playing field let's take a look at their primary competitors.

Strengths

• Distinct visual presentation
• AI assistant available for all customer tiers
• Aligns with global carbon accounting standards

Weaknesses

• Highly stylized UI (can be too abstract for some users)
• Expensive solution that is out of reach for smaller companies
• Lack of advanced features and comprehensive scope 3 capabilities

Best for

Portfolio management for financial institutions and large enterprises.

Strengths

• Modern visual style & UI
• Detailed visibility into full product lifecycle (Cradle-to-grave)
• Advanced Scope 3 capabilities (allows for more accurate emissions data)

Weaknesses

• Very industry-specific focus catering mostly to F&B companies (limits their potential cient base)
• Less feature-rich than other competitor platforms

Best for

Food & beverage SMEs looking to get serious about sustainability.

Strengths

• Blockchain-enabled traceability (more accurate data)
• Platform allows for the measurement of various environmental impact categories
• Allows for ERP integration through API

Weaknesses

• Weaker platform branding and UI compared to other competitors
• Complex Implementation (integrating blockchain solutions requires significant changes to processes and systems)

Best for

Manufacturers and brands focusing on circular economy and supply chain transparency.

After identifying areas of improvement I compiled a few mood boards to help guide my design decisions. I was specifically looking for solutions that managed to organize large quantities of information without being overwhelming.

At this point I was ready to start putting things on paper (and in Figma) to sketch the layout and loosely identify the flow of each page.

Variations of organizational dashboard was the first low-fidelity wireframes that I created. Org dashboard was a baseline that would inform the rest of the design for remaining pages. As I was improving on previous low-fidelity options I started experimenting with styling, colors and information presentation.

After a few iterations Carbon Graph team was happy with the direction so I moved onto remaining pages trying to come up with the most intuitive ways to display complex information and make it interactive.

After spending some time on low-fidelity wireframes I was finally ready to refine pages' design, introduce color and work more closely on charts and graphs visual presentation.

Navigation

One of the first elements I addressed was navigation bar (which I moved to the left side earlier). Designing a unified set of icons and adopting glassmorphic style helped bring a bit more of brand personality.

Dashboards

After that I moved onto finalizing organizational and product dashboards. When creating high-fidelity wireframes I made a decision to simplify UI and only leave a small number of visuals that were vital for information display (graphs, charts, etc.).

List of design changes:

• Removed all illustrations and more complex graphics
• Used colors as accents to highlight important information (and to visually indicate quality of product's LCA)
• Adopted layout with lots of white space to help navigate through complex data
• Broke down sections into separate widgets / cards for responsiveness
• Sections have icon placeholders next to the headings (to be added at a later date)

Designing remaining pages were both fun and challenging. Since each one of them had its own unique functionality and had to present different types of data, I came up with with custom visualization tools infused with new visual style. These visualization tools are based on familiar charts and graphs yet have more flexible functionality to support Carbon Graph's tool complexity.

Embeds

Carbon Graph allows its users to share high-level product information in a form of the html embed on 3rd party websites. During redesign Carbon Graph's team asked me to visually improve the embeds and introduce new ones. I focused on clear type hierarchy and use of color to highlight changes and comparison data.

By the end of this project Carbon Graph had fully-redesigned LCA platform including old and new pages with improved information organization, cohesive UI and upgraded visual style to appeal to their target audience.

Major challenges that I faced were getting a good understanding of tool and its intended use by the desired audience and then mapping features and planning for information complexity. After spending quite some time on calls with the head of product and ideating, sketching and creating low-fidelity wireframes I managed to deliver results that Carbon Graph's team was happy with.