RIB iTWO 3D is a desktop BIM (Building Information Modeling) integration tool built on Autodesk Revit and used by construction professionals.

Background

This product supported the digital transformation of the AEC (Architecture, Engineering, Construction) industry. BIM integration is the first step of the entire construction project lifecycle management. Features were developed in Autodesk Revit, a leading solution in AEC software market.

As the sole UX designer for this product, I owned and delivered all design work.

Design Process

We started the design work by conducting user research, defining the product structure and design goals, and then drilled down to specific features.

Research & Strategy

After analyzing our users, industry standards and Autodesk Revit, we aligned on the design goals for the product development.

Design Goals

• The UX needs to be intuitive to construction professionals
• The interaction pattern needs to follow Autodesk Revit's convention

However, most developers and I lacked in-depth domain knowledge in professional construction. It was challenging to achieve these design goals without a deep understanding of the business requirements. Therefore, we organized workshops and consultations with construction specialists from other teams, and involved them in the entire design process.

Below is a typical feature design process:

During the design process, I continually consulted with construction specialists to make sure the design fulfilled the business requirement, and also discussed with developers to understand the technical limits. It was an iterative process. I made sure everything was accurate and feasible before handing over to developers for implementation.

User flow

For most features, I presented a draft user flow to align the team on the basic interaction logic in the early stage.

Below is a sample user interaction flow from a pipe length measurement feature in BIM:

After reaching alignment with key stakeholders, I moved on to the detailed interaction and UI design.

Interaction & UI

During the interaction design stage, we considered every potential scenario for users and helped them avoid unexpected outcomes.

Detailed design of a pipe length measurement feature

After aligning on the interaction design, we moved to the detailed UI design. Usually, I presented several design alternatives, then we discussed and chose the most appropriate one.

Here is an example of different illustration layout options for a feature related to quantity takeoff:

I kept iterating on the design until everything worked seamlessly.

In the end of design process, I delivered it to the development teams, supported them with edge cases, and reviewed the final implementation.

Design Guidelines

Over one and a half years, we delivered more than 40 features. To maintain the consistency of UI components and interaction patterns across all the features, I set up a design system and specific guidelines for this product.

Here are a few sample pages of Layout and Style sections:

Interaction Pattern, Color and Font sections:

Due to platform constraints, each feature's icon was limited to a specific size. It was challenging to design a small-scale icon that effectively represents a complex feature with very limited pixels.

In addition, I designed the Product Center website, serving as a central hub for feature introductions, release notes, and tutorial videos. Beyond the design, I also produced and edited all the tutorial content myself.

A feature tutorial video is playing on the Product Center website.

Retrospective

We always pursue simplicity in design. For professional applications, however, efficiency takes higher priority. This means the UI is not always minimalist and easy to understand for new users.

Prior to design work, it's essential to study the industry standards, the platform conventions, as well as the UI and interaction patterns of market-leading products.