01 | Contextual Support & Simplified UI

A | Projects Dashboard (Entry Point)

What was done

The following interface refinements made the system more structured, guided, and visually consistent, reducing cognitive load and improving overall usability.

• Established a clear connection between eLCA and the Circularity Tool by introducing the new “Create new project” button, a key bridge that directs users to initiate projects in eLCA, while all Circularity Score calculations are handled within the Circularity Tool

• Added a project search bar with filters, allowing users to quickly find and manage existing projects

• Improved navigation hierarchy by restructuring the dashboard layout and emphasizing primary user actions

• Redesigned project cards with metadata and image previews, improving recognizability and comparison across projects

• Enhanced the navigation bar and the footer to strengthen visual balance and accessibility, aligning the overall UI with the updated design language

Grid

I introduced a 12-column modular grid (32 px gutters, 80 px margins) for structural clarity and spatial balance.

B | Component Review (Overlay Page)

The Component Review and the Circularity Score calculation for each material are designed as an overlay page. This keeps the user anchored in the Missing Data workflow while providing a dedicated, focused workspace for completing material-specific inputs.

Using an overlay instead of a separate page or modal preserves context, avoids navigation loss, and provides enough space for complex data review. This approach makes the process faster, clearer, and more predictable, especially when repeated for multiple materials.

Key Improvements (What I Did & Why)

Separated the component overview into its own top section
→ Clarifies context and helps users understand what they’re editing before diving into details.

• Consolidated all component materials into one structured table
  → gives users a complete overview without endless scrolling and scattered information.

• Replaced the multi-color class labels with a neutral grayscale system
  → removes visual noise, reduces cognitive load, and improves focus on the actual data.

• Surfaced material status directly under the material name
  → makes “Incomplete”/“Complete” instantly visible and easier to prioritize.

• Added a clear action column (“Review & Complete”)
  → places the primary CTA exactly where users expect it, cutting unnecessary steps.

• Organized all key indicators of each material into a logical left-to-right flow
  → improves scannability and understanding of each material’s state

• Reduced layout density and aligned spacing for consistency
  → creates a cleaner, calmer interface that’s easier to read and navigate.

  
  

  Component Overview (Before / After)

  
  

C | Step-by-Step UX Flow

To reduce cognitive load and bring clarity to a previously fragmented process, I introduced a four-step “UX Corridor”, a structured flow that guides users through data input, validation, and score calculation.

Circularity Score Calculation Overview

— Four-step UX Corridor

In the previous version, all material data was displayed in long, continuous layouts, making it difficult to track progress or understand where users were in the process.

The redesigned structure replaces those endless screens with a modular, step-by-step flow and a summary table of all materials, allowing users to control progress, stay oriented, and complete assessments with confidence.

The four key stages

1. Material Mapping: connect components with their corresponding material data

2. Dismantling Potential: define how each component can be separated and reused

3. Pollutants Review (AI-assisted and manual): identify and validate potential contaminants

4. Score Calculation: generate and verify the Circularity Score of the component

   
   

   Step 2 — Dismantling Potential

   
   

The visual progress bar reinforces this structure, helping users instantly see their position and understand what’s required at each step, turning a complex technical workflow into a clear, guided process.

02 | UX Corridor and Pollutants selection

To simplify one of the most complex stages, pollutant assignment, we introduced AI-powered suggestions that predict pollutant values and recommend optimal matches based on compatibility scoring.

Step 3 — Pollutants Review (AI Match)

Each AI suggestion includes a compatibility percentage, showing how well a pollutant aligns with the selected material.

• <60% — Weak match: weak alignment, requires manual review

• 60–79% — Moderate match: moderate fit, should be validated by user

• 80–100% — Strong match: strong fit, suitable in most cases

This structure allows users to make confident decisions without deep technical knowledge, while keeping the process transparent and verifiable.

UX Corridor Enhancements

The UX Corridor menu is fixed at the top of the interface and updates dynamically as users fill in data.

• It clearly shows progress through all four stages: from Material Mapping to Circularity Score Calculation

