Xkool is China’s leading provider of AI applications in the building industry. In cooperation with the client, a top EPC (Engineering Procurement Construction) company, Xkool was developing a building digitalization SaaS platform facilitating the whole design-build process of modular buildings. The Project Designer featuring machine-generated planning results was one of the core sections of the product.

After the beta version was revealed, the sales team received feedback from users hoping to play around the platform more freely. Also, according to the product plan, more functionalities were to be integrated into the platform in the future. Therefore, a redesign of the Project Designer is needed.

Because the beta version consisted of a linear user flow and lacked the ability for expansion, the solution turned out to be a 0 to 1 redesign.

I first researched on characteristics of industrialized modular buildings to get knowledge of this cutting-edge field. Then I read through the previous product documents and conducted a product audit on the beta version. I also went to the engineers to discuss algorithm flows they designed for existing and future features. These steps had been helpful for me to understand the product goals and the team’s technical abilities.

To understand the problems, I gathered feedback from both our users (initial users from the client’s firm) and the internal team, then marked the insights onto the existing user flow. From there, design opportunities were derived.

To start ideating, I developed the following design principles. They not only set the tone for my product design but were also valid for the algorithm team to design their codes.

There was no doubt that the Project Designer would continue to be model-centered.

After looking into the six competitive web apps, I found that most 2D or 3D content-creating apps organized the tool buttons on the top and left edges of the screen and located panels on one or both sides to frame a semi-square canvas. While providing necessary space for inputting and displaying data, most interactions would happen directly with objects on the canvas.

When designing the web app, I wanted to keep the screen clear and simple, with only relevant information brought to users.

As the problem defined in the beginning, in addition to providing smart results generated by algorisms, we wanted to allow users to model manually. That means, at all scales, users should be able to create objects (modules or buildings) from scratch as well as manipulate any generated objects.

We definitely didn’t want (and were not able) to create an all-inclusive 3D modeling app where you have ten different approaches to draw a cylinder, but basic transform tools such as move and rotate were necessary to allow for user autonomy.

How might we reach a compromise between the development cost and the output quality? I first listed out all potential functions and conducted an assessment.

* These tools were designed for transforming buildings in Project Designer.
** Objects may look 3D, but transforms only took place in the XY plane.

The goal was to design functions that were easy to use, returned acceptable results, and did not cost too much to develop. Five functions were decided as basic transform tools for this version.

To make the above functions feasible, some details need to be determined.

Bounding box of a building was used in the mirror function and for representating the building’s selection states.

For a building footprint, instead of using mathematical methods to get the minimum bounding box , which may lack practical meaning, I chose the longest segment of the polygon to determine the building orientation and created the bounding box from there.

Object snaps applied to modules, buildings, and site boundaries.

When users create or edit a building’s baseline, move a building precisly, or measure the distance between two points, the active control point would snap to the nearest object.

Given the characteristics of modular buildings that called for mass manufacture and fast construction, non-uniform shapes were rare. So I prioritized 90° angles for direction snaps and enabled snapping to multiples of 15° as well. Users had the option to turn on/off N-S and E-W snap as needed.

In addition to transforming a building as a whole, editing the floor plans as well as single modules within the building were also crucial functions to the Project Designer.

How might we differentiate the selection states in Project Designer so users had easy access to the object (module or building) they intended to edit? I introduced the Building Edit Mode to tackle this problem.

When having a building selected, a user can enter Edit Mode by selecting the option on top bar and right-click menu, or by simply double-clicking the building. To exit Edit Mode, use the option on top bar or click anywhere outside the grey box.

The official version was launched successfully in Q2, 2022. More features went online in the following months. The client was satisfied with our outcome and wanted to continue the collaboration to make the design-build process of modular buildings more efficient and more intelligent.

In the acceptance test, all three typical users from the client company found the platform easy to navigate, helpful for creating design schemes, and providing sufficient data for making design decisions.