Impakt IQ - Scoring Platform

Impakt IQ - Scoring Platform

Impakt IQ - Scoring Platform

Redefining ESG Reporting: Building a Scalable and User-Centered Platform for Impakt IQ

Goal

Goal
The goal of the project was to design and develop a web-based platform for Impakt IQ that simplifies the ESG (Environmental, Social, Governance) audit process. The platform needed to enable companies to

- Seamlessly onboard and update organizational information
- Manage and complete ESG questionnaires
- Track their progress in real time

For Impakt IQ, the platform would serve as a central system to analyze company data and generate ESG impact reports, replacing fragmented workflows (emails, spreadsheets, third-party tools) with a unified, intuitive, and scalable digital solution.

Overview

Overview
Client
Impakt IQ
Client
Impakt IQ
Location
Hyderabad, Telangana, India
Location
Hyderabad, Telangana, India
Duration
4 Months
Duration
4 Months
Role
User Researcher, Visual Designer & User Experience Designer
Role
User Researcher, Visual Designer & User Experience Designer
Platform
Web
Platform
Web

Final Outcome

Final Outcome
An overview of IIQ Business Intelligence
An overview of IIQ Business Intelligence

About Impakt IQ

Impakt IQ enables companies to understand, report, and act on their sustainability impacts in a concise, compliant, and cost-effective manner. Impakt IQ provides a tool that delivers insights into the interconnections between sustainability, business operations, and finance—revealing how values drive value.

About Impakt IQ

Impakt IQ enables companies to understand, report, and act on their sustainability impacts in a concise, compliant, and cost-effective manner. Impakt IQ provides a tool that delivers insights into the interconnections between sustainability, business operations, and finance—revealing how values drive value.

About Impakt IQ

Impakt IQ enables companies to understand, report, and act on their sustainability impacts in a concise, compliant, and cost-effective manner. Impakt IQ provides a tool that delivers insights into the interconnections between sustainability, business operations, and finance—revealing how values drive value.

Project Goal

The objective is to develop a web-based tool for Impakt IQ that enables companies to onboard, update their information, track overall work progress, and complete questionnaires. Impakt IQ will then analyze the uploaded information and generate ESG impact reports.

Project Goal

The objective is to develop a web-based tool for Impakt IQ that enables companies to onboard, update their information, track overall work progress, and complete questionnaires. Impakt IQ will then analyze the uploaded information and generate ESG impact reports.

Project Goal

The objective is to develop a web-based tool for Impakt IQ that enables companies to onboard, update their information, track overall work progress, and complete questionnaires. Impakt IQ will then analyze the uploaded information and generate ESG impact reports.

Project Plan

Events / Rituals

Project Plan

Events / Rituals

Project Plan

Events / Rituals

Impakt IQ Kick Off Meeting

Introductory meeting where client and design studio introduced each other explaining the roles and responsibilities.

Impakt IQ Kick Off Meeting

Introductory meeting where client and design studio introduced each other explaining the roles and responsibilities.

Impakt IQ Kick Off Meeting

Introductory meeting where client and design studio introduced each other explaining the roles and responsibilities.

Design Planning Meeting

A huddle was created between designers to understand the project brief and decide initial steps such as moodboard, design language and project management.

Design Planning Meeting

A huddle was created between designers to understand the project brief and decide initial steps such as moodboard, design language and project management.

Design Planning Meeting

A huddle was created between designers to understand the project brief and decide initial steps such as moodboard, design language and project management.

Impakt IQ Discovery Sessions

Regular connect with Imapkt IQ stakeholders to understand the business process, program artifacts, feedback on wire-frames and visual design mock-ups.

Impakt IQ Discovery Sessions

Regular connect with Imapkt IQ stakeholders to understand the business process, program artifacts, feedback on wire-frames and visual design mock-ups.

Impakt IQ Discovery Sessions

Regular connect with Imapkt IQ stakeholders to understand the business process, program artifacts, feedback on wire-frames and visual design mock-ups.

Impakt IQ Sprint Planning

Internal meeting to discuss on user story assignment of various teams such as development, infrastructure and design.

Impakt IQ Sprint Planning

Internal meeting to discuss on user story assignment of various teams such as development, infrastructure and design.

Impakt IQ Sprint Planning

Internal meeting to discuss on user story assignment of various teams such as development, infrastructure and design.

Impakt Backlog Grooming

