PROJECT OVERVIEW

Background

During the early stages of the product design process, engineers rely on life-cycle assessment (LCA) tools to predict the net environmental impact of a product's life. LCA tools have users input their products' anticipated materials and manufacturing processes into the tool, which then outputs the estimated net environmental impact of their product across each stage of its life.

Challenge

The majority of LCA tools currently used in the industry are geared towards seasoned engineers with years of experience. The Empower Lab at Dartmouth's Thayer School of Engineering approached our team at the DALI Lab with the goal of developing a brand new LCA tool that was user-friendly, attractive, and accessible to engineering students.

Teammates

Project manager: Dev Chhokra
UI/UX Designers: Alessa Lewis, Ana Sumbo, Hana Ba-Sabaa
Developers: Samiha Datta, Luc Cote, Maria Cristoforo, Grace Wang, Catherine Parnell

Timeline

Two 10-week sprints:
March - June 2021
September - November 2021

Key Partners

DISCOVERY & DEFINITION

Industry Research

Prior to my joining the Ecosketch team, designers at both the Empower Lab and the DALI Lab investigated the strengths and drawbacks of existing LCA tools such as Ecolizer, EarthSmart, SimaPro, and several more. One of my first tasks as a designer was to synthesize this research and determine which features we wanted to draw inspiration from when brainstorming our initial designs.

During this process, we also explored existing data-visualization tools (non-LCA) that might help guide the structure of our own visualization pages.

User Research

We conducted in-depth interviews with five engineering students who were familiar with LCA. For each interviewee, we created an empathy map and user persona to help us understand their needs and frustrations with current LCA software. Some key takeaways from these interviews were as follows:

Users in this demographic need guidance when using LCA tools; much of their knowledge comes from using books and Excel spreadsheets
There tends to be a negative bias towards LCA software vs. manual calculations
LCA is powerful primarily because it allows engineers to compare different ways of designing a product, allowing them to make sustainability-driven design decisions
Being able to see both ‘big picture’ and ‘fine detail’ is important to users, because they need to be able to display and communicate their results to others. How small design changes impact the big picture should be clear.

How might we make LCA software more accessible to early-stage designers without a technical understanding of environmental engineering?

Feature Specification

From our research, we brainstormed a list of features we felt would best meet the users' needs. Due to the inherent complexity of LCA, our product required quite a large number of features, and we needed to be careful not to overwhelm the user.

Model-making features

Sidebar for directory (derived from EarthShift API)
Drag-and-drop directory items from sidebar to the bill of materials (BOM)
Ability to customize BOM by creating sub-assemblies
Ability to group directory items into sets
Toggle between concepts within a project

Concept comparison features

Intuitive side-by-side visualization of different concepts' impact
Ability to compare each life-cycle stage across concepts
Ability to compare specific parts and subassemblies across concepts
Toggle between impact categories

SPRINT 1: MODEL-MAKING FLOW

Directory sidebar

We decided that the best way for users to access the directory would be through a sidebar on the model-making page. Since the directory would be sourced from EarthShift's API, the designs needed to allow for the developers to seamlessly connect each of the four directory categories (materials, transportation, usage, and end-of-life) to the backend.

We began to conceptualize different ways for the sidebar to expand. We ultimately decided on vertical expansion to maximize the space for the BOM.

Option 1: Horizontal expansion

Option 2: Vertical expansion

We then made a prototype for the sidebar that we would eventually test alongside our BOM designs. This was done using Figma.

Bill of materials (BOM)

The bill of materials is the interface through which users build their product using items from the directory. We decided to implement a drag-and-drop system to move items from the directory sidebar to the BOM. We first mapped out the hierarchical structure of the BOM, and then brainstormed a variety of different ways we could display that structure.

We then produced rough grayscales for several potential layouts and showed them to our user, partners, and peer designers for feedback. We found that the layout shown below was the most intuitive way to display the hierarchy of subassemblies to users.

After numerous iterations, we produced hi-fidelity wireframes that we passed along to the developers for implementation.

SPRINT 2: CONCEPT COMPARISON FLOW

Visualization page

After designing the model-making flow, we handed off our product to the Empower Lab. Designers at the Empower Lab then created a results/visualization page that shows the user the environmental impact of a product they designed (using the model-making page) across each life-cycle stage.

Concept comparison

Our job during this sprint was to design the concept comparison flow, or the means by which a user can compare the environmental impacts of different ways of designing a product (aka 'concepts'). This is a key feature of Ecosketch, allowing users to make sustainability-driven decisions when choosing how to design, transport, manufacture, and dispose of a potential product.

We began to think of different ways we could structure the concept comparison flow. We could either add the concept comparison feature to the existing visualization page (internal flow) or create a new page entirely dedication to concept comparison (external flow).

Option 1: Internal flow

Option 2: External flow

After consulting with the developers, we decided to go with the external flow, since changing the existing visualization page, which was already fully developed, would not have been possible given the project timeline. We produced grayscales for the external flow, two of which are shown below.

We received feedback from fellow designers in the DALI Lab that the total impact graphs should be larger, which we took into account when producing our hi-fi wireframes.

Style guide

Lastly, we produced a style guide to hand off to the Empower Lab to help future designers maintain a cohesive visual identity for the product.

PROJECT REFLECTION

This project presented unique challenges due to both time constraints and the complexity of the Ecosketch product. When I joined the team, the PM, developers, and my fellow UI/UX designer had already spent a semester learning the ins and outs of LCA, whereas I was more of a beginner. LCA is a complex, sophisticated tool and is something that engineering students take several courses to fully understand. In just two weeks, I became an expert on LCA in order to best understand the users’ needs and challenges. In addition, I had to teach myself the material, since my teammates had already familiarized themselves with the process. This was a unique experience for me, and it certainly enhanced my ability to learn new concepts quickly and efficiently.

Initially, the inherent complexity of LCA made it particularly difficult for us to create accessible, user-friendly designs. My fellow designers and I rotated through countless iterations in order to land on an intuitive, seamless user experience. We spent numerous weeks in discussion with the developers to decide which flows would be feasibly implemented within the scope of the project, and which features we would have to put on hold.