Breathe ESG Design System Components
Breathe ESG Design System Components
Breathe ESG Dashboard
Breathe ESG Dashboard

Breathe ESG

How we helped Breathe ESG redesign by leveraging design sprints

Expertise

UI Design, Design System, Design Sprints

Deliverables

Design System and Platform Redesign

Duration

8 weeks

Breathe ESG

How we helped Breathe ESG redesign by leveraging design sprints

Expertise

UI Design, Design System, Design Sprints

Deliverables

Design System and Platform Redesign

Duration

8 weeks

about the client

The Brief

Breathe ESG (Environment, Social, Governance) is an enterprise SaaS for end-to-end sustainability management. Their cutting-edge platform is where technology meets sustainability by transforming raw data into actionable insights for their customers. They aim to simplify the complexities of ESG, making sustainability both accessible and actionable for all

about the client

The Brief

Breathe ESG (Environment, Social, Governance) is an enterprise SaaS for end-to-end sustainability management. Their cutting-edge platform is where technology meets sustainability by transforming raw data into actionable insights for their customers. They aim to simplify the complexities of ESG, making sustainability both accessible and actionable for all

Breathe ESG Logo
Breathe ESG Logo
  • ENVIRONMENT

  • SOCIAL

  • GOVERNANCE

  • ENVIRONMENT

  • SOCIAL

  • GOVERNANCE

the challenge

Redesign the platform in 8 weeks

While they had an existing platform, it felt old and outdated which translated into declining confidence from their clients. The platform was functional but wasn’t optimised for the actual users.

 That’s where we stepped in, and took on the challenge to redesign their platform within 8 weeks by leveraging design sprints.

the challenge

Redesign the platform in 8 weeks

While they had an existing platform, it felt old and outdated which translated into declining confidence from their clients. The platform was functional but wasn’t optimised for the actual users.

 That’s where we stepped in, and took on the challenge to redesign their platform within 8 weeks by leveraging design sprints.

1000

top companies to report

SEBI stipulates that the top 1000 listed companies must report their ESG metrics

$2098.9 mn

dollar industry by 2030

According to the market research by P&S, ESG reporting software will grow to reach USD 2098.9 million by 2030

>50%

ESG disclosure

Among the top listed companies in India, disclosure was over 50% in FY 2022-23

>50%

ESG disclosure

Among the top listed companies in India, disclosure was over 50% in FY 2022-23

1000

top companies to report

SEBI stipulates that the top 1000 listed companies must report their ESG metrics

$2098.9 mn

dollar industry by 2030

According to the market research by P&S, ESG reporting software will grow to reach USD 2098.9 million by 2030

Sustainability is the hottest topic in every large corporation today.

Sustainability is the hottest topic in every large corporation today.

Karantaj Singh & Shayak Chaterjee

Founders, Breathe ESG

Getting started

To get at the heart of what made their existing platform hard to use, we started out by getting an understanding of how ESG reporting worked as a whole. This helped us understand the complexity of each feature and informed our sprint breakdown. We were also able to understand the reporting requirements of different industries and product usage of different user types in a system.

Getting started

To get at the heart of what made their existing platform hard to use, we started out by getting an understanding of how ESG reporting worked as a whole. This helped us understand the complexity of each feature and informed our sprint breakdown. We were also able to understand the reporting requirements of different industries and product usage of different user types in a system.

Fistbump: Tibba
Fistbump: Breathe ESG
Fistbump: Tibba
Fistbump: Breathe ESG

Structuring our design sprints

To successfully leverage design sprints, we came up with a set structure for each sprint.

 This process helped us have quick turn around times, get our solutions validated by the stakeholders at Breathe ESG and ensured that we had enough time to iterate and prepare for handoff.

Structuring our design sprints

To successfully leverage design sprints, we came up with a set structure for each sprint.

 This process helped us have quick turn around times, get our solutions validated by the stakeholders at Breathe ESG and ensured that we had enough time to iterate and prepare for handoff.

