About the project
Echo
Smart BIM — Designing for Smarter, Safer, More Collaborative Construction
Smart BIM is an AI-powered platform that integrates Building Information Modelling (BIM) with intelligent property and construction management tools. It supports the full construction lifecycle—from planning and coordination to operations and maintenance—by streamlining workflows, enabling real-time collaboration, and making complex building data accessible and actionable.
As the UI/UX Designer, I collaborated with the product manager, engineering team, and BIM consultants to:
-
Translate technical BIM processes into intuitive user flows
-
Build a scalable design system
-
Prototype key platform features for real-world use cases
-
Solve pain points experienced by engineers, project managers, and field technicians
Role
User Experience
User Interface
Visual Design
Prototyping
Company
ShiPeng Technology
Year
2025
Who are our users?
Key Stakeholders in BIM and Their Roles
Engineers (Structural, MEP, etc.)
Engineers—including structural, mechanical, electrical, and plumbing specialists—use Smart BIM to detect design clashes, and analyze system layouts. The platform allows them to interact with complex building data intuitively, while AI-assisted tools help them identify errors and improve coordination across disciplines.
Contractors
Contractors rely on Smart BIM for construction planning, real-time progress tracking, and on-site issue management.
They use the platform’s scheduling tools to stay on top of deadlines, while the integrated dashboards and material tracking features help reduce waste and improve efficiency during the build process.
Owners and Facility Managers
Owners and facility managers benefit from Smart BIM through long-term access to a digital twin of their building.
They use the platform to manage maintenance schedules, monitor energy performance, and integrate building systems—all from a centralized interface that evolves with the building over time.
Interior Designers and Landscape Architects
Interior designers and landscape architects use Smart BIM to visualize and align their designs within the larger building model. This coordination helps prevent conflicts with structural or mechanical elements, ensuring smoother collaboration and fewer design changes during construction.
Government Agencies
Government agencies turn to Smart BIM for regulatory review, public infrastructure planning, and oversight of large-scale construction projects. The platform provides them with up-to-date models, documentation, and progress reports to ensure transparency and compliance at every stage.
Software Providers
BIM designers use Smart BIM to upload and update models, communicate with on-site teams through the Q&A system, and make adjustments as needed. This helps ensure design accuracy and improves collaboration with both internal teams and clients.
Understanding the Problems
We began by identifying key friction points in construction project management through stakeholder interviews and task flow mapping.
Key Challenges:
Error-Prone Quality Checks
Construction quality often suffers due to fragmented documentation, outdated drawings, and inconsistent communication across teams. Without a centralized source of truth, mistakes in installation and construction are common—leading to delays, rework, and compliance issues. Teams often struggle to verify the latest version of project plans, which increases the risk of unauthorized or incorrect implementation on-site.
Cost Overruns
Material waste and procurement inefficiencies are major drivers of rising project costs. Inaccurate or incomplete information about required materials results in over-ordering, under-ordering, or duplication of supplies. Additionally, lack of transparency in procurement workflows and difficulty tracking material flow across teams contribute to inflated budgets and missed savings opportunities.
Delayed Timelines
Projects frequently fall behind schedule due to misaligned teams, last-minute design changes, and unforeseen site issues. Errors during construction phases often require rework, which consumes both time and resources. Meanwhile, poor coordination between departments and lack of real-time updates make it hard for stakeholders to respond quickly to shifting conditions, leading to contractual breaches and penalty risks.
These challenges result in significant productivity loss and low transparency between teams on-site and off-site. When information is scattered across multiple platforms or buried within siloed systems, teams often spend excessive time chasing updates, clarifying responsibilities, or waiting on approvals.
This leads to delays in decision-making, duplicated efforts, and increased chances of miscommunication. Without a centralized, real-time view of project data, it becomes difficult for off-site teams to stay aligned with on-site progress, ultimately weakening collaboration and accountability across the organization.
ABOUT
Backend in a box called brainCloud is a cloud-based backend platform that provides pre-built features for game developers to build multiplayer, social, and free-to-play mobile games across platforms without having to develop their own backend systems.
It offers APIs for cloud data storage, multiplayer functionality, achievements, leaderboards, monetization through in-app purchases and promotions, and notifications. Developers can also extend its functionality through custom cloud code.
My mission was to refresh the brainCloud brand logo and enhance the user interface and experience design across key platform feature pages.
By introducing new features and optimizing existing ones, the goal is to create a more seamless, efficient, and engaging experience for developers, improving workflow, accessibility, and overall satisfaction.
Our UX Approach
To solve these issues, we designed a BIM-centered platform powered by AI and integrated visualization tools. Our design approach focused on
![3_points_19 [Converted].png](https://static.wixstatic.com/media/bd0a17_1acd7df7c0124aa08394587e09cd4fa5~mv2.png/v1/fill/w_980,h_446,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/3_points_19%20%5BConverted%5D.png)
Key Features & UX Solutions
Project Dashboard
The main portal for managing all construction projects. Users can:
-
Switch seamlessly between list and map views for a clear overview of all projects.
-
Quickly compare and track project progress, budget, and critical issues through dashboard cards.
-
Navigate directly into specific projects for deeper management and updates
Side Navigation
The side navigation enables users to seamlessly switch between the Company tab—providing an overview of all projects—and the Project tab for a deep dive into a specific project. Within the Project tab, a project selector allows users to choose which specific project they want to view.
My Schedule
Users can view and manage schedules across all projects to:
-
Consolidate inspection deadlines, meetings, and key events from multiple projects into a single calendar view
-
Track upcoming activities by date to ensure timely follow-ups and prevent missed milestones
Mission Center
View and control every project’s tasks in one place — from design to construction — with real-time status, priorities, and assignments:
-
Centralize design, construction, and collaboration issues from multiple projects in one view
-
Monitor status, priority, and assignees to keep every project on schedule and aligned
BIM Dashboard
Users can upload 3D BIM models to:
-
Present architectural layouts with real-world precision
-
Analyze and highlight design conflicts before construction begins
-
See any referenced model elements listed in the right-hand issue panel
-
Click the Target icon on an issue card to locate the corresponding component in the model for comparison
-
Navigate directly to the issue in Issue Management from the issue list
-
View related issues in the right-hand panel when selecting a component in the model
Timeline Management
Interactive timeline page for planning and tracking project milestones:
-
Integrates with model updates and construction phases
-
Helps teams visualize progress and deadlines in real-time
-
Integrates with an AI assistant that, once provided with project details, generates an optimized project timeline and Gantt chart based on the given data and schedule—making progress tracking simpler and more efficient
user flow (Sign up)
Problem Solving- Banner
One of the key UI enhancements I introduced after joining the team was the Banner feature redesign, aimed at improving workflow efficiency and real-time product performance tracking. This feature allows users to quickly monitor key operational metrics and revenue without navigating away from their current workspace or switching between different teams and products.
To achieve this, I implemented an expandable/collapsible interaction with a minimized state visualization, ensuring that even when the Banner is collapsed, users can still seamlessly switch between teams and view essential data in a compact format. This design significantly enhances usability, providing a more intuitive and streamlined experience, particularly for existing users who rely on quick access to performance insights.
This design effectively addresses the issue users previously faced on the platform—constantly switching between different functional pages to locate specific information. It enables users to quickly and efficiently compare and review data from various pages in one place.
Cloud Code
brainCloud allows developers to write custom Cloud Code routines in JavaScript, that reside and run on the brainCloud servers, allowing execution of code more securely and efficiently than if it were run client-side.
Advantages of Cloud Code scripts include:
-
Better performance when calling multiple API calls in a row
-
Lower brainCloud costs (the first 3 API calls are free, Houseand each one after is 1/2 a count)
-
More secure
-
Ability to change logic server-side without a client update
-
Ability to call out to external web services
-
Ability to perform certain operations that are not enabled in the client API
Cloud Code scripts can be called from:
-
client apps - via the Script Service APIs
-
developer-operated servers - via the Server-to-Server API
-
third-party services - via brainCloud's WebHooks interface
-
triggered via other operations (API Hooks) - scripts can be configured to be triggered automatically as pre- or post- conditions for other API operations
-
scheduled - scripts scheduled to execute in the future
Light & Dark Mode
Light Mode & Dark Mode is a feature designed to enhance users' viewing experience based on their preferences and environment."
RESULT
The brainCloud platform consists of a wide range of interface designs, each serving different functionalities. To showcase the most impactful improvements, I have selected some key screens that highlight unique and critical features.
Brand Refresh
The brainCloud logo redesign was driven by the need for a more modern, versatile, and visually balanced identity that aligns with the company’s SaaS focus and digital presence.
The updated design enhances brand recognition, scalability, and clarity while maintaining the essence of the original concept.
Brand Refresh: Before and After
Key Improvements & Design Rationale
Stronger Brand Identity
-
The new design is more professional and approachable, improving readability and brand recognition.
-
A rounded sans-serif font adds a modern, tech-friendly feel.
Refined Cloud & Lightning Symbol
-
The cloud and lightning bolt are now seamlessly integrated, symbolizing speed and cloud computing.
-
The icon’s proportions are improved for better balance and clarity.
Better Scalability & Versatility
-
The simplified icon ensures clarity at all sizes, from small UI elements to large branding.
-
Works effectively in both light and dark modes.
Enhanced Colour & Contrast
-
A refined blue and dark gray palette adds a tech-forward and professional look.
-
The yellow lightning bolt boosts visibility, reinforcing energy and efficiency.
Aligned with Brand Guidelines
-
The spacing, proportions, and typography create a more cohesive and balanced design.
-
The stroke weight and font weight are now harmonious for a refined, unified look.
brand stretching
Since we use brainCloud API Docs, brainCloud Forums and brainCloud Bootcamp to help users quickly understand and get started with brainCloud, we have extended the original brainCloud logo to create dedicated brand marks for these resources:
-
brainCloud API Docs:
Serves as a comprehensive technical documentation hub for the platform, allowing users to search, read, and learn. -
brainCloud Forums:
Functions as a real-time customer support and troubleshooting platform, enabling users to receive technical assistance and engage in discussions.
-
brainCloud Bootcamp:
CarProvides instructional videos, offering a step-by-step learning experience for users.