• This persistent navigation helps users stay oriented, track progress, and instantly see which steps are completed or pending

  
  

  Step 3 — Pollutants Review (Manual Adjustment)

  
  

Pollutant Stage Improvements

1) Introduced greyscale-coded pollutant classes (S0–S4) for quick visual distinction

2) Added dual input modes

• AI-suggested pollutants for quick automated selection

• Manual adjustment for experts who prefer full control

3) Both modes coexist within the same unified workflow, maintaining autonomy and consistency.

Outcome

• The dual-mode interaction model reduces cognitive load

• Balances automation with expert control,

• Ensures transparency across different user types

03 | Measurable Outcomes

To validate the redesign, I conducted moderated remote usability tests with architects who regularly work with LCA-related tools.

Each session was conducted online with screen sharing. Participants were asked to complete realistic assessment tasks based on the Circularity Tool workflow, while verbalizing their thoughts and decision-making process.

Tasks

Participants were asked to:

• Navigate the updated project dashboard

• Identify missing data and required inputs

• Complete a Circularity Score calculation

• Interpret indicators and system feedback

These tasks reflected real-world decision-making scenarios, rather than isolated UI interactions.

Metrics & Measurement

1) Task completion time

Recorded per task and compared qualitatively to baseline observations from the previous version of the tool.

2) Indicator comprehension

Measured through follow-up questions after task completion, focusing on whether users could correctly explain:

• what the indicator represents

• how it impacts the final Circularity Score

3) User confidence

Measured via a short self-assessment questionnaire using a 1–5 Likert scale, where participants rated how confident they felt interpreting results and making decisions based on the system feedback.

Results at a Glance

• 38% faster task completion

• 80–90% correct comprehension of indicators

• 1.4× increase in user confidence

These results confirmed that the redesigned Circularity Tool significantly improved clarity, speed, and user trust, especially for users with limited LCA experience.

04 | Next Steps & Takeaways

Next steps & recommended improvements

1) Strengthen the overall UX architecture and clarify system logic

Clarify and streamline the core logic behind the redesigned system

• Ensure clear logic and smooth transitions between the UX Corridor, component overview, AI recommendations, and manual controls

• Define detailed interaction flows, microstates, and module-level dependencies

2) Validate the UX using realistic decision-making scenarios

• Create realistic case simulations involving both experts and non-experts (Focus tests on key actions: resolving missing data, editing materials, improving the calculated Circularity Score)

• Observe how users interpret system feedback and confidence levels, and identify friction points between AI-assisted and manual workflows

• Continue both moderated and unmoderated testing to measure comprehension and confidence improvements across different user types

3) Collaborate on implementation

• Work with developers to align component behavior and data logic with the designed UX structure

• Support implementation by reviewing build prototypes and validating consistency in staging environments.

Together, these steps form a roadmap for evolving the Circularity Tool into a coherent, scalable, intelligent UX ecosystem, where data, logic, and design work seamlessly together.

Takeaways

1. Structure drives clarity

The four-step UX Corridor and material overview table transformed complexity into control: users always know where they are and what’s next.

2. Transparency builds trust

Balancing AI suggestions with manual control increased user confidence and made decision-making feel explainable, not automated

3. Critical thinking never stops

Continuous validation with both experts and newcomers proved essential for refining logic, indicators, and overall comprehension.

05 | Circularity Tool Add-on in Action

This short demo shows the end-to-end user flow form viewing project data to completing all steps required to calculate the Circularity Score.

Steps shown in the video:

1. Landing on the updated project dashboard and reviewing its capabilities

2. Selecting a project to calculate the Circularity Score

3. Viewing detailed project data and available design variants

4. Entering the Circularity Inventory and being prompted to add missing building data

5. Navigating to the Catalog to view missing inputs

6. Drilled down to the component level to input data step-by-step(UX Corridor):

• Editing the materials

• Determine Dismantling Potential

• Choosing pollutants

• Calculating the Circularity Score

7. Returning to the Circularity Inventory to view the total Circularity Score

Watch the user flow with the above-mentioned steps: