CBIMS Knowledge Base
Time
6 months
09.2022 - 03.2023
Team
UX Lead (Me)
1 Project Manager/ 3 Developers/
1 Researcher
Achievements
Customer support decrease: 100% to 23%
Number of digitized sets of regulations: 227
Number of regulation sentences: 43562
Designed a web wizard from 0 to 1, helping architects customize digital building codes. This product is the first and only building code digitalization tool and won the BuildingSMART Best Technology Solution Award in 2023.
Tools
Outcome
How to improve the coding experience for architects to digitalize building regulations?
This is an innovative experience that allows users without coding background to intuitively write building codes without support from developers.
Traditional Coding Platform
Pain Points for Architects:
This is too complex for users without a coding background.
This is hard to manage and navigate.
New Coding Platform
Code with templates and manage by sentences.
How did I design the changes?
The case study below breaks down the process into context, research, and 3 challenges and shows how I solved the challenges innovatively.
Context
A building needs to go through many rounds of building code review manually. This is an inefficient process.
Every building needs to go through several rounds of building code checking before construction. Although there are more and more digital building 3D models, the checking process is currently manual and repetitive. If the regulations are digitalized just like building models, computers will be able to help review models, moreover, results can also be easier to read.
Researched the target users and defined business needs & user requirements.
Designed user flows and prototypes, and created a design system that is consistent with the desktop application.
Tested prototypes and iterated based on user feedback.
By traditional manual review, it takes 2 reviewers 7 days in total to process an average building checking. This budget can be saved by by automated checking.
My Roles
Vision
Design Goals
Hover to check out their needs
/ Business needs: How might we increase the efficiency of building code review?
/ User needs: How might we satisfy both experts and beginners with one system?
Experts have experience programming in this language and want to improve efficiency and accuracy.
Beginners have no coding background and want to understand the system intuitively.
Research
I interviewed target users and understood that the building codes were complex. There are different needs of 2 types of target users.
Design challenge: Complexity.
How to onboard users with 100+ grammar types?
Understand
There are hundreds of sentence grammar types in the library, will users understand them easily?
Due to the complexity of legal documents, there are more than a hundred different grammar types in the library. And it is super overwhelming for users to learn this much at the beginning.
Grammar Library (134 types)
STEP 1: To ramp up users step by step, there were 2 different modes in the alpha phase.
There were 2 modes in the MVP stage. One is a template and the other one is customize. If the sentence grammar does not fall into the template, users will need to switch to the customize mode and manually type in the codes.
STEP 2: MVP Testing result
After testing with architects from design institutes. 97% of users complained about the customizable method because it is really hard to understand the grammars if users have to write everything from scratch and there are compile errors all the time when users didn’t code perfectly. However, only 14% users reached out to customer service using the template and most of them are regarding if customizing is necessary.
Data reflected that users accept template coding intuitively and they are ready for a more robust template system.
STEP 3: Expand the product
After receiving the testing results, the team was confident that template mode can be accepted by users and it is time to expand the product. In beta phase, users are allowed to either type in their sentences or choose a template.
Design challenge: Efficiency.
Standards are long, and users want to edit fast.
Users make a lot of mistakes, validation is needed.
Iterate
Solution option 1: Text
The original solution is a coding interface. It is standard and text-based, however, after 1-year training, the rate for customer support needed is still 100%.
Solution option 2: Node
The programming interface that architects are more familiar with is node-based.
But expert users complained about the efficiency. It is common to have hundreds of sentences in a rule set, it would take too long if they are programmed in this method.
Final solution: Code Bubbles
The final solution is a middle ground between the text interface and the visual interface. Users have 2 input methods:
The first way is typing manually, the word becomes a bubble whenever users input a space. This method is familiar to the typing behavior of experts.
The second way is selecting a sentence template first, and then filling words in each bubble. This method is welcomed by beginners who are not familiar with it.
Top: manual typing | Bottom: template input
Bubble Design System
Most bubbles have 4 states, correct, blank, typing, and wrong. The stroke color of the bubble shows the state of the bubble. And the text color shows the term category, and the text is semi-transparent as a hint for empty bubbles.
Style Guide
Comparing the 3 solutions, code bubble achieve all the requirements of both expert users and beginner users. It allows fast coding, and flexible editing and is also intuitive for beginners to learn.
Visual
Bubble Styles
Pros and Cons
Design challenge: Flexibility.
There are many sentences in 1 regulation.
Keywords are hard to understand for beginners
Previous Design Solution Critique
Because each sentence only has one keyword, the original solution is to let users select a keyword to add a sentence. So every time users click a keyword, we add a sentence with the selected keyword.
And the original design solution did not provide enough flexibility. It did not allow for further customization, and users cannot change their input after the sentence is created.
Although combining “add a sentence” with “select a keyword” is more efficient. When users add a sentence, they might not know what keyword is needed, especially for beginners. The dropdown menu provides an opportunity for users to come back and revise the keyword.
Usability Testing Feedback
Hard to start the user flow without understanding abstract keywords?
There are hundreds of grammar types under the 4 keywords, which means each keyword can lead to up to 30 grammar types. Users cannot memorize all the possible options, and selecting the right keyword as the first step made it extremely hard for users to start the user flow correctly.
Revised Design Solution
Outcome
Apply the Regulation Coder to the 4-Step Generation Wizard
The 4-step wizard is the foundation of creating or editing a digital building code. The regulation coder is the 3rd step in this process. Compared to the special design system of the 3rd step, other steps are designed more traditionally for users to intuitively start the editing process.
Other web screens
I was also responsible for designing a web system following the same color palette and a similar style guide to ensure visual consistency.
Achievements
Together with the desktop application, Knowledge Base won the best technology solution 2023 in the BuildingSMART 2023 Conference.
Customer support needed:
-77%
Number of companies using the solution:
200+
The number of digitalized sentences:
43562
Part of the list of the digitalized standards
BuildingSMART Best Technology Solution
Conclusion
Research and iterate
Clearly defining the target users and business needs is critical at the beginning of this project. Interviewing users and observing how they edit standards led to a solid foundation for this project. Besides, design options and constant iterations also contributed to the improvement of the product.
Simplify
There is a learning curve for each functionality and I need to make this site as intuitive and organized as possible for users. There are a lot of lists, charts and buttons in the product. They need to be consistently designed with clear priority.
Systematic
Combining with CBIMS Manager, the 2 products are designed as a system that follows the same branding guidelines. Links are designed on both products as bridges between them.