Designing Carbon Transparency
When our team joined, the platform was functional but lacked usability, consistency, and a scalable design approach. The absence of a design system made it difficult for both designers and developers to collaborate effectively, while the interface struggled to present complex climate data in a clear and user-friendly way. To address these challenges, our team introduced a unified design system, streamlined the UX workflow for new features, and worked closely with climate experts to transform technical requirements into intuitive high-fidelity designs.
At the start of the project, our team focused on understanding the platform from a user-centered perspective. We began by breaking down all the user flows, mapping out each process to see what users could do at every step and identifying potential friction points. To ensure we considered the diverse users of the platform, we created personas representing different roles and goals, which helped us prioritize which areas needed the most attention.
Next, we conducted a thorough audit of the existing interface. Screens were added to a shared workspace, and we used sticky notes to document both UI and UX issues. Each sticky captured problems such as confusing navigation, inconsistent typography, redundant components, and unclear visual hierarchy. We also flagged UX pain points, including complex data presentation and hard-to-access features. This process helped the team visualize the full scope of work, prioritize redesign efforts, and create a roadmap for improving the platform systematically.
After completing the audit and documenting UX and UI issues, our team identified the main challenge: the lack of a consistent, scalable design system was causing inefficiency, inconsistencies, and high effort for future features and white-labeling. To address this, we conceptualized and implemented Atlas, a design system that would provide a unified foundation for both designers and developers.
The team began by creating an implementation plan, researching best practices, and defining how the design system would function and deliver value across the platform. Atlas was structured into three layers to ensure scalability and clarity:
Once the structure of Atlas was defined (Core → Mantle → Crust), our team began building the components practically. We designed and developed all reusable components, including buttons, input fields, forms, cards, navigation elements, charts, and data visualizations, based on the defined typography, colors, spacing, and iconography.
We also set up theme variables, allowing components to automatically adapt to different branding skins and white-labeling requirements. By integrating Atlas with Storybook, developers could access fully specified, production-ready components with defined behaviors and animations, ensuring faster development, consistent implementation, and easier iterations.
This hands-on implementation turned Atlas from a conceptual design system into a scalable, practical toolkit, enabling designers and developers to work efficiently, maintain consistency across the platform, and speed up delivery for new features.
With Atlas in place, our team established a structured workflow to ensure that every new feature, enhancement, or bug fix was designed and implemented consistently, efficiently, and with minimal rework. This workflow acted as a step-by-step guide, ensuring that the design system was leveraged at every stage and that user needs remained central to the process.
The workflow included the following stages:
1 . Research: In this stage, the team focused on gathering all relevant insights to inform design decisions for new features or fixes. Our approach included:
2 . User Story Mapping: Breaking down tasks and actions from the user’s perspective to identify gaps and ensure alignment with objectives.
3 . User Flows: Visualizing the step-by-step interactions a user would take, highlighting potential friction points and optimization opportunities.
4 . Wireframes: Creating low-fidelity layouts to explore solutions quickly and gather early feedback. The designs created in this stage will be cross checked with the developers for technical feasibility.
5 . High-Fidelity Mockups: Designing polished screens using Atlas components, ensuring consistency, scalability, and adherence to the design system.
6 . Prototyping: Building interactive prototypes to validate usability, flows, and functionality before development.
7 . Accessibility & 11×11 Checklist: Conducting final quality checks to ensure accessibility compliance, responsiveness, and alignment with UX best practices.
Documentation was created at each stage to record design decisions, component usage, interactions, and layout guidelines. This made the workflow transparent, reusable, and easy to follow for both designers and developers, reducing ambiguity, speeding up handoff, and ensuring future features aligned with the design system.
The implementation of Atlas transformed the way our team approached design and development, delivering tangible benefits across the platform:
With Atlas in place, we shifted focus from redesign to building business-critical features. Many requests came from climate consultants and stakeholders, requiring the platform to handle complex reporting and carbon management tasks.
To ensure our features and workflows were effective, we integrated Hotjar and Amplitude funnels across the platform. These tools allowed us to observe user interactions, track navigation patterns, and identify potential pain points. By analyzing heat maps, click behavior, and user flows, we could validate our design decisions and measure feature adoption, providing actionable insights for ongoing UX improvements.
What went well
Challenges faced
How we would approach similar projects differently
