Building sustainability analytics firm
Architects compare energy, carbon and cost across design options before they build
A building sustainability analytics firm asked us for a subscription platform where owners, architects and consultants compare design scenarios for energy, carbon, cost and waste. Its engine could not deploy yet, so we built around validated result uploads and shipped on real data.
Construction & IndustryBuilding sustainability simulation SaaSBuilt from zero
The challenge
Testing design options for energy, carbon, cost and waste depended on consultants and manual work, and the client's simulation scripts ran only on its own machines.
What we did
We pinned the domain down in a versioned scope, then built a multi-role platform that imports validated simulation results, renders 3D models and compares scenarios for experts and owners.
The outcome
Phase I reached production on the client's own simulation data after discovery and four weekly sprints, without waiting for the engine, and the client owns the code.
- In production
- Phase I, on the client's own simulation data
- Users
- Building owners, architects and consultants
- Inputs
- .ply 3D models and simulation result files
- Code
- The client's intellectual property
The starting point
A subscription web platform for sustainable building decisions. Building owners, architects and sustainability consultants upload a 3D building model and compare scenarios for energy use, GHG emissions, cost and waste, while admins manage users and upload simulation results.
What had to change
Testing design options depended on consultants and manual work, so outcomes were hard to see and compare. The client had a demo, a storyboard and simulation scripts that ran on its own machines, but no production platform.
What could not break
- Simulations stay with the client and run in its own local scripts
- Phase I accepts one 3D model format, .ply, validated on upload
- Baselines follow Canada's NECB energy code by building type and location
- No sensors, IoT or third-party integrations in Phase I
- Users see only the projects and simulations assigned to them
The calls we made
We pinned the domain down before designing anything, then shaped the product so it did not have to wait for the engine.
- 01
Ship around the engine, not on it
The scope recorded that the simulation scripts were not ready to deploy, so simulations stayed in the client's local scripts and the platform imports their result files with validation. The product could ship and be tested on real data while the engine matured.
- 02
Design from the real data
We turned the storyboard and client data into eight scoping questions and a versioned scope document, and asked for a spreadsheet of every parameter, input, output and graph so the dashboard followed actual data.
- 03
A deliberately narrow first phase
Phase I took one 3D model format, one baseline code and admin-uploaded results, and moved self registration and more formats to a later phase, which kept a dense domain shippable.
Ruled outSelf registration and .3dm, .rvt and .ifc models in the first release, all moved to Phase II.
- 04
Two views of the same results
Experts get a parallel coordinates chart with brushing across many inputs, while owners get a slider view that compares each value against the baseline. We tried react-vis for the parallel chart and moved to Plotly.
Ruled outreact-vis for the parallel coordinates chart.
- 05
Authorization on every action
Testing showed that a user could see another user's simulations, so we added project assignment to users and an authorization check on every action, on top of the private routes in the front end.
Ruled outRelying on private routes in the front end alone.
How the system fits together
What we built
Projects and assessments
Project setup with building specifications and scope (existing building, new construction or demolition), a map of each project's assessment status and a cascading list of assessments under every project.
Simulation dashboard
Left panel filters, a Plotly parallel coordinates chart with multi-column brushing and sorting, a slider comparison against baseline, simulation cards with EUI, GHG and cost, hover bar charts of envelope inputs, pie and half pie charts, scatter plots, search and CSV download.
Validated imports
Project and building sheets and simulation CSVs import with validation, tolerate a change in column order, and a re-upload overrides earlier results.
3D models in the browser
Uploaded .ply building models are validated, stored on S3 and rendered with Three.js, with vertex colors and a toggle to a 2D image beside each scenario's results.
Roles and access
Admin, user and super admin roles, invites, login and password reset by email through Amazon SES, project assignment and an authorization check on every action.
How it works
Set up the project
A user adds a project with its building specifications and scope, and it appears on the map with its assessment status.
Upload the model
The .ply building model is uploaded, validated and rendered in the browser.
Bring in results
An admin imports the simulation results produced by the client's scripts, checked on the way in.
Compare scenarios
Experts brush across inputs on the parallel chart, while owners compare each value against the baseline with sliders.
Export
Results download as CSV for use outside the platform.
A closer look
What changed
The platform reached production on the client's real simulation data without waiting for the engine to be deployable, and every round of client feedback was fixed and redeployed. Owners and experts now compare energy, carbon and cost scenarios on one dashboard, and the client owns the code.
- Phase I live on real simulation data
- Production
- Three client rounds, each fixed and redeployed
- Feedback
Under the hood
- Datics role
- Product built by Datics
- Data boundary
- No AI in this phase: simulations run in the client's own scripts, and the platform handles inputs, storage and visualization of their results.
- Access
- Admin, user and super admin roles with project assignment, private routes and an authorization check on every action, so users see only their own projects.
- Charts and 3D
- Plotly.js for the parallel coordinates chart and Three.js for .ply models with vertex colors and a 2D image toggle, with Material UI for the interface.
- Deployment
- A dedicated AWS account: EC2 for the Node.js API, RDS PostgreSQL, S3 and CloudFront for the front end and assets, and SES for email, with separate dev and production environments.
Data and retrieval
Cloud and infrastructure
Apps and APIs
Also in the stack
How it shipped
Discovery
Eight scoping questions on the demo and storyboard, a high level scope document with mock screens, and a request for a spreadsheet of every parameter, input, output and graph.
Scope and design
A versioned scope document, a Phase I scope and flowcharts, and a Figma design system and screens revised after each client design review.
Weekly sprints one and two
Sign in, project and assessment APIs, the map and a first dev deployment, then validated imports, simulation upload, filters, the parallel and slider charts and a dedicated AWS environment.
Weekly sprints three and four
Scatter, pie and bar charts, brushing and 3D rendering, then a QA pass, roles, authorization on every action, search and the production release.
Client feedback rounds
Three rounds of client feedback, from font sizes on the parallel view to a 3D camera that matches the 2D image, each fixed and redeployed.
Design and scope in step
Design and scope moved together through three client design reviews, and development ran in four one week sprints, each closed with a demo to the client.
Code the client owns
The code is the client's intellectual property, and the end client had repository access so its own developer could review our work during the build.
What this unlocked
The scope document already sets out Phase II: self registration and onboarding, more 3D formats such as .3dm, .rvt and .ifc, and the validate and track phases.
Related work
Have a product with the same kind of constraints?
Tell us what already exists and what you want it to do. We will tell you what it takes.