01 | Contextual Support & Simplified UI

Projects Dashboard (start screen)

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.

Component Review (Overlay Page)

Using a modal for the Component Review keeps the user anchored in the Missing Data flow. Instead of navigating away to a separate page, the modal lets them open a component, edit the required information, and close it without losing context or their place in the list.

A separate page would break the workflow, add navigation overhead, and increase cognitive load. The modal creates a focused workspace for completing component data while keeping the broader task visible and uninterrupted, making the process significantly faster and easier to follow.

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.

  
  

Step-by-Step UX Flow

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

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

   
   

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.

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

  
  

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, we conducted moderated remote usability testing with five participants: architects, engineers, and sustainability professionals.

Each participant completed core assessment tasks (e.g., calculating a score, interpreting results), and we measured

• Task completion time (recorded per flow)

• Comprehension of indicators (via follow-up questions)

• User confidence (self-rated on a 1–5 scale)

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 4-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: