← All workPlatform · Building Automation — Metasys 7.0 → 10.0

A space-based reinvention of building management.

JCI's flagship building-management platform — a decades-old JAVA interface rebuilt as a modern, responsive HTML5 experience, organized around how operators actually think: space by space, not equipment by equipment.

Project role

UX Designer — IA, wireframes & visual system

Team

JCI UX · team of 6

Timeline

Multi-year · Metasys 7.0 → 10.0

Platforms

Desktop + mobile · HTML5

The short version

The work at a glance.

The problem
An equipment-centered legacy interface made building operations difficult to navigate.
My responsibility
One of six UX team members; contributed information architecture, wireframes, and visual design.
The key decision
Organize the experience around spaces and the way operators understand buildings, with responsive desktop and mobile views.
The outcome
Metasys 8.0 generated $3.4M in subscription revenue. My design contribution supported a broader team outcome; this is not a personal revenue attribution.
Metasys UI — the redesigned HTML5 building-management dashboard
$3.4M
Metasys 8.0 subscription revenue · team outcome
+89%
Subscription jump on Metasys 9.0 (Jul 2017)
+20%
Increase in overall Metasys sales
Patented
The “Circle of Comfort” room data-visualization
Overview

One revolutionary idea: shift the software’s focus from equipment-based navigation to space-based navigation.

The core challenge was recreating a decades-old JAVA interface in HTML5 while improving the commissioning, monitoring, and reporting experience across both desktop and mobile.

Metasys UI lets operators navigate space to space for real-time views of a floor and the equipment serving it — filtering data to zero in on problem areas, reading photo-realistic dashboards to spot issues at a glance, and managing buildings from anywhere on mobile.

The challenge

Three problems standing in the way.

01

Space vs. equipment

Operators think in spaces, not equipment. A service call was never “VAV-34 has a heating issue” — it was “Room 42 is running hot, can someone adjust it?” Yet users had been conditioned to navigate by equipment for decades. We had to invert a mental model the industry itself had reinforced since the ’90s.

02

“Infinitely complex” data

Metasys is often described as infinitely complex — the volume of data streaming from thousands of installed sensors is staggering. The challenge was delivering a genuinely simple, usable experience on top of all of it.

03

Functionality on the go

The data-rich experience also had to work on a phone. JCI was one of the first companies in the complex-building market to offer a true mobile building-management experience.

The approach

From voice-of-customer to a shipped visual system.

Step 01

Define who we’re designing for

The first step was understanding who our users are and what they needed from Metasys UI. I was part of the voice-of-customer initiative led by our research lead — a national series of interviews with Johnson Controls branch employees and customers.

Six personas emerged as critical to the success of MUI, and became the reference point every downstream decision was measured against.

The six Metasys UI persona archetypes from voice-of-customer research
Six personas · voice-of-customer research
Step 02

Sketch the information architecture

With stakeholder alignment on who we were designing for, a series of brainstorming and sketching sessions worked out the information architecture for space-based navigation — including the hard part: how commissioning, monitoring, and reporting would live inside the new paradigm.

Whiteboard sketching session — space-based navigation concepts
Whiteboard sketching session — information architecture
Whiteboard sketching session — commissioning flows
Whiteboard sketching session — monitoring and reporting

Sketching & IA sessions

Step 03

Tell the story, space by space

Our solution was story-based: as a user navigates down from Campus to Room, the interface reveals exactly what’s happening in that space. I turned the sketches into static wireframes to pull the ideas together and show stakeholders a cleaner, more cohesive vision.

Campus

Many buildings at a glance

Summary information, overall performance and health across an entire portfolio of buildings.

Building

Aggregated to one building

Real-time kWh energy performance — critical for LEED certification and a genuine game-changer at the time.

Floor

Added after feedback

Air-distribution systems plus heat-maps showing which zones ran above or below set-point — surfaced by customers in review.

Room

Where the work happens

Occupancy, set-points, feeding equipment, and editable schedules that govern the space — the heart of energy savings.

Static wireframes · Campus → Room

Step 04

Make it tangible in Axure

Next, I turned the static wireframes into an interactive lo-fi prototype in Axure. It gave stakeholders and developers something real to make decisions from — and soon the planning sessions started, JCI moved into action, and the designs began coming to life.

Lo-fi interactive prototype · Campus → Building → Floor → Floor-section → Room

Step 05

Disrupt the industry with design

The final move was the presentation layer — and there was room to do something big. For decades operators had used JAVA software straight out of 1996, and the whole HVAC industry looked the part. I didn’t want to hand over pretty pictures. I wanted to disrupt the industry with design.

Light, pastel base

Soft base shades let the communicative elements — data, visualizations, notifications — come through clear as day.

A cleaner voice

A clean, utopian-future sans-serif replaced the SEGOE UI JCI had used since anyone could remember. A breath of fresh air.

One family, many products

Metasys brand colors anchored the dashboards and headers — a flagship standard for a whole family of JCI software.

Early mobile & responsive design — engineered to hit just as hard on a phone as on desktop

The outcome

A flagship — and a franchise.

Product Management dubbed the room’s data-visualization the “Circle of Comfort” — the first time JCI had seen data points organized so visually. It was distinctive enough that the company patented it.

The dashboards were fully responsive — engineered alongside developers to land just as hard on a phone as on desktop. The team then ran alpha-site visits, vetting the flows with customers around the world.

Best selling release of Metasys in the history of Metasys.

— Mark Ziolkowski · VP of Product Management & Competitive Response
Metasys 8.0

$3.4M

Metasys 8.0 subscription revenue. My design work contributed to this team outcome; I worked on IA, wireframes, and visual design as one of six UX team members.

Metasys 9.0 · Jul 2017

+89%

Subscriptions jumped, driving a 20% increase in overall Metasys sales.

Metasys UI — building and equipment views, 2019

Recognition

Patents & press.

Patents

US10528013B2

US20220067851A1

Press

Facility Executive

Commercial Integrator

Security Sales & Integration

Healthcare Facilities Today

Team · JCI UX

Corey Poquette

UX Lead

Michael Seidel

UX Research Lead

Alan Schwegler

UX Designer

Garrett Wiens-kind

UX Designer

Nicole Madison

UX Designer

Adam Grabowski

UX Designer

Let's talk

Discuss this project with me.

Ask about my role, a design decision, or how the team approached implementation.

LET’S TALK

Send me an email