Internal meeting to discuss on pending user stories for the upcoming spring. Performed across development, infrastructure and design team.

Impakt Backlog Grooming

Internal meeting to discuss on pending user stories for the upcoming spring. Performed across development, infrastructure and design team.

Impakt Backlog Grooming

Internal meeting to discuss on pending user stories for the upcoming spring. Performed across development, infrastructure and design team.

Impakt IQ Demo

Product Demo by the tech team to Impakt IQ client to show the implementation.

Impakt IQ Demo

Product Demo by the tech team to Impakt IQ client to show the implementation.

Impakt IQ Demo

Product Demo by the tech team to Impakt IQ client to show the implementation.

Project Scope

The entire business process was organized into five stages: onboarding of companies, questionnaire management, audit execution, audit scoring, and audit outcome reporting. However, due to the constraints of a time-bound contract, the scope was limited to the first two stages.

Project Scope

The entire business process was organized into five stages: onboarding of companies, questionnaire management, audit execution, audit scoring, and audit outcome reporting. However, due to the constraints of a time-bound contract, the scope was limited to the first two stages.

Project Scope

The entire business process was organized into five stages: onboarding of companies, questionnaire management, audit execution, audit scoring, and audit outcome reporting. However, due to the constraints of a time-bound contract, the scope was limited to the first two stages.
Impakt IQ Project Scope
Impakt IQ Project Scope

Phase 1 - Customer Onboarding

This phase majorly has a contract between client and ImpaktIQ along with exchange of files between the two entities.

Phase 1 - Customer Onboarding

This phase majorly has a contract between client and ImpaktIQ along with exchange of files between the two entities.

Phase 1 - Customer Onboarding

This phase majorly has a contract between client and ImpaktIQ along with exchange of files between the two entities.

Phase 3 - Audit Execution

This phases includes an introspection of questionnaire responses by the client, detecting anomalies within and taking action to get them rectified.

Phase 3 - Audit Execution

This phases includes an introspection of questionnaire responses by the client, detecting anomalies within and taking action to get them rectified.

Phase 3 - Audit Execution

This phases includes an introspection of questionnaire responses by the client, detecting anomalies within and taking action to get them rectified.

Phase 5 - Audit Outcome Reporting

This phases includes creation of a detailed, consolidated and summarised ESG reports.

Phase 5 - Audit Outcome Reporting

This phases includes creation of a detailed, consolidated and summarised ESG reports.

Phase 5 - Audit Outcome Reporting

This phases includes creation of a detailed, consolidated and summarised ESG reports.

Phase 2 - Questionnaire Management

This phase includes preparation of a questionnaire and sending them to client for responses which will further be processed for creating a report.

Phase 2 - Questionnaire Management

This phase includes preparation of a questionnaire and sending them to client for responses which will further be processed for creating a report.

Phase 2 - Questionnaire Management

This phase includes preparation of a questionnaire and sending them to client for responses which will further be processed for creating a report.

Phase 4 - Audit Scoring

This phases includes creating a scoring chart for all the questions in the questionnaire responses. Review and approval of scoring chart.

Phase 4 - Audit Scoring

This phases includes creating a scoring chart for all the questions in the questionnaire responses. Review and approval of scoring chart.

Phase 4 - Audit Scoring

This phases includes creating a scoring chart for all the questions in the questionnaire responses. Review and approval of scoring chart.

MVP Focus

For the MVP, the scope was finalised to three phases Customer Onboarding Questionnaire Management Audit Execution Which essentially meant that we had to create the tool to be able to onboard customers, send questionnaires and create a report using the responses.

MVP Focus

For the MVP, the scope was finalised to three phases Customer Onboarding Questionnaire Management Audit Execution Which essentially meant that we had to create the tool to be able to onboard customers, send questionnaires and create a report using the responses.

MVP Focus

For the MVP, the scope was finalised to three phases Customer Onboarding Questionnaire Management Audit Execution Which essentially meant that we had to create the tool to be able to onboard customers, send questionnaires and create a report using the responses.

Research

The initial phase of our design engagement involved gaining an understanding of the business process of Impakt IQ. To facilitate this, we conducted discovery sessions with Impakt IQ stakeholders, who provided detailed explanations of each step in the business process. We then developed an activity map to document and map all activities and required documents within the process.

Research

