EcoSketch is a web-based life cycle assessment (LCA) tool that empowers engineers to build more sustainable products by identifying environmental impacts in early stages of product development. It was developed by Empower Lab and will be launched by EarthShift Global, a leading LCA consultancy, after June 2023.
EcoSketch
Timeframe
Sep 2021 - Sep 2022
Team
1 designer, 2 user testers, 1 developer, 1 PhD coordinator
Role
usability testing,
UI/UX,
paper writing
Scope
usability testing & feedback implementation
Tools
Figma, FigJam, Mural
Role Details
I conducted quantitative and qualitative usability tests with 46 engineering staff and students, analyzed preliminary results with Affinity Maps, and iteratively improved user flow in Figma.
I co-authored a paper using EcoSketch as case study for integrating HCI methods with sustainability tools. The paper was published by the ACM Journal on Computing and Sustainable Societies, and is part of the ACM Showcase.
Problem
HMW help engineers integrate environmental considerations in early-stage product development?
According to the Pareto Principle, 80% of environmental impacts are determined during product design.
However, engineers don’t employ environmental assessment tools like LCAs until later stages of product development.
For a greener future, it is crucial for engineers to use LCAs at design stages, when they can still make decisions to positively influence the environmental impact of their products!
-
Life Cycle Assessment (LCA) is a tool that evaluates a product’s environmental impacts at all stages of a product’s life cycle, from materials & manufacturing, to end of life.
-
They don’t allow for uncertainty and knowledge gaps when inputting parameters (e.g. weight, transportation routes), which are normal at early stages of product design.
They have a high-learning curve for non-LCA-experts, which include many designers and engineers.
Solution: EcoSketch
An app that simplifies the LCA process for designers and engineers without environmental science expertise, allowing them to model for uncertainty and knowledge gaps in early stages of product development
Feature #1: Model-Making Page
Users input all components of their product (parts and sub-assemblies), quantities, processes (e.g. type of manufacturing or transportation) and uncertainty levels for each stage of the life cycle, from conception to degradation.
Feature #2: Visualization Page
Once the product model is complete, users may visualize environmental impacts of their choice at a high or detailed level, for each part of the LCA. Users can easily navigate back and forth between model-making and visualization pages and modify their model to reduce impacts.
The sections below describe my process redesigning aspects of EcoSketch. The new website will be launched after June 2023. Until then, check out my design and analysis in Figma!
Process
Design Usability Test Procedure > Conduct Testing > Analyze Results > Improve UI/UX
User Testing
My team conducted qualitative and quantitative testing to answer questions on the usability and efficiency of EcoSketch, respectively. We recruited N=46 engineering staff members and students screened as proxies for industry professionals.
Testing Process
Breakdown of the testing guide I designed alongside my PhD coordinator:
-
We asked the users to introduce themselves and inform us on their level of experience running LCAs. We also provided them with a brief introduction to the tool and its features.
-
According to the Nielsen-Norman Group, Talk Aloud is the no. 1 usability tool. To answer our first 2 questions, namely what EcoSketch is doing well and how we might improve the tool, we asked both user groups to perform a mock LCA of a simple product and walk us through their thought process, including their comments and criticism. We provided users with a simple mock bill of materials (BOM), the breakdown of the product in terms of life-cycle stages. We allowed users to ask questions and, if they were clearly lost, we provided hints on what their next steps should be. Once users completed the LCA model, we asked them questions about the most useful and redundant, intuitive and confusing features of EcoSketch.
-
Half of the participants used EcoSketch and half used Ecolizer, an industry standard. The test lasted between 30-60 minutes.
Participants were provided with a sample project, including major part and subassembly names, and were asked to use the internet and other resources to put together a BOM for the LCA with as much detail about the material choices, quantities, and manufacturing processes as possible.
The participant using EcoSketch was allowed to work with higher uncertainty inputs initially, look at the results, and only specify the parts of the project that accounted for the most impacts. The participants using Ecolizer were asked to be very thorough with their research and only input data they were sure about. In the latter case, we were seeking to understand how long it took for a participant in the early stages of product design to do a complete LCA. As with the Cognitive Walkthrough test, everyone was asked to talk aloud through their thought processes throughout the experiment, and their screens and voices were recorded.
-
At the end of each interview, we asked users to complete a survey and rate their experience on the System Usability Scale.
Quantitative Testing
We hypothesized that changing the LCA user journey to allow for uncertain inputs and knowledge gaps would speed up the process and incentivize engineers and designers to carry out LCAs at early product development stages.
Quantitative Testing Results
EcoSketch reduced environmental average assessement time by half, as shown in the figure below, which was taken from the study we submitted to CHI ‘23.
Qualitative Testing: Analysis
I used FigJam to create affinity diagrams based on the thinking aloud testing we conducted with all users. I initially conducted this analysis for students and engineers separately, then grouped insights based on thematic concordance. I used two categories, according to the main sections of EcoSketch: model-making page, where users create the LCA, and visualization page, where users visualize results.
The main highlights are summarized in the sticky-notes below:
Model-making page
Visualization page
UI/UX Improvements
I implemented the following design improvements drawing on user testing results:
Redesigned the visualization page to streamline user experience using insights from engineers
Designed intuitive flow to reorganize subassemblies (SA) within the model-making page, as suggested by engineers
Designed collapsible SA’s to ease parsing through the model, as suggested by engineers
Eased deleting parts and SA’s within the model-making page, as suggested by a majority of participants
Improved overall visual hierarchy and stylistic coherence, as suggested by a majority of participants
Modification #1: Redesigned the visualization page
design for a high degree of complexity & the ability to dive deep into the product hierarchy while maintaining a clear bigger picture
Insights from user research
Engineers’ favorite feature on the visualization page was the ability to easily identify environmental impacts at each stage of the LCA, and navigate between high and low levels of complexity within their product, from assembly level to lower levels such as SA’s and individual parts. They thought the product breakdown graph should be front and center and found it inconvenient to travel up and down the screen between the big picture and detailed information. They also unanimously agreed the “Impacts” graph on the right was least helpful and suggested its removal.
Before: 3 visualizations on 2 screens
New Design
With this insight, I created a simple, clean visualization page that allows users to investigate their choice of environmental impact at any stage of the LCA and any detail level of the product with just a few clicks, in one graph.
Because of the many layers of complexity, I decided to gray-out portions of the LCA not currently under investigation to allow the user to focus on the process of interest, while still able to cross-compare. As the user goes deeper into the assembly, they may still visualize the overall impact of higher-level components represented by simple, grey contours.
I designed iteratively with quick feedback from graduate students in my lab.
After: One clean visualization
Modifications #2-4: Model-Making Page
Improve visual hierarchy & ease user flow with old & new features
Before: Poor hierarchy
After: Clean visual hierarchy
Before: hard to delete parts; no way to delete SA’s
After: click on trashcan icon to delete parts & SA’s
New Features
Collapse Subassemblies
Drag & drop to reorder subassemblies within model
Conclusion & Next Steps
I worked on EcoSketch for a year as UX designer & researcher, as a $2000 grant recipient from the Dartmouth Undergraduate Advising & Research Office.
Lessons:
I learned about formulating & conducting usability experiments, implementing findings iteratively for a real-world application and collaborating with rotating teams of designers, developers, and project managers.
Next steps:
EcoSketch is under development and will be launched by EarthShift Global, a leading LCA consultancy, after June 2023.
We submitted a paper to the 2023 ACM CHI Conference on Human Factors in Computing Systems (CHI 23) on using HCI methodologies for developing sustainability tools, using EcoSketch as a case study. I was named second author for my contributions. Our paper is under review.