A Little Summary
Team
Shiyu Zhao
UX Designer
Youshuang Zheng
Product Manager
Skiil
UI/UX Design
Information Architecture
User Research
Visual Design
Technical Communication
Timeline
Jan '23– Mai '23
12 Weeks
Team
Figma
CAD software
Revit Software
CAD software
Brief
XKool BuildingCreator is an AI-powered design tool, built exclusively for architects. The CAD drawing upload flow is the product's core onboarding module, which is the very first step. In the previous version, this critical entry point was fundamentally broken: prone to dead ends, plagued by inefficient workflows, lacking clear feedback, and rendered nearly unusable. This optimization project was built on a full backend refactor, powered by new AI algorithms and component architecture.
I led the end-to-end UX redesign of this module's workflow. My proposals were approved by key stakeholders, prioritized in the development roadmap, and will soon serve millions of architects worldwide.
Background
XKool BuildingCreator leverages a vast library of housing layouts and intelligent editing features, it quickly generates floor plans, automatically calculates area metrics, and verifies compliance with design standards. Users can export construction drawings, 3D models, and BIM models in one click, improving the efficiency and quality control of residential design projects.
This project focuses on optimizing the user experience of BuildCreator’s onboarding flow: the CAD drawing upload module . As the first touchpoint of the entire product, this module processes CAD drawings uploaded by architects, identifies building elements (walls, doors, windows, rooms, etc.), and converts them into editable 2D and 3D models on the platform.
As the foundation for all subsequent design work, a poor experience in this initial flow would directly disrupt all following workflows, making this redesign essential to the product’s overall usability.
Research
With the intent to discover what our customers need in this new working environment, we conducted both quantitative and qualitative research from our external client as well as our internal teams.
01
"I correct objects without knowing if recognition succeeded. Then 'next' tells me the drawing has problems, but not what's wrong. All my work is wasted.”
External Client
02
"Setting component parameters at the start makes no sense. At that point, even the object types are wrong."
External Client
03
"Selecting rooms one by one is painful. Marquee or outline selection would work better, or auto-partition from existing data. And I can't see the partition result at all right now."
External Client
04
"The alignment icons are unclear. Snap is inaccurate. Custom alignment is basically non-functional. Terms like 'canvas origin' don't match what actually happens in the tool."
Xkool Emplyee
05
"After placing a drawing on the canvas, I can't move it to a precise position. It always lands offset from where I want it, making the whole placement useless."
External Client
06
"The v1.0 correction environment ignores edge cases, and the features that were designed never worked properly. Combined with the algorithm's limitations, the whole tool is basically unusable."
Product Manager
Problem Statement
With both the quantitative and qualitative research in mind, we concluded the most prominent user problems are the following three: lack of error tolerance in the workflow, unintuitive interaction logic, and insufficient information visualization.
Problem 01
One Way Forward. No Way Back.
Architects work fast trhough moving between regions, select multiple units, and iterate constantly. XKool only supports through clicking each element one at a time to do any of it. There's no batch select, no keyboard shortcut, nothing built for expert workflows. And when AI recognition fails partway through, every correction up to that point is discarded. The user lands back at the start with no explanation of what went wrong.
Problem 02
A Visual Tool With Nothing to See.
Architecture is a visual discipline. Designers read the layout to make every decision: where partitions sit, where regions begin and end, where each unit's results land. XKool shows almost none of this on screen. Partition boundaries aren't drawn. Unit outputs have no visual anchor. Designers reconstruct the layout in their head every time they look at the screen.
The Mission
How might we create a seamless CAD entry experience in BuildCreator for architects, by providing clear error guidance, intuitive interactions, and immediate visual feedback?
Design Solutions
Step 01: Alignment
What do users do?
After uploading their CAD drawing, users align it to the software's canvas in this step, establishing a shared reference frame so that every downstream recognition and correction operates on coordinates the system can trust.
Improvement 01
Make hidden dependency explicit
The original module followed an 8-step flow, yet the alignment setup, that every downstream operation depends on, was buried as implicit back-end logic in Step 5, with no clear entry or exit markers. Users couldn't know whether their alignment was correct until late in the process. The cost of failure was unsustainable.
In this redesign, alignment was promoted to an explicit step at the very front of the flow. Users must complete and confirm alignment before any correction work begins, so that errors are spotted and fixed before any work is invested. Wasted rework is avoided at its root.
Improvement 02
Eliminating useless ooptions
The widget is freely draggable on desktop. When approaching a screen corner, it snaps automatically. On mobile, movement is restricted to corner positions only.
Improvement 03
Real-time visual feedback
To remove decision uncertainty, the redesign allows the users to see the outcome before committing it. Before pressing Next, the user sees alignment guides rendered live on the canvas in response to every change.
Step 02: Component Categorization
What do users do?
After completing alignment, users categorize the raw geometric primitives extracted from the CAD drawing into six fundamental component types, including doors, windows, walls, stairs, elevators, railings, and columns, turning unlabeled geometry into structured architectural data, ready for single-object correction and modeling downstream.
Improvement 01
Visual encoding and unified language
By encoding information across multiple visual dimensions, different types of information become distinguishable through visual perception alone, without users having to read text.
For all interaction states, a unified visual language is established and maintained consistently across the layer panel and the main canvas. This consistency builds stable cognitive expectations, reducing the user's learning cost.
Step 03: Single-Object Correction
What do users do?
After completing component categorization, users refine each component object individually in this step — correcting misrecognitions, adding missed objects, and extending flat component data into the dimensional information needed for 3D modeling downstream.
Improvement 01
Bidirectional state feedback in real time
When users coordinate operations between the layer panel and the canvas, it's easy to lose track of which object they're acting. They uncertain whether their action took effect, repeatedly checking, accumulating high error-recovery costs.
In this redesign, the bidirectional link between layer panel and canvas is reinforced. Through immediate directional visual feedback, users can clearly perceive the object they're acting on, its current state, and the result of their action — eliminating uncertainty in interaction.
Step 04: Space Calibration
What do users do?
After completing single-object correction, users organize the recognized rooms into designable space modules in this step, assigning units, service cores, and other spaces, and tagging each room with a type (bedroom, living room, bathroom…).
Once complete, the CAD drawing is formally transformed into a single-building model, ready for editing in the BuildingCreator design environment.
Improvement 01
Interaction modes matched to architects' workflows
Multiple interaction modes designed to match the way professionals actually work.
For precision selection of individual objects state feedback (stronger hover highlights, selection outlines) is refined to improve selection accuracy.
For rapid selection of batch and area-based operations, marquee selection is added to align with how architects naturally work with regions of a drawing.
Improvement 02
Multi-panel coordination
When the user selects or modifies anything in any one panel, the other two automatically synchronize their states and provide visual feedback, strengthening the link between the layer panel, main canvas, and properties panel as a single connected system.