EcoSketch
Overview
Problem
Existing life-cycle assessment tools are difficult to learn and use. They also require precise data on material/ energy flows that is not available in early-stage design. Results obtained from the tools are often not easy to interpret for non-experts . As a result, the usage of LCA tools is often inhibited in early stage product design when key design and engineering decisions are made.
My role
Lead UI/UX Design Intern in a team of 3 designers and 4 developers
Solution
Design and build a novel LCA tool that is easy to use, accepts uncertainty in data input, and improves the user experience, enabling practitioners to evaluate environmental impacts of products early-on in the design process.
Scope
June 2020 - March 2021
Internship
Overview
Engineers use life-cycle assessment (LCA) tools to visualize and calculate the environmental impacts of products from cradle to grave, across life cycle stages, impact categories, and product parts. For a greener future, it is crucial for engineers to use LCAs at early design stages, when their design decisions have the greatest impact on the environment, since
80% of a product’s environmental impact is determined during early design stages.
Ecosketch, a web-based LCA tool, allows early-stage engineers and designers make informed decisions during product conception, while visualizing uncertainty to account for the early stage nature of these designs.
EcoSketch will run on the Earth Shift Global API and will be a fully integrated product of the same company by the end of 2023; Ecosketch will go on to replace EarthSmart.
Our Partners
The development of the tool was conducted for EarthShift Global, a leader in LCA and sustainability-based consulting, software, and training, and in collaboration with Dartmouth Applied Learning and Innovation (DALI) Lab.
We also partnered with Synapse Product Development Inc. and their parent company Cambridge Consultants, who provided us with product designers and engineers whose input guided our development of the tool. We conducted user interviews and focus groups, as well as co-creation sessions with users from both companies to verify designs and implement additional feedback.
Process
Negative bias towards LCA software. EcoSketch should have a simple, clean, and intuitive UI
Need for big picture and fine detail views. EcoSketch should create quick, easy access to both views
No agreement on units/labels preferences. EcoSketch should have customizable options so users can choose units and labels.
UX Research
A deep dive into the LCA market
We first wanted to understand and define the problem. Accordingly, to best understand the challenge at hand, we divided our research into 2 main areas:
Competitive Research
What makes our competitors successful?
LCA Market Research
What’s the future of LCA tools?
Walking in an early-stage designer’s shoes
Our team conducted more than 20 interviews and focus groups with our partner users and stakeholders to create a continuous cycle of observing, reflecting and building. Throughout each interview in our design process, we collected a vast amount of research on competitive analysis and use cases for LCA tools.
We identified the gaps between the industry-standard options for LCA experts (GaBi and SimaPro), lightweight options that target novice users (EarthSmart, Sustainable Minds, and Ecolizer), and the users’ ideal LCA experience.
Users favored tools that had straightforward user flow, organized sections, a clear hierarchy of information, and a short learning curve. None of the tools, however, displayed uncertainty in data, which is an aspect that we knew our tool should include, as desired by our users.
I then created a journey and empathy map to consolidate and visualize how engineers and designers navigate the entire LCA process, from setup and model-building to result interpretation.
Click to view full empathy mapClick to view user journeyGeneral
Tool’s Visualization
Charts/graphs produced by the tools are often not descriptive.
Uncertainty visualization needs to be simple so that technical and non-technical decision-makers can fully understand and internalize uncertainty in data.
Need for interactive graphs. EcoSketch should create
Tool’s Workflow
The data input step is very tedious and time-consuming. This step needs to be more efficient.
Time pressure seems to drive the need for simpler tools. If project managers think that LCA work will require more than a few hours, they turn resistant to conducting the assessment.
Transparency about uncertainty is important to the user.
Ideating the optimum experience
Now that we've met Lisa, what's the best way that we can help her as she discovers EcoSketch?
After identifying the shortcomings of each tool, I formed How Might We Questions to address the needs of the users and to make sustainable product development decision-making more efficient.
Who is our user?
Through our user interviews, we were also able to identify our main user persona. So, with that... let me introduce you to Lisa!
Lisa is a product designer who is also a novice user of LCA software. She seeks to use the tool to inform herdecision-making. She does not have much experience with LCA, so she's kind of stumped as to where to begin.
Click to view full persona cardClick to view full persona cardIt was evident that across existing tools on the market, there seems to be a trade-off between effectiveness and ease of use (primarily the learning curve).
Tools that produce effective and easy to interpret results and data seem to be harder to learn and use.
Our User Journey Maps, Empathy Maps, and HMW Questions led us to identify the who, what, and why of EcoSketch.
Click to view the HMW questionsA glimpse into our prototyping iterations
Putting pen to virtual paper, our design team worked in Figma to craft various low-fidelity prototypes on what EcoSketch could be, reflecting the information we gleaned from our UX research.
We created 20 separate mockups to illustrate different ways to visualize the workflow of EcoSketch. We focused on the hierarchy of information, the voice and tone, the visualization of info and relevant call-to-action buttons, all while keeping our user’s needs at the forefront of every design decision.
Then, we conducted 10 interviews and 3 focus groups with our users to test the usability and accessibility of the various versions of the software.
Through each iteration, we refined the hierarchy and presentation of information, the content design, and the call-to-action buttons, carefully considering all design decisions. Through several iterations and validation from stakeholders and users, we felt confident in crafting a delightful and intuitive experience.
Prototype 1:
Key features:
Model-making page: instead of keeping each life cycle stage as a separate page, I organized them as tabs within one page to streamline the user interface.
Material/process data input: I saved space in the main pages by having pop-ups for inputting material/process info.
Feedback:
"It is a good starting point, but there is room for improvement”.
Users liked having the life-stages as tabs. It was more intuitive, and it streamlined the process.
Users preferred the interactive and hoverable graphs that allow intuitive navigation through the various flows.
Users wanted some flexibility in customization, especially for visualization controls.
Prototype 2:
Key features:
Grouping data by life cycle stage, and by impacts, in two separate flows.
Redesigning both the model-making and visualization pages, using expandable bar charts to provide a detail viewed.
Uncertainty visualization: Using error bars to represent uncertainty in data.
Feedback:
Grouping the data by life cycle stage and by impact was most important, and grouping by part was less useful.
The opportunity for data comparison in our designs was good, but more detail at the lowest level is desired.
-
Sketches
We started by exploring different ways for the data to be grouped (for example by sub assembly, by life cycle stage, by impact, by uncertainty). After discussing this with the rest of the lab, we settled on 2 ways of grouping: by life cycle stage, and by impacts, in two separate flows.
I first started by making sketches of the new visualization page:
Sketch1 Sketch2 Sketch3 Sketch4 Sketch5 Sketch6
Low-fidelity and high-fidelity prototypes
We then started thinking about different graph types and uncertainty visualizations. I looked into different uncertainty visualization methods and discussed it with our users.
According to the literature, gradient and error bars force people to acknowledge uncertainty the most.
I then started making many grayscale iterations, in which I explored:
1) Different graph types including bubbles, cubes, and bars to show the size of impacts. We settled on bar charts as it was the most user supported.
2) Transition from high level to fine detail view. We decided on bar charts that would expand into more bars for greater detail.
3) Uncertainty Visualization including bubbles with halos, blurred bars, and error bars. We settled on error bars as users preferred distinct error boundaries as they were the most intuitive.
Below are low-fidelity prototypes of the different grayscale iterations I made:
Lofi1 Lofi2 Lofi3 Lofi4 Lofi5 Lofi6 Lofi7 Lofi8 Lofi9 Lofi10 Lofi 11 Lofi 12
We then translated the low-fidelity prototypes into high-fidelity ones. In those, I explored different ways to group our data.
By life cycle stages:
By impact:
By parts:
Colors
I was also responsible for choosing an appropriate color scheme for the website. I created different color iterations and ultimately ended up choosing the last version which is accessible to all, including color blind people.
Colorscheme1 Colorscheme2 Colorscheme3 Colorschem Colorscheme6 Colorscheme5
Prototype 3:
Key features:
Using nesting to organize the database information and inputted data.
Employing both drag and drop and a secondary flow to allow users to move between the sidebar and the B.O.M., to ensure accessibility and ease of use.
Linking materials and processes, as well as transport or end-of-life options to the material.
Feedback:
“I love the sidebar nesting. It’s really important to be able to browse a legible and well formatted sidebar.”
“The tool does a great job of acknowledging uncertainity. It’s hard to miss it when I am being asked to input it at almost every step”.
Designers do not have a real idea of the uncertainty at the part level so early in the design process.
Concept comparison is not supported.
-
After interviewing our users, it became evident that:
Users prefer interactive input design that allows flexibility
This compelled us to think about different designs for both the bill of materials (BOM) and the directory system.
I started by making grayscales of different ways to:
1) Design page layouts to allow users to peruse through and input their data. These included an expanding directory-like sidebar or a linear one.
2) Organize the B.O.M., such as cards split by category, dropdown menus, or sidebars (with horizontal expansion or vertical nesting). We chose the nested trees as they were the best at showing the hierarchal relationships between parts.
We also spent a significant amount of time considering how users would move between the sidebar and the B.O.M and incorporated drag and drop.
Solution
After many variations of the EcoSketch and playbacks to our stakeholders, we arrived at our final design deliverable.
After ensuring that the designs were pixel perfect and made sense to people who were completely new to LCA, we presented our tool to the CEO of EarthShift Global, Lise Laurin, and the Director of Research & Development, Caroline Taylor, and received wonderful feedback from both.
Design decision breakdown
Compare concepts
Our users were very excited by the potential to compare their product models by both subassemblies, or different groups of parts together, and parts overall. We also allowed real-time reordering of subassembly compositions, which is critical for finding additional combinations that are potentially more environmentally friendly. This additional agility allows users to view different subassembly compositions through a drag-and-drop feature.
Results visualization
We 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. To allow for this, I decided to gray-out portions of the graph that are not currently under investigation to allow the user to focus on the process of interest, while still able to cross-compare.
Model-making page
I also improve the visual hierarchy and the user flow with by creating a very interactive model-making page that makes it easy to create, delete and reorder parts and subassemblies.
Accessibility
We followed Nielsen Norman Group's Heuristic evaluation guidelines to ensure that EcoSketch is used by people of all diverse abilities.
Impact
Launch
EcoSketch will run on the EarthShift Global API and will be a fully integrated product of the same company by the end of 2023; Ecosketch will go on to replace EarthSmart, EarthShift Global’s current LCA tool.
Outcome
EcoSketch now allows for a significant 55% reduction of time needed to complete an environmental assessment (from start to finish) compared to industry standard tools.
With EcoSketch, we’ve proven that design and UX research infused into a highly-technical product can go a long way to making LCA accessible for users of different skills and backgrounds, ultimately democratizing the process of environmental assessment. By integrating intuitive user interfaces and streamlining complex calculations, EcoSketch eliminates the need for extensive training and opens up the world of LCA to a broader audience, bridging the gap between technical experts and non-specialists.
Reflection
Working within constraints can lead to creative outcomes. Faced with engineering, budget, and timeline constraints, we were forced to prioritize and scope our decisions. We threw together our rough ideas and iterated over and over until we came up with the best collective solution. Continuously receiving quick, rough feedback refined our design direction.
Involve engineers often and early. Collaborating with the engineering team was invaluable in understanding interactions and design handoffs.
Creating documentation that’s easy to understand. Working in a team of designers and developers that changes every 10 weeks meant that our design handoff had to be exhaustive and intelligible.
During my internship with EarthShift Global and the Empower Lab, I also co-authored two published and peer reviewed publications; a paper and a journal article:
