Pulse IQ
A smart-building ops dashboard I designed and coded through six rewrites, a Fire TV port, and an Angular migration.
- Role
- Product designer and frontend developer — end to end
- Year
- 2018 – 2020
- Platform
- Web (AngularJS, Bootstrap, c3.js), Angular CLI migration in flight, Amazon Fire TV port spike
- Industry
- Smart buildings / HVAC operations
Pulse IQ is an ops dashboard for commercial and multi-family HVAC systems. Operators use it to monitor chillers, cooling towers, pumps, boilers, air handlers, and per-apartment fan coil units in real time, triage alarms, and track energy savings. I designed every screen and wrote the frontend myself in HTML, CSS, and AngularJS, then rebuilt it six times, spiked a Fire TV port, and started an Angular migration. Tagline: "Your building. Smarter." The sidebar always ran a live total of dollars saved since the operator first logged in.
I started this project on my own because most HVAC dashboards I had seen looked like the PLC firmware engineer had designed them. Operators and mechanical engineers spent all day looking at gray tables of setpoints and amp readings, and nobody had asked them what they needed to see first.
The money is real. A commercial chiller plant can waste tens of thousands of dollars a month if a condenser approach drifts, a cooling tower fan sticks, or a boiler cycles when it shouldn't. Operators need to know within seconds, not "the data is in the SCADA system somewhere." Property managers need the monthly story. Mechanical engineers need the raw telemetry when something goes sideways.
Pulse IQ had to work for three people looking at the same building through three different lenses. That shaped the product: the Home dashboard for the property manager, the Mechanical dashboard for the operator, and the expandable card details for the engineer.
What was broken.
The UX problem was density without noise. One chiller alone has around twenty meaningful readings: setpoint, current temp, tons, kWh/ton, evaporator entering and leaving, condenser entering and leaving, delta-T, approach, GPM flow, motor amps, motor volts, kWh, alarm count, on/off state, and mode. Multiply that across chillers, cooling towers, primary and secondary loops, pumps, boilers, domestic hot water, air handlers, ventilation fans, and every apartment's fan coil unit, and a flat table becomes unusable.
The second problem was alarms. HVAC alarms are noisy by nature. Many of them are transient, many are duplicates, and the one that matters is often buried. Operators need to triage quickly, acknowledge, and leave an audit trail of who did what. Existing tools treated alarms like a log file.
The third problem was that I was the designer, the developer, and the person figuring out the data model. There was no PM writing a spec. I had to decide what a chiller card should show at a glance versus what belonged in the expanded state, and I had to make those calls while writing the AngularJS that rendered them.
Workflow first — map the operator's day before drawing a single card
Before I opened a design tool or wrote any markup, I mapped how a building operator moves through their morning. What do they check first? What breaks their flow? When does an alarm interrupt them, and what do they need to see in that moment? Every screen in Pulse IQ is a direct answer to a step in this flow. The Home dashboard exists because step 2 needed to exist. The expandable card details exist because step 4 needed to happen without leaving the grid.
- 1
Sign in and land on the building
Floating-label sign-in, remember-me. No splash, no marketing. The operator lands directly on the Home dashboard for the building they own.
Operator - 2
Scan the health of the whole property
The Home dashboard shows a lifetime energy chart, power consumption toggled by month, season, or year, an apartment strip (average temp, setpoint, fan count, fan percentage, active units), and an alarm summary (total plus the last 30 days). This is the 30-second check.
Operator / Property Manager - 3
Drill into mechanical if anything looks off
The Mechanical dashboard is a responsive card grid covering chillers, cooling towers, condenser and building loop pumps, boilers, DHW, air handlers, and ventilation fans. Each card shows an ON/OFF pill, an alarm bell with count, a c3.js efficiency spark, and the four metrics that matter most: setpoint, current, tons, kWh/ton.
Operator - 4
Expand a card for engineering detail
Show more reveals evaporator entering and leaving, condenser entering and leaving, delta-T, approach, and GPM flow. These are the readings you need when you're troubleshooting. There is no page navigation. Context stays in place.
Mechanical Engineer - 5
Triage alarms
The Alarms view has tabbed Active, Acknowledged, and Single Alarm tables, along with filter search and priority labels. The one that matters is easy to find.
Operator - 6
Open an alarm and take action
Clicking to expand reveals a per-alarm action log with When, Action, and Who columns, plus a reply button. Every acknowledgment, every note, and every handoff sits inside one collapsible row.
Operator - 7
See the savings that justify the tool
The sidebar runs a live total of dollars saved since the operator started using Pulse IQ. That number is what a property manager renews on.
Property Manager
From tangled to shipped.
Learn HVAC before designing for it
I couldn't design a chiller card without knowing what a chiller card should show. So I spent weeks reading mechanical engineering documentation and building a real telemetry data model. The hvac.json that eventually shipped includes real engineering fields: approach, delta-T, kWh/ton, primary and secondary loops, and condenser and evaporator temperatures. Get the vocabulary wrong and an operator clocks it in five seconds and stops trusting the tool.
Map the workflow before the interface
I wrote out the operator's morning as a linear flow first. Sign in, scan, drill, expand, triage, act. Only then did I sketch screens. Every design decision traces back to a step in that flow. The Home dashboard exists to make step 2 possible in 30 seconds. The expandable card exists so step 4 doesn't break step 3's context.
Build the visual system
Bootstrap grid as the skeleton, custom CSS on top. Brand navy (#353559) and mint (#6AC4A4). Montserrat for headings, Open Sans for body. I designed the logo as well: a magnifying-glass Q with an orange bar-chart building inside and a red exclamation dot. The mark captures the pitch in one glyph. We look inside your building and tell you what needs attention.
Six rewrites and one Fire TV spike
The Pulse IQ NG folder has iterations 01 through 06 plus a "stable 10 02" checkpoint. Each one is a real AngularJS refactor with cleaner modules, better data flow, and more honest component boundaries. Iteration 04 was a marketing site variant. Iteration 06 became the polished latest, with a proper assets folder, a modules structure (authentication, home), and a large Bootstrap Icons SVG set. I also spiked an Amazon Fire TV port because a property manager asked if they could throw it on the lobby screen. That version never shipped, but it taught me a lot about TV-safe layouts.
Kick off the Angular CLI migration
Toward the end I was pulling the whole thing forward to Angular proper: a full Angular CLI project with Karma, tslint, and e2e scaffolding. I didn't finish the migration, which is worth saying plainly. What the exercise did was force me to redraw the module boundaries I had been living with, and the last AngularJS iteration ended up cleaner because I had tried to describe it in Angular first.
The moves that worked.
A workflow-shaped dashboard, not a data dump
The Home, Mechanical, and Alarms split maps directly to the three roles and the three moments in the operator's day. Nobody has to hunt for what they need first.
Cards that scale from glance to engineering detail
The Mechanical grid uses a col-sm-6 col-lg-3 responsive layout. Each card shows the four metrics that matter at a glance and hides the twelve that matter when you're troubleshooting behind an expand affordance. Same card, two contexts.
Alarms with an audit trail built in
Every alarm expands to a When / Action / Who log with a reply button on every entry. Acknowledgment becomes a record rather than a checkbox.
A real telemetry data model
The hvac.json isn't mocked with lorem ipsum. It includes setpoints, motor amps and volts, tons, kWh/ton, entering and leaving temps on both evaporator and condenser, delta-T, approach, GPM flow, alarm counts, and system mode. A mechanical engineer looks at it and takes it seriously.
A brand mark that carries the pitch
Magnifying-glass Q, orange bar-chart building inside, red exclamation dot. We look inside your building. We tell you what needs attention. One glyph, the whole pitch.
A designer who ships, through six rewrites
Iterations 01 through 06, a stable checkpoint, a Fire TV spike, and an Angular migration in flight. This was a live product I rebuilt every time I learned something new about how operators actually used it.
Screens and scraps.
What shipped. What changed.
What shipped: a working AngularJS smart-building dashboard covering Home, Mechanical, Alarms, Sign-in, and Building Overview, with a real HVAC telemetry model and a distinctive brand system. Six numbered iterations plus a stable checkpoint in version control. A Fire TV port spike that taught me TV-safe design constraints even though it didn't ship. An Angular CLI migration underway. I don't have adoption metrics to quote here, because this was self-shipped and I'm not going to fabricate numbers. What I have is a codebase and a set of screens a mechanical engineer would look at without rolling their eyes.
“The habit I would keep is mapping the operator's morning before drawing anything. Every good decision in Pulse IQ traces back to that flow. The mistake I made was starting the Angular migration before the AngularJS version was stable. I burned time on framework work when I should have been polishing the alarms triage flow. If I did it again I would freeze the framework earlier and iterate harder on the two or three interactions operators actually live inside every day. And designing and coding the same product teaches you things a Figma-only workflow never will. You feel every decision twice.”
CHANGE Card
Embedding a pay card and a points-based loyalty program inside an HR staffing platform.