The initial phase of our design engagement involved gaining an understanding of the business process of Impakt IQ. To facilitate this, we conducted discovery sessions with Impakt IQ stakeholders, who provided detailed explanations of each step in the business process. We then developed an activity map to document and map all activities and required documents within the process.

Research

The initial phase of our design engagement involved gaining an understanding of the business process of Impakt IQ. To facilitate this, we conducted discovery sessions with Impakt IQ stakeholders, who provided detailed explanations of each step in the business process. We then developed an activity map to document and map all activities and required documents within the process.
Stakeholder Mapping
Stakeholder Mapping

Workflow Identification

We identified the workflow into three stages namely, Preparation Getting Started Active Engagement

Workflow Identification

We identified the workflow into three stages namely, Preparation Getting Started Active Engagement

Workflow Identification

We identified the workflow into three stages namely, Preparation Getting Started Active Engagement

Stage 1 - Preparation

  • In this stage, the client is a prospect until accepted as active client.

  • Account Executive from IIQ creates a company for the client and divisions if there are any.

  • Account Executive tags the Company CXO for company, who in turn will receive credentials to login as a IIQ client.

  • Even though the account is created, client is prospect until the Statement of work is signed.

  • In Preparation stage the client will provide the trivial information and upload all the required documents.

  • Account executive will process the information provided and determine if they can proceed with client or not.

Stage 2 - Getting Started

  • In this stage, the client is accepted as an active client.

  • All the preliminary documents and information provided by the client are reviewed by Account Executive.

  • Both Client and IIQ will have agreed, signed and uploaded statement of work and engagement letters on the platform.

  • Login credentials are sent to the client for further set of activities.
    Client is expected to upload the additional due diligence documents like strategic planning document and financial

    statements.

  • Account Executive creates the workplan and is shared with the Customer CXO.

  • Customer CXO from client side will be able to view the workplan to get an estimate of work timelines.

Stage 3 - Active Engagement

  • In this stage, there is active engagement between IIQ and client.

  • Initially a mapping matrix is created which identifies all the related KPI according to Sector, Industry and Framework.

  • Customer Lead / Division Manager are assigned to KPIs who will be responsible for managing those KPIs.

  • Mapping matrix is approved once all the KPIs are assigned and added to the mapping matrix.

  • Questionnaires are created for respective KPIs and sent to the assigned Customer Lead / Division Managers.

  • Progress of questionnaires are tracked by the Account Executive who can also send reminders for completion of questionnaires.

  • Account executive can download the individual responses by Customer Lead / Division Managers.

  • Account executive can download the merged questionnaire responses which contains all the answers.

  • Downloaded spreadsheet can be integrated in the workbook to generate the reports and create scorecards and summaries.

Persona

Given the number of individuals involved in the entire process, we were prompted to outline all relevant personas and identify the key personas who will serve as the primary users of the product. These include the account executive, industry specialist, analyst, and audit point of contact. We started focus more on the key personas as they performed the major tasks across the platform.

Persona

Given the number of individuals involved in the entire process, we were prompted to outline all relevant personas and identify the key personas who will serve as the primary users of the product. These include the account executive, industry specialist, analyst, and audit point of contact. We started focus more on the key personas as they performed the major tasks across the platform.

Persona

Given the number of individuals involved in the entire process, we were prompted to outline all relevant personas and identify the key personas who will serve as the primary users of the product. These include the account executive, industry specialist, analyst, and audit point of contact. We started focus more on the key personas as they performed the major tasks across the platform.

Impakt IQ Personas

Account Executive

Intake of Business Information

Intake of Due Diligence Document

Scope of work generation

Contract execution

Invoicing

Industry Specialist

View uploaded business documents

Create ESG mapping matrix

KPI management

Workflow implementation

Analyst

Build Metadata based on industry sector and KPIs

Client Personas

Customer CXO

Uploading DD docs

SOW approval

Contract approval

Review and approve the ESG Matrix

Audit POC / Customer Lead / Division Manager

Audit POC / Customer Lead / Division Manager

Upload Due Diligence Documents

Invoice Approval

Review and approve the ESG Matrix

Answer the questionnaire

Account Executive Persona
Account Executive Persona
Customer CXO Persona
Customer CXO Persona

Information Architecture

Upon identifying the personas, it was essential to determine the key screens and data required by each primary persona. I developed a dynamic Information Architecture, incorporating all the documents provided by the Impakt IQ stakeholders. The following cards give an overview of the modules and data which were identified.

