Showroom

client

Oldcastle BuildingEnvelope

Role

UX Design

UI Design

Part-time CSS’er

Tools

Figma

Principle

Micro

Timeline

2019

Summary

This application solved a major problem of how to both market a new product and provide a tool kit for customers to engage the product.

challenge

We had to design this application WITHOUT the physical product (interior office partitions) being created yet.

Timeline

Provide full product customization with few required steps in a physically accurate context.

project goals

– Utilize Physically accurate 3D graphics
– Meet user goals of configuration, breakdown and construction information
– User can configure product in a realistic environment.
– Break free from the endless gray configurations currently on the market

project Research

Even though we didnt know what the exact physical product would be, we could still dive into the space of 3D configuration, navigation and interior office systems.

Product flows, charts and diagrams helped to understand the problems we would face.

One existing and successful solution was found in the auto industy. Most car companies provide configurators for customers to view their car with the changes made. We decided to use this as a bench mark for this application. its history and purpose helped me better grasp customer sentiment and frustrations in the next phase.

user research

While the physical product was being developed we were  not allowed to meet with any outside users — architects, designers and buyers for example.

So we worked with what we could and relied on internal support for feedback and validation.

Below are a few research methods used to betteer understand the user:

personas

Starting with zero user information, some sort of persona helped to udnerstand main user groups and thier areas of focus.

information architecture

With our user research, product goals and requirement in mind, we refined the user flow into a more streamline and natural site map.

journey map

Learning user journeys was very crucial so we included the appropriate elements and not items of distraction.

user mindset

Painpoints:
Existing tools are ugly aand slow. Too many options and hard to navigate.

Motivations: Being able to present to clients a highly interactive and visual application. WOW factor!

Goals: Configure a product and finish with a document of all my selections.

UI design

design iterations

Designing an app while the physical product itself was not complete was quite challenging. Adding and removing product abilities and features led to MANY design iterations. Each iteration though was very informantive and we were able to learn pros and cons helping to inform next steps.

final design

The intent for the final design needed to include a bridge between the configuration and resuls sections.

Providing a full bleed view of the product provided for the WOW factor the comapny and its customers needed. Scrolling down presents the customer with a break down of all items selected in ther configuration.

Keeping all this information simple was very important to me so that the customer wasn’t overloaded with content.

takeaways

Designing an app for something that has not yet been defined was very challenging. At times I felt like I was chasing squirrels up trees but looking back now each change was informative and helped me grow as a designer. I’m glad the final UI has had such a major impact as the company rolls out a new product line.

Next case study

@2025 Joshua Weber