Introduction

For this project, I led the design of a 3D model web viewer for the BIMcollab ecosystem, creating a fast, user-friendly tool that allows teams to upload, explore, and interact with complex models directly in their browser.

The product is now live—check it out here:

Overview

Cross-functional teams, including architects, engineers, and project managers, needed an efficient way to view and explore 3D models in a single, accessible platform. They also required a tool to help quickly identify and resolve issues in the models.

I led the design of the 3D model web viewer from scratch, focusing on delivering the fastest-loading tool with an intuitive interface that simplified the process of working with complex models.

Role

Product Designer

Collaboration

Worked with a development team of 5 members

Tools used

Figma / FigJam, Adobe Suite, Maze

The Process

For this project, I applied the Double Diamond framework to guide the process from problem discovery to delivering a validated MVP.

DISCOVER

Problem identification

Before developing this new product, it was crucial to define the problem and clarify the product's purpose. I focused on answering two key questions:

  1. Why does this product need to exist?

  2. What specific pain points will it solve in the construction industry?

Stakeholder interviews

The next step was to gather more insights from stakeholders about their expectations for the 3D model web viewer, as well as their common workflows and pain points.

I spoke with a range of stakeholders, including BIM (Building Information Management) consultants, sales teams, the product owner, and management, to ensure the product would meet their needs and align with business goals.

Competitor benchmarking

I studied existing tools on the market that offer similar functionalities, such as Autodesk Viewer, Trimble Connect, and Dalux.

Through this analysis, I aimed to identify key similarities, trends, and features commonly used in the construction industry to inform the design of our product and ensure it addressed current market needs.

Product forums

I also visited competitors' open forums to gather common complaints and pain points from their users. This feedback was valuable in helping us identify areas for improvement and ensure our new product addressed user frustrations more effectively.

User research

In parallel, I conducted user research to gain a deeper understanding of their needs for the potential tool, their current workflows, how they collaborate, and the specific problems the tool should solve.

Target audience

I identified the primary and secondary users for the 3D model web viewer:

  • Architects: Heavy users who focus on detailed model exploration and require precise, in-depth views.

  • BIM Managers: Quick users who need a broader overview of the model to manage and coordinate tasks efficiently.

Methodology

User interviews were conducted in a semi-structured format online.

The goal was to understand key needs, including common workflows with 3D models, collaboration methods, interaction preferences, and how measurements are typically handled in their processes.

DEFINE

Main findings

After stakeholder and user interviews, along with competitor research, I created an Affinity Diagram to organize findings and identify key patterns and themes.

Prioritize findings

Together with stakeholders, we reviewed the main themes and discussed them to define the features for the Minimum Viable Product (MVP) for our first iteration.

Starting with MVP

The MVP (Minimum Viable Product) for a 3D model web viewer should focus on delivering the core functionalities that solve the most pressing user needs while minimizing complexity.

The focus was on the following features.

Model rendering

  • Load and show 3D models in the IFC file format (industry standard)

Navigation controls

  • Orbit, pan and zoom functionalities

  • Reset view to re-center the model (default state)

Property display

  • Show a set of properties when user clicks on the individual element of the model.

DEVELOP

First wireframes

The initial wireframes for the MVP focused on core functionalities: simple model file upload and view, core navigation functionality and basic property viewing.

These wireframes served as the blueprint for early user testing, helping us validate the usability of the interface and gather feedback before moving into high-fidelity prototypes.

Standalone product

Webviewer embedded into existing application

Early user testing

Methodology

To validate the design direction, I conducted moderated usability testing with the Think-Aloud method, involving 5 participants and focusing on the core workflows of the 3D model web viewer.

Test scenarios

1. Upload a model file

2. Hide and show the model file

3. Zoom in to the model

4. Orbit the model

5. Pan the model

6. Select an element to view a property set

7. Reset the view

Follow up questions

After testing, I also asked each participant the following questions to gather qualitative feedback:

  1. How easy was it to navigate the 3D model?

  2. Were the controls for inspecting model properties intuitive?

  3. Did the interface feel cluttered or simple?

  4. Were there any features you found confusing or missing?

  5. Would this viewer meet your needs for reviewing 3D models?

First testing findings

From the usability testing it was found that:

  • Some icon buttons were unclear, especially the one to enable the Property set window, needing tooltips or text labels for better understanding.

  • Users struggled to determine how to interact with certain elements to zoom in and overall using the mouse.

  • Overall feedback praised the interface for being simple and not cluttered.

  • Suggestions included improving visual feedback for interactive elements within the model to enhance usability.

Reiterating again

Based on the given feedback there were multiple iterations and testing phases for the MVP before transitioning to high-fidelity designs.

DELIVER

Going to high-fidelity design

In the high-fidelity phase, I focused on styling the product to work both as a standalone app and as an integrated feature within the existing BIMcollab Nexus web application.

Color and typography

To ensure consistency with BIMcollab Nexus, I reused the existing color palette and typography. Accent colors were introduced in the model viewer’s panels to create visual hierarchy and highlight important elements.

Reusable components

Reusable components, such as the side floating panels and bottom navigation bar, were designed to maintain consistency with the BIMcollab ecosystem.

High fidelity designs

Here are the high-fidelity designs for the 3D model web viewer. They were tested with users throughout the process to refine interactions and improve the experience.

Launching MVP

To validate the MVP, we launched a beta version to the selected users group, collecting qualitative and quantitative feedback to refine features and prioritize future updates.

Evolving features and continuous testing

As the product evolved, it became more complex with the addition of new features, all while continuing to be tested with users.

Aligning with Product Trio

As the product evolved, it became more complex with the addition of new features, all while continuing to be tested with users.

Participating in development sprints

I actively participated in development sprints to ensure design implementation aligned with the project goals and timelines.

Additional features

Here’s a list of advanced features I added after the MVP launch, showing how the product has evolved over time. Each feature has been tested on usability with users and stakeholders.

Creating section planes

Users can create section planes to easily view and analyze different parts of the model.

Measurement tool

Users can create laser measurements for the X, Y, and Z axes, stamp coordinates, and check distances between two points.

Hide and isolate element

Users can select an element and choose to either hide it or isolate it.

Painting selected object

The user can change the color of the selected object to distinguish it and analyze it more easily.

Impact

  • 4200+ unique users
  • 176,000+ model files uploaded after initial MVP launch
  • The fasted loading 3d model web viewer on the market.

  • The product is currently used as a standalone freemium application as well as integrated module within the Nexus web application.