Information Architecture

Upon identifying the personas, it was essential to determine the key screens and data required by each primary persona. I developed a dynamic Information Architecture, incorporating all the documents provided by the Impakt IQ stakeholders. The following cards give an overview of the modules and data which were identified.

Information Architecture

Upon identifying the personas, it was essential to determine the key screens and data required by each primary persona. I developed a dynamic Information Architecture, incorporating all the documents provided by the Impakt IQ stakeholders. The following cards give an overview of the modules and data which were identified.

Login Page

A. Login


Regular Login


Email Address

Password

Remember Me

Forgot Password*

Login*


Forgot Password


Email Address

Reset Password*

Back to Login*


Banner Notification

Companies & Divisons

A. Create Company*


B. Companies & Division Table


Company Stages


All Companies

Preparation

Active Engagement

Inactive


Search By Company

Filter By Sector

Multi-select Actions*

Company Row

Company / Division

Sector

Status

Module

CXO / Lead

Start Date

Actions

Edit*

Mark as Inactive*

Delete*

Pagination


Create Company

A. Company Details

Company Name

Service Offering

Deliverable

Module


B. Company CXO Details


First Name

Last Name

Position

Email


C. Send Login Credentials


Checkbox To send Login Details

Company Setup

0. Overview

A. Profile

B. Documents

C. Sector & Industries

D. Frameworks

E. Workplan

F. Questionnaire

G. Mapping Matrix

Create Division

A. Division Details

Division Name

Scope of work

B. Division CXO

First Name

Last Name

Position

Email

Send login credentials to user

Overview

A. Required Document Upload


Business Structure

Organization Chart

Strategic Plan

Sustainability Report

Marketing Plan

Annual Report


B. Account Executive Details

Name

Position

Email

Phone


C. Customer CXO Details

Name

Position

Email

Phone

A. Profile

Primary Information


Company Name

Status

Assign Customer CXO*

CXO Email

Change CXO*

Resend Credentials

Delete User

Description

Company Type

No of Divisions

Countries of Operation

Annual Revenue


Head Office Location


Address Line 1

Address Line 2

City

State

Zip Code

Country


Secondary Information

No of Employees

No of Locations, Retails or Outlets


Impact Report Selection

Service Offering

Deliverable

Module


Banner Notification

B. Documents

Search

Upload Document*

Document Listing Table

Name

Type

Owner

Upload Date


Banner Notification

C. Sector & Industries

Sector Selection


Consumer Goods

Financials

Healthcare

Resource Transformation

Services

Transportation

Extractives & Mineral Processing

Food & Beverage

Infrastructure

Renewable Resources & Alternative Energy

Technology & Communication


Industry Selection

Search

Meat, Poultry & Dairy

Processed Foods

Non-alcoholic beverages

Alcoholic beverages

Tobacco

Food retailers and distributors

D. Frameworks

Framework Selection


ISSB S1

ISSB S2

California SB253


Tooltip Description

View Questions

A. Customer CXO Details

Questionnaire Details


Progress

Dimension

Industry

Sector

KPI

Topic

Operating Division

Scope

Framework

Priority

Division manager


Question Selection

Management Domain

Question Details

Question

Answers

Navigation

Save Progress

Submit Questionnaire


Select KPI

A. Create New KPI

B. Search

C. Filter By

D. Show

E. KPI Listing

Dimension

Topic

Material KPI

Sector

Industry

Priority

Scope

Framework

Tooltip

Select

Create New KPI

A. Primary Information

Sector

Industry

Material KPI Description

Dimension

Topic

Scope

Framework


B. Secondary Information

Priority

Code

Public Company

Applicable to SME

E. Workplan

Service Offering

Deliverable

Search

Details

Topic

Assigned To

Approved By

Start Date

End Date

Approval

Approval Comments

Timeline

Gantt Chart

Month Navigation

Tooltip Description

F. Questionnaire

Send Questionnaire

Question - KPI

View Questions*

Download Responses*

Send Reminder*

Dimension

KPI

Topic

Operating Division

Scope

Framework

Priority

Division manager

G. Mapping Matrix

Sector & Industry Information

Select KPI*

Approve Mapping Matrix*

Search

Filter By

Sort By

KPI Details

Remove*

Edit*

Dimension

KPI