Sprint 1 - Visual Design, Onboarding & Data Entry

2 weeks

Onboarding and data entry was the ideal piece to begin with. It helped us gather the required context and start thinking about ways to enhance the user experience from the very beginning of a user’s journey.

Sprint 2 - Materiality, Supplier Assessment & Settings

1 week

By the second sprint, we had a clear visual language and the base of our design system allowing us to execute on a quicker turnaround time.

Sprint 3 - Targeting, Reporting & Template Creation

2 weeks

Having a deeper understanding of the product from the past 2 sprints was critical to this sprint as these features were contextual to different user types.

Sprint 4 - Analytics + Dashboard

2 weeks

Sprint 4 proved to be the trickiest part of the project. With limited clarity at the onset there was an element of discovery to this piece. In collaboration with the client, we came up with a customisable dashboard layout that allowed different users to prioritise the metrics they cared about the most.

Sprint 5 - Visual Enhancements

1 week

With usability and product flows taken care of, we revisited the visual language to see what we could iterate on with full visibility of the product. We were able to make improvements to the visual hierarchy on the product and to our design system.

Sprint 1 - Visual Design, Onboarding & Data Entry

2 weeks

Sprint 2 - Materiality, Supplier Assessment & Settings

1 week

Sprint 3 - Targeting, Reporting & Template Creation

2 weeks

Sprint 4 -Analytics + Dashboard

2 weeks

Sprint 5 - Visual Enhancements

1 week

Breathe ESG: Sprint 1 - Visual Design, Onboarding & Data Entry
Breathe ESG: Sprint 1 - Materiality, Supplier Assessment & Settings

Design system from day 1

This approach enabled us setup the design components at the very onset of the project and helped us iterate faster as we went along.

 This was beneficial in the long run as it accelerated turn around times and gave the design system time to evolve and grow over the course of the engagement.

Design system from day 1

This approach enabled us setup the design components at the very onset of the project and helped us iterate faster as we went along.

 This was beneficial in the long run as it accelerated turn around times and gave the design system time to evolve and grow over the course of the engagement.

Drag to compare
Left: Wireframe | Right: High Fidelity Mockup

Wireframe

High Fidelity Mockup

Breathe ESG: Header
Breathe ESG: Header
Breathe ESG: Empty State
Breathe ESG: Empty State
Breathe ESG: Login
Breathe ESG: Login
Breathe ESG: Customer Support
Breathe ESG: Upload File
Breathe ESG: Business Group
Breathe ESG: Currency

Designing for data density

The platform focuses on transforming raw data into actionable insights for upper management within organisations. This meant making data easily consumable for our users in the form of tables, KPIs and data visualisations

Breathe ESG: Average Score
Breathe ESG: Number of suppliers
Breathe ESG: Risk Classification
Breathe ESG: Total waste generated
Breathe ESG: Table

Viewing Assessment 1

Edit Assessment

Name

Search for a supplier

Invite Suppliers

View Result

Supplier Assessment

North India Region

John Doe

SUPPLIER ASSESSMENT

SUPPLIERS

For:

FY 2023-24

Designing for data density

The platform focuses on transforming raw data into actionable insights for upper management within organisations. This meant making data easily consumable for our users in the form of tables, KPIs and data visualisations

Breathe ESG: Average Score
Breathe ESG: Number of suppliers
Breathe ESG: Risk Classification
Breathe ESG: Total waste generated
Breathe ESG: Table

Contextual hand-holding

The platform came with it’s own fair share of complexity, ranging from domain specific terminology to system specific responses. In order to make the platform easier for user’s to comprehend, we introduced tool-tips, toasts and easy filters on tables.

Contextual hand-holding

The platform came with it’s own fair share of complexity, ranging from domain specific terminology to system specific responses. In order to make the platform easier for user’s to comprehend, we introduced tool-tips, toasts and easy filters on tables.

Reason for rejection

Incorrect Evidence

Product created successfully!

Error while creating the product

Please select Business Units to add to Business Groups

Search for industry

Steel

