Generative design tools

client

Outer Labs

Role

UX Design

UI Design

Tools

Figma

Timeline

2021

Summary

I worked with our main client, Google, on designing interactive 3D solutions for their commercial real estate portfolio.

“deliver the building Google wanted for the budget originally allocated”.
While I led designs for all Outer Lab products shown above, I will focus this case study on one, the last step in process: costs and estimates.

Background

Google is a global company with vast resources and projects all over the world. To ensure they consistently received the best value, they sought not only more precise cost estimates but also access to up-to-date construction cost data for comparison across projects.

product research

Although I had experience as an architectural designer, project estimation was a completely new area for me. It was essential for me to regularly collaborate with cost estimators to deliver the most effective and efficient solutions for their needs.

Initial prototype

When I joined the team, the CEO already had some designs put together. In order for us to start meeting with users, I wrapped up the designs and made a prototype to start collecting user feedback.

User testing

I met frequently with end users. Below is an example of one of those sessions. These discussions let to sorting through information and creating affinity maps to better understand and organize their feedback.

Studies

I don’t do this all the time, but I wanted to get ideas out...lots of ideas. I turned to my trusty iPad for quick sketches helps crank out multiple studies for the team to discuss and improve upon.

Refienement

We met weekly with users. Each call we learned more about needs and motivations. We refined the designs to best align with our research.

Refinement - calculator

One important feature I had to iterate on several times was the cost estimation calculator. Talking with users helped me identify which information was most important to display, as well as additional elements that would help them arrive at the most accurate estimate possible.

Refinement - product code

Another key feature was enabling users to enter product codes. Each material used in a building has an associated code, and there are many different code formats. By creating a simple search experience with instant feedback, users were able to find the results they needed much faster.

customer sentiment

This is super exciting, I can’t wait to get my hands on it!

I'm blown away!

takeaways

This project was just a single modal...albeit a VERY powerful modal. :)

I initially had no idea how many sub-layers logic can go and I am very proud to provide users with a simple experience when adding logic to content.

Next case study

Conditional logic

Product configurator

@2025 Joshua Weber