Topic

Operating Division

Scope

Framework

Priority

Division manager

Wireframes

With the personas and information architecture established, providing an overview of the required screens and data, I began designing basic low-fidelity screens for processes such as login and user management. The wireframes were then reviewed with Impakt IQ clients for approval. These discussions helped identify any missing elements and allowed for modifications to the screens to meet the specific requirements.

Wireframes

With the personas and information architecture established, providing an overview of the required screens and data, I began designing basic low-fidelity screens for processes such as login and user management. The wireframes were then reviewed with Impakt IQ clients for approval. These discussions helped identify any missing elements and allowed for modifications to the screens to meet the specific requirements.

Wireframes

With the personas and information architecture established, providing an overview of the required screens and data, I began designing basic low-fidelity screens for processes such as login and user management. The wireframes were then reviewed with Impakt IQ clients for approval. These discussions helped identify any missing elements and allowed for modifications to the screens to meet the specific requirements.
Login Page Wireframe
Login Page Wireframe
Companies Page Wireframe
Companies Page Wireframe
Company Setup Page Wireframe
Company Setup Page Wireframe

Visual Design

In addition to the branding guidelines provided by the client, we sought to gain a deeper understanding of the desired look and feel for the product. To facilitate this, we presented a mood board featuring images that struck the appropriate balance between the Impakt IQ brand guidelines and the visual direction envisioned for the product.

Visual Design

In addition to the branding guidelines provided by the client, we sought to gain a deeper understanding of the desired look and feel for the product. To facilitate this, we presented a mood board featuring images that struck the appropriate balance between the Impakt IQ brand guidelines and the visual direction envisioned for the product.

Visual Design

In addition to the branding guidelines provided by the client, we sought to gain a deeper understanding of the desired look and feel for the product. To facilitate this, we presented a mood board featuring images that struck the appropriate balance between the Impakt IQ brand guidelines and the visual direction envisioned for the product.
Visual Design Explorations
Visual Design Explorations

Color Palette

A color palette was developed based on the brand guidelines provided by Impakt IQ, with the colors primarily falling within the warm spectrum. The palette was further expanded to include various shades and tints of these colors to represent different component states across the product. Neutral greys were also incorporated to establish text hierarchy, such as labels and absolute values.

Color Palette

A color palette was developed based on the brand guidelines provided by Impakt IQ, with the colors primarily falling within the warm spectrum. The palette was further expanded to include various shades and tints of these colors to represent different component states across the product. Neutral greys were also incorporated to establish text hierarchy, such as labels and absolute values.

Color Palette

A color palette was developed based on the brand guidelines provided by Impakt IQ, with the colors primarily falling within the warm spectrum. The palette was further expanded to include various shades and tints of these colors to represent different component states across the product. Neutral greys were also incorporated to establish text hierarchy, such as labels and absolute values.
Color Palette
Color Palette

Visual Explorations

Once the visual branding and color palette were finalized, we proceeded to create several explorations for the login screens, which would serve as the user's initial point of engagement. It was crucial to establish a strong foundation for the subsequent screens. We explored both dark and light themes for the login page and extended the design approach to the companies page.

Visual Explorations

Once the visual branding and color palette were finalized, we proceeded to create several explorations for the login screens, which would serve as the user's initial point of engagement. It was crucial to establish a strong foundation for the subsequent screens. We explored both dark and light themes for the login page and extended the design approach to the companies page.

Visual Explorations

Once the visual branding and color palette were finalized, we proceeded to create several explorations for the login screens, which would serve as the user's initial point of engagement. It was crucial to establish a strong foundation for the subsequent screens. We explored both dark and light themes for the login page and extended the design approach to the companies page.
Visual Explorations
Visual Explorations
Visual Explorations
Visual Explorations

Design System

In the initial phase of visual design, we reached a consensus to adopt the Material Design UI for the design system. We explored several available design systems, including Material, Ant Design System, Fluent, Carbon, and Lightning. These design systems were integrated, with the colour schemes adjusted to align with the branding colours.

Design System

In the initial phase of visual design, we reached a consensus to adopt the Material Design UI for the design system. We explored several available design systems, including Material, Ant Design System, Fluent, Carbon, and Lightning. These design systems were integrated, with the colour schemes adjusted to align with the branding colours.

Design System

In the initial phase of visual design, we reached a consensus to adopt the Material Design UI for the design system. We explored several available design systems, including Material, Ant Design System, Fluent, Carbon, and Lightning. These design systems were integrated, with the colour schemes adjusted to align with the branding colours.
Material Design System
Material Design System

User Interface

Below are several user interface screens of the product. The screen designs were prioritized for simplicity, featuring clean compositions with ample white space and a focused mode for interactions such as modals. This approach facilitated a streamlined view, allowing users to engage with one activity at a time.

User Interface

Below are several user interface screens of the product. The screen designs were prioritized for simplicity, featuring clean compositions with ample white space and a focused mode for interactions such as modals. This approach facilitated a streamlined view, allowing users to engage with one activity at a time.

User Interface

Below are several user interface screens of the product. The screen designs were prioritized for simplicity, featuring clean compositions with ample white space and a focused mode for interactions such as modals. This approach facilitated a streamlined view, allowing users to engage with one activity at a time.
IIQ Mockup Screens
IIQ Mockup Screens

Developer Hand-off

The product screens and flows were reviewed with Impakt IQ for feedback and revisions. Once the screens and flows were finalised, I transferred all the screens to development and marked them as "Dev Ready" on Figma. Figma proved to be an invaluable tool for communicating changes to the developers, as it provided essential details such as dimensions, spacing, and attributes for front-end development. Data was integrated through APIs, contributing to the creation of a robust testing environment.

Developer Hand-off

The product screens and flows were reviewed with Impakt IQ for feedback and revisions. Once the screens and flows were finalised, I transferred all the screens to development and marked them as "Dev Ready" on Figma. Figma proved to be an invaluable tool for communicating changes to the developers, as it provided essential details such as dimensions, spacing, and attributes for front-end development. Data was integrated through APIs, contributing to the creation of a robust testing environment.

Developer Hand-off

The product screens and flows were reviewed with Impakt IQ for feedback and revisions. Once the screens and flows were finalised, I transferred all the screens to development and marked them as "Dev Ready" on Figma. Figma proved to be an invaluable tool for communicating changes to the developers, as it provided essential details such as dimensions, spacing, and attributes for front-end development. Data was integrated through APIs, contributing to the creation of a robust testing environment.
Developer Mode Figma
Developer Mode Figma

Design Challenges

User Roles The business process involved multiple users, each performing various actions. The designs needed to accommodate different views for each role. In some cases, a single role could perform multiple functions, requiring an option for role switching. A dedicated Role-Based Access Control (RBAC) exercise was conducted to define the scope of each role and the extent of access granted to them. Volume of Information Certain screens were required to display large volumes of information, necessitating the development of strategies to manage these cases. The challenge was to maintain a simple and clean product design, with appropriate whitespace, while effectively managing the substantial amount of information. Development Challenges For specific screens, such as the work plan, which needed to display a list of items alongside a Gantt chart to show progress and action items, it was challenging to achieve the desired user interface with the available technical libraries. As a result, I had to redesign the screens to align with the capabilities of the technology stack. Collaboration with the front-end development team was essential to implement the design in the most efficient manner possible. Libraries & Tables Several screens required the listing of cards with multiple values, with functionality for filtering and sorting the listings. To meet these requirements, multi-level filtering was incorporated, allowing users to select parent categories followed by child categories. Close collaboration with the business analyst was necessary to fully understand the requirements and design the components accordingly.

Design Challenges

User Roles The business process involved multiple users, each performing various actions. The designs needed to accommodate different views for each role. In some cases, a single role could perform multiple functions, requiring an option for role switching. A dedicated Role-Based Access Control (RBAC) exercise was conducted to define the scope of each role and the extent of access granted to them. Volume of Information Certain screens were required to display large volumes of information, necessitating the development of strategies to manage these cases. The challenge was to maintain a simple and clean product design, with appropriate whitespace, while effectively managing the substantial amount of information. Development Challenges For specific screens, such as the work plan, which needed to display a list of items alongside a Gantt chart to show progress and action items, it was challenging to achieve the desired user interface with the available technical libraries. As a result, I had to redesign the screens to align with the capabilities of the technology stack. Collaboration with the front-end development team was essential to implement the design in the most efficient manner possible. Libraries & Tables Several screens required the listing of cards with multiple values, with functionality for filtering and sorting the listings. To meet these requirements, multi-level filtering was incorporated, allowing users to select parent categories followed by child categories. Close collaboration with the business analyst was necessary to fully understand the requirements and design the components accordingly.

