Goal

Our goal was to completely redesign Xtonnes web platform and add a lot of new functionality.

Initial structure

My task was to design Aim & Act and Analyitcs sections.
Aim & Act is a place where the user can set goals and log progress. And Analytics is where they can see all their data and metrics.

Competitor analysis

We analysed 8 web competitors, and these are the main insights we found out:

Interviews

Still we didn’t know anything about how people use our product . So we decided to ask the users. We talked to 10+ product managers, ESG program managers, procurement team members and other staff involved in the carbon dioxide reduction programs inside companies. Here’s what we found out.

Interview insights

Then we singled out the main insights from the interviews and created hypotheses for Xstonnes.

CJM

1st user segment consists of specialists who are engaged in uploading / editing data for the product and interacts a lot with the interface

2nd user segment consists of senior product specialists who look at indicators on the dashboard and exports data, does not often work with the interface and is not so much immersed in the process

Main flow

A senior product specialist who looks at indicators on the dashboard and exports data, does not often work with the interface and is not so much immersed in the process

Aim & Act: Job stories

Aim & Act is a section of the app where users can set their goals, create or select initiatives, achieve them and track progress towards their goals.

Aim & Act is a section of the app where users can set their goals, create or select initiatives, achieve them and track progress towards their goals. Based on the interviews we developed the following job strories.

Aim & Act flow

Aim & Act Testing

We tested our designs on 3 people involved in the carbon dioxide reduction programs inside companies. Each participant had a 1-hour long interview with us during which they went through the Aim & Act flow and answered our questions. Later in this case, you will see the before and after designs one after another. The screens without the before version didn't undergo any significant changes after the testing.

We created a document where we described criteria for success and levels of usability problem impact.

We broke down the Aim & Act flow into tasks and created hypotheses that will help is understand if the user manage to complete the task using our design or not. Here's an example of a task.

We recorded the interviews and then collected the insights into a document. Here's an excerpt of such a document.

Onboarding

First time users see the guides that help them navigate the section. They can also click on the help section to get answers to their questions.

Set targets

First, the user has to set their targets. They can set only one – overarching target and set other targets later. By clicking on the help button, they can get more information on how to complete this task

The tasks are divided into obligatory and optional, as there are only one obligatory task

We added descriptions to overarching targets so that the users won't have problems understanding them

We added additional tooltips for most complicated notions. The users don't have to go to the help section all the time

The graph shows the amount of emissions and total offset costs. The user can also click through other scenarios to see the difference

The next sections are optional and more complicated. The user can edit them after they have saved their overarching target.

BEFORE SECONDARY RESEARCH

Targets by scope are autofilled, but the user can change them based on their company and product knowledge.

The user can select categories related to their business and insert growth, the program calculates emission reduction by the target year.

The user can add breakpoint years to outline the pace of growth.

An intensity target is a metric that sets a company’s emissions targets relative to some sort of economic output. That output can be anything from number of employees or revenue, among others. This allows a business to set emissions reduction targets while accounting for economic growth.

Set targets

AFTER SECONDARY RESEARCH

Feedback: "It's not clear that first 4 options are clickable".
Solution: We added radio buttons to make them look clickable.

Feedback: "Location/market based targets are not immediately obvious". Solution: We added more tooltips throughout this page, as this comment was recurrent. We also added a FAQ box after almost every section, to give in depth explanation.

Feedback: It turned out that most respondents were interested in getting annual and not total offset cost data, plus some of them assumed that the offset cost graph shows how much you'll save and not spend.
Solution: We added annual offset cost data, the exact amounts will show on hover

Feedback: "Need more information on each of the targets." "Selecting targets gives more freedom and flexibility".
Solution: We added an FAQ box + tooltips. We also allowed users to select their targets.

Feedback: "Breakpoint year is not immediately obvioious.
Solution: We added an FAQ box with detailed explanation.

Problem: After conducting a couple of interviews, we realised that the graph will considerably change if users fill all the sections. The page is too long for them to scroll back, they don't even realise they need to scroll back to see the changes.
Solution: We added the targets graph in the last section to allow them see how their choices affect the outcome.

Problem: After conducting a couple of interviews, we realised that this page is too long, and some respondents forget their main goals when they scroll down. So they get confused and sometimes start scrolling back and forth.
Solution: We added cards with their main targets below the left panel. These cards, as well as the panel, are pinned to the top of the page.

Aim:Overarching target

The overarching target is the ultimate goal the company is willing to reach by a certain year. In Xtonnes it can be either Net Zero, Climate positive, Carbon neutral or Reduction only.

Users see their main targets on the cards

The graph shows the overarching target and current situations by default, but users can switch to other scenarios as well.

All blocks have Help buttons that open a panel with FAQ or helpful information

BEFORE SECONDARY RESEARCH

Users can edit their targets anytime. When they press on 'Edit aim' they go back Set targets page

Aim:Overarching target

A senior product specialist who looks at indicators on the dashboard and exports data, does not often work with the interface and is not so much immersed in the process

AFTER SECONDARY RESEARCH

Feedback: "The word filters sound a bit confusing". "Didn't expect to see filters here".
Solution: Although the users could set filters, the word itself sounded out of place, so we changed the copy to edit view. Plus left a couple of dropdowns on the screen to allow quick changes

Feedback: "Don't undertand how offset costs work".
Solution: We added year by year offset cost and included explanation into the Help section.

Feedback: "I would want to see Co2 or Kg data next to percentage, as it would be more clear to understand the goal".
Solution: We added Co2 data next to percentage.

Aim: Targets by scope

Users can see different scopes by clicking on tabs

BEFORE SECONDARY RESEARCH

They can also quickly compare data of different scopes by clicking on tabs on the graph

Aim: Targets by category

In this view, users can see their goals within categories. They can add as many categories as they want

Users can use tabs to see different categories or click on show all to see more.

BEFORE SECONDARY RESEARCH

Aim: Targets by category

AFTER SECONDARY RESEARCH

Problem: It's not quite clear for users which category this graph belongs to
Solution: We changed the copy to fit the category name.

Feedback: Users want to see data in CO2 next to percentage to have more understanding
Solution: We added CO2 data everywhere

Act: Overarching target. Cards view

In this section, users can see 8 of their most impactful goals and total initiatives they have. Initiatives are divided into achieved, in progress, selected, recommended and created.

No plan is the area on the timeline where the user haven't selected or created any initiatives yet. This period should be filled with initiatives if they want to reach their goal.

Users can export a report about their initiatives

BEFORE SECONDARY RESEARCH

Created initiative - the initiative the user creates themselves

Recommended initiative - the initiative the app recommends to you based on your goals

Selected initiative - the initiative the user selected from the recommended

Achieved initiative - the initiative the user has achieved

Act: Overarching target. Table view

Table view allows users to see their initiatives in a more organized way

BEFORE SECONDARY RESEARCH

Act: Overarching target.

AFTER SECONDARY RESEARCH

Feedback: Most users think that the ability to see all initiatives on a timeline will be more useful (instead of just 8 most impactful ones)
Solution: We added tabs that show main initiatives and all initiatives on the timeline.

Act: Targets by scope

Just like in Aim, users can select a different view that will show initiatives by scope or by category

In the targets by scope view, we show a target graph as well, Here they can select multiple scenarios: target, do nothing, current situation.

AFTER SECONDARY RESEARCH

Act: Targets by category

Targets by category view works exactly the same as targets by scope view

AFTER SECONDARY RESEARCH

Initiative page

Users press on initiatives and go to the initiative page where they can edit the initiative, log progress and see description

Users can edit carbon, timing, level and cost based on the data they have

On the target graph users can see the impact the initiative has on the main target, on the scope and on category

BEFORE SECONDARY RESEARCH

Initiative page

AFTER SECONDARY RESEARCH

Feedback: "The history log icon isn't clear".
Solution: We changed the icon to make it more obvious.

Problem: For some users it's not quite clear how much carbon they will reduce. Because the data on the graph depends on other goals.
Solution: We added target reduction parameter on the graph

Feedback: "I'm also not sure of how I can arrive to this progress"
Solution: We a step by step description of how users can measure their progress. Initiatives vary greatly, so this description can be very different from one initiative to another.

Log progress

Once the user launches their task thay can log progress and see their progress on the initiative page

AFTER SECONDARY RESEARCH

Problem: Some users want to see what they actually did to reach this progress, so that they would be able to document it.
Solution: We added a filed where they can describe how they reached their goal.

Analytics

Users can select different views to see the data from different angles

In Analytics users can get their first estimation results and track the most important indicators

Users can get overview of different sections of the app (here: Aim & Act Overview)