Guided Workflow for a GHG accounting tool

@ Catalysta
Project Overview
The development of a feature to help users be more self-serving in creating their GHG inventory.
My Contributions
Desk research, wire framing, UI design, creating interactive mock ups, remote unmoderated user testing, developer hand-over.
The Guided Workflow

The Problems to Solve

The reason for implementing a new feature to guide the users in creating a GHG report was that the field of GHG regulation is very difficult to navigate for businesses and the process can be lengthy and complex.

So we needed to help the users:
- Keep track of the tasks left to be done across GHG scopes
- Know which order to solve the tasks in (some tasks unlocked others)
- Know how to gather the necessary data
- Know how (and how much) to improve the data

The Process

The structure and content of the Guided Workflow came from our in-person onboarding meetings with real users
We purposefully waited with prioritizing a user friendly Guided Workflow in the tool until we were sure we could see a pattern emerging around what needed to be specified at which times in the onboarding process.

What were we always repeating to each client? Which questions arose from the clients? Which tips could we give to them to help them get better data? Etc.
Sketching ideas and finding inspiration in other tools
To start the process I spent some time finding design solutions to similar issues with tasks, onboarding, guidance, etc. in other tools. Next, I started sketching by hand a lot of different ways to solve the specific issues listed above before moving on to Figma.
Building interactive components in Figma
To test out assumptions about the design direction I made an interactive prototype consisting of the components and variants needed to test the questions listed below.

What did I need to test

- Do people know what is encouraged to do with suppliers?
- Do people know how much work is left to be done (regarding purchased goods and services)?
- Do people know if they have to do everything or how much in voluntary?
- Do people know how to dismiss/hide a step?
- How user friendly do they think the solution is? (and which elements were helpful vs confusing)

Unmoderated user testing of workflow logic on user panel with domain specific knowledge
Using the interactive Figma prototype I set up a series of user tasks and questions in Lyssna to best test the questions above.
Analyzing user test results
Each task and question of the user test was analyzed carefully and the following overall conclusions were made:
- The overall structure of the new ”workflow step by step dashboard” can be implemented.
- Maybe some elements of the page can be tweaked, finetuned and tested later. E.g. the subscope states.
- Maybe make it clearer that these are obligatory steps.
Implementing design adjustments and handing over to developers
Based on the the analysis of the user test, I made adequate adjustments to the design before handing over the design in a Github issue describing the MVP version of the Guided Workflow using screen recordings, links to components, etc.

Implemented design on live platform (demo data)

Other Projects

Sustainable fashion webshop

Branding, UI design

CS Board

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

back to all projects
Back to Portfolio