Design Challenges

User Roles The business process involved multiple users, each performing various actions. The designs needed to accommodate different views for each role. In some cases, a single role could perform multiple functions, requiring an option for role switching. A dedicated Role-Based Access Control (RBAC) exercise was conducted to define the scope of each role and the extent of access granted to them. Volume of Information Certain screens were required to display large volumes of information, necessitating the development of strategies to manage these cases. The challenge was to maintain a simple and clean product design, with appropriate whitespace, while effectively managing the substantial amount of information. Development Challenges For specific screens, such as the work plan, which needed to display a list of items alongside a Gantt chart to show progress and action items, it was challenging to achieve the desired user interface with the available technical libraries. As a result, I had to redesign the screens to align with the capabilities of the technology stack. Collaboration with the front-end development team was essential to implement the design in the most efficient manner possible. Libraries & Tables Several screens required the listing of cards with multiple values, with functionality for filtering and sorting the listings. To meet these requirements, multi-level filtering was incorporated, allowing users to select parent categories followed by child categories. Close collaboration with the business analyst was necessary to fully understand the requirements and design the components accordingly.

Project Learning

Environment, Social & Governance Assessment This project provided a comprehensive understanding of the ESG (Environmental, Social, and Governance) audit process. It involved evaluating how a company manages climate change, waste, energy consumption, and carbon emissions, as well as its financial practices and risk management. Through this experience, I gained valuable insights into the significance of ESG assessments, which play a crucial role in helping companies understand their sustainability efforts and social responsibility. Project Management We utilized Azure DevOps to manage the scrum methodology, creating tickets for design, infrastructure, and development tasks. These tickets were meticulously tracked and updated daily to reflect the status of each task. This process facilitated a better understanding of task dependencies and enabled us to address challenges on a daily basis, ensuring a consistent rhythm in the project development. Team Collaboration Collaboration with the Business Analyst during the discovery phase was instrumental in uncovering numerous insights. Engagement with front-end developers provided a deeper understanding of the design interaction patterns. The wireframes and screen flows created in collaboration with back-end developers allowed for effective database creation, which in turn facilitated the development of efficient APIs.

Project Learning

Environment, Social & Governance Assessment This project provided a comprehensive understanding of the ESG (Environmental, Social, and Governance) audit process. It involved evaluating how a company manages climate change, waste, energy consumption, and carbon emissions, as well as its financial practices and risk management. Through this experience, I gained valuable insights into the significance of ESG assessments, which play a crucial role in helping companies understand their sustainability efforts and social responsibility. Project Management We utilized Azure DevOps to manage the scrum methodology, creating tickets for design, infrastructure, and development tasks. These tickets were meticulously tracked and updated daily to reflect the status of each task. This process facilitated a better understanding of task dependencies and enabled us to address challenges on a daily basis, ensuring a consistent rhythm in the project development. Team Collaboration Collaboration with the Business Analyst during the discovery phase was instrumental in uncovering numerous insights. Engagement with front-end developers provided a deeper understanding of the design interaction patterns. The wireframes and screen flows created in collaboration with back-end developers allowed for effective database creation, which in turn facilitated the development of efficient APIs.

Project Learning

Environment, Social & Governance Assessment This project provided a comprehensive understanding of the ESG (Environmental, Social, and Governance) audit process. It involved evaluating how a company manages climate change, waste, energy consumption, and carbon emissions, as well as its financial practices and risk management. Through this experience, I gained valuable insights into the significance of ESG assessments, which play a crucial role in helping companies understand their sustainability efforts and social responsibility. Project Management We utilized Azure DevOps to manage the scrum methodology, creating tickets for design, infrastructure, and development tasks. These tickets were meticulously tracked and updated daily to reflect the status of each task. This process facilitated a better understanding of task dependencies and enabled us to address challenges on a daily basis, ensuring a consistent rhythm in the project development. Team Collaboration Collaboration with the Business Analyst during the discovery phase was instrumental in uncovering numerous insights. Engagement with front-end developers provided a deeper understanding of the design interaction patterns. The wireframes and screen flows created in collaboration with back-end developers allowed for effective database creation, which in turn facilitated the development of efficient APIs.

Thank You

for reading the case study

Thank You

for reading the case study

Thank You

for reading the case study