Iron

Plastics

Rubber Goods

Reset

Apply Filter

Singular method for data entry

We introduced a streamlined and easy-to-use data input method tailored to accommodate diverse user needs. The simplification not only enhanced the user experience but also extended to the tech implementation, making it a smooth and easy process.

Singular method for data entry

We introduced a streamlined and easy-to-use data input method tailored to accommodate diverse user needs. The simplification not only enhanced the user experience but also extended to the tech implementation, making it a smooth and easy process.

Designing for different users by role

Most organisations have pre-defined levels of hierarchy and function. Breathe ESG caters to these constructs and provides role based access control (RBAC) and caters to all levels across the company

Designing for different users by role

Most organisations have pre-defined levels of hierarchy and function. Breathe ESG caters to these constructs and provides role based access control (RBAC) and caters to all levels across the company

Breathe ESG: Corporate Hierarchy
Breathe ESG: Corporate Hierarchy

Hierarchical structure of organisations

System Adminstrator

Easily manage setting up and maintaining the ESG platform

System Adminstrator

Easily manage setting up and maintaining the ESG platform

Head of ESG

Have access to a dashboard that empowers decision making based on reporting on ESG metrics

Head of ESG

Have access to a dashboard that empowers decision making based on reporting on ESG metrics

Business Group/Unit Reporting Officer

Reporting on performance of various ESG metrics for their area of concern and have discussions with senior leadership

Business Group/Unit Reporting Officer

Reporting on performance of various ESG metrics for their area of concern and have discussions with senior leadership

Business Unit Contributor

Have a simple process for reporting on metrics that have been assigned to them

Business Unit Contributor

Have a simple process for reporting on metrics that have been assigned to them

Auditor

Review the data provided by the contributors and ensure it is complete as well as correct

Auditor

Review the data provided by the contributors and ensure it is complete as well as correct

Different user types in an organisation

  • ENVIRONMENT

  • SOCIAL

  • GOVERNANCE

success story

The outcome

Following our engagement, Breathe ESG has experienced substantial product-led growth. A long-sought client finally signed with them after seeing the revamped platform.

success story

The outcome

Following our engagement, Breathe ESG has experienced substantial product-led growth. A long-sought client finally signed with them after seeing the revamped platform.

Impact on sales

Improved conversions with new design

Faster and more effective demos leading to top of funnel growth

Gained access to global markets and enterprises with the redesign

Impact on sales

Improved conversions with new design

Faster and more effective demos leading to top of funnel growth

Gained access to global markets and enterprises with the redesign

Product release cycles

50% faster shipping enabled by new design system

Reduced time spent on front-end development and QC

Product release cycles

50% faster shipping enabled by new design system

Reduced time spent on front-end development and QC

Existing customers

Elevated customer satisfaction and engagement

Existing customers

Elevated customer satisfaction and engagement

  • ENVIRONMENT

  • SOCIAL

  • GOVERNANCE

  • ENVIRONMENT

  • SOCIAL

  • GOVERNANCE

  • ENVIRONMENT

  • SOCIAL

  • GOVERNANCE

Tibba Design Studio are perhaps one of the best product design studios I have worked with. Professional to the core they are good at understanding client and end user requirements, breaking it down and providing detailed mockups that help you rethink your own solution, in a better light! Highly recommend Rahul and team, if you or someone you know are looking for Product Design services!

Tibba Design Studio are perhaps one of the best product design studios I have worked with. Professional to the core they are good at understanding client and end user requirements, breaking it down and providing detailed mockups that help you rethink your own solution, in a better light! Highly recommend Rahul and team, if you or someone you know are looking for Product Design services!

Avinash Pinto

Product Manager, Breathe ESG

Other projects

Other projects

Firstpost: Illustration

App

Website

News & Media

How we helped Firstpost 2x their traffic through a strategic redesign

Shyft & Mindhouse: Illustration depicting mental health and physical well being

App

Website

Fitness

How we helped Shyft & Mindhouse grow their business and supercharge product led growth