White circle
Case Study


Implemented streamlined workflows and automation resulting in a 44% decrease in diagnostic time

Overview screen for Connected Chillers


The Connected Equipment Internal Portal (CEP) is a dashboard for HVAC chiller engineers and technicians to perform remote diagnostics on chillers that are located at offsite customer locations.

The portal saves time and money for Johnson Controls through automation and instant access to problems like faults and alarms to diagnose issues without having to be on location.

Note: A chiller is similar in theory to an air conditioner for a house but used for a large building. It can be used for additional cooling purposes as well.


Our goals for this project were:

  • Design a more efficient workflow in the connected equipment portal so engineers and branch techs can manage 1000+ chillers more effectively through their day-to-day activities.
  • Decrease time needed to diagnose chillers with the portal and reduce communication inefficiencies. This reduces the operating costs to Johnson Controls.

Client: Johnson Controls

Timeline: 4 months to project completion, extended time for development delivery in phases

My Role: I was the primary UX and UI designer on the project where I collaborated with the Principle UX Designer, Senior UX Researcher, Product Manager, developers and other stakeholders on the global team to redesign the portal workflows and screens.

Gray circle svg

The struggles of diagnosing chillers.

Chiller engineers and field techs need to be able to communicate efficiently, share reports/notes, provide updates on chiller activities, and more to effectively service and support customer chillers. Their primary tool, the CEP (Connected Equipment Portal), doesn’t currently support all these needs, which means multiple tools must be used.

While other tools currently fill in these gaps, it adds steps, complexity, and time to the diagnostic process because of consistently shifting focus from the task at hand. Engineers rely heavily on Outlook email and Teams to communicate and share information about chillers. They need a way to communicate information inside of the portal instead of having to juggle multiple external tools.

Purple quotes
“The CEP (Connected Equipment Portal), doesn’t support all these needs, which means multiple tools must be used. While other tools currently fill in these gaps, it adds steps, complexity, and time to the diagnostic process.”

Who uses the dashboard?

By speaking with internal stakeholders and doing primary research with my team, I identified that chiller engineers and branch technicians for facilities are the main users for CEP.

They use the dashboard to diagnose chillers, generate reports, create recommendations for further actions on problem chillers, and communicate with team members on solving chiller issues.

I created personas based on the data I received from user interviews for the two main user types:

  • Chiller engineers (digital chiller experts)
  • Branch technicians

The personas created alignment among my team for the CEP portal and made it easier for me to make decisions on how to approach designing new workflows and screens going forward.

Chiller doctor and technician personas

Chiller doctor and branch technician personas

Understanding the technicians better.

I needed to know how engineers and technicians used the existing connected equipment portal to diagnose chillers in order to identify areas for improvement.

By conducting six user interviews with engineers and branch technicians on the North America team and three interviews in Europe and Asia, I was able to understand on a deeper level what their pain points were and problems I could start ideating how to solve.

Some things I learned:

The chiller engineer/branch technician communication loop is essential to successful connected chiller service and the CEP doesn't currently support it.

It is a multi-step, time consuming process for an engineer to do a chiller analysis, document the findings, share them and then log billable time.

Using multiple tools to diagnose chillers increases cognitive load and efficiency loss due to application switching.

“It was a struggle to find users to speak with for niche subject matter like HVAC chiller systems. My product manager was a big help in finding people on the relevant global teams to be our research participants.”
White quotes

Digging into functionality.

I researched how the current dashboardworked and how the information architecture was structured for modules and content. How did the different sections fit together and how did they function?

I made assumptions about specific graphs and other functionality because at this time I didn’t know what they were for and needed to figure out the workflow that the chiller docs were using for their tasks of diagnosing alarms and faults.

I later validated these assumptions by conducting additional interviews with the engineers and using contextual inquiry to see in real-time how they diagnosed faults and other issues.

Old Connected Equipment Portal

The old Connected Equipment Portal

Evaluating usability.

I examined the dashboard page by page and looked for problem areas with usability as well as questions I had about functionality. There were lots of issues with lack of labelling, consistency from tab to tab, error prevention on pages like alarm configuration, and visibility of system status regarding completing notifications.

In general, the interface gave off this feeling that there is a lack of context and not enough descriptive text to tell the user what each page’s purpose is. With the new designs, I wanted to make sure these problems were addressed.

From inefficient to efficient.

By analyzing the current user flows, I was able to figure out where friction points were for tasks and remove unnecessary steps.

Based on data I learned from the interviews, I created new flows that illuminated how many steps it takes to complete their tasks and how time consuming it becomes with hundreds or thousands of chillers in their portfolio. I was looking to pinpoint inefficiencies that could be addressed with automation using the dashboard.

Task flows analyzed included:

Streamlining navigation.

Along with creating user flows for key tasks, I assembled a sitemap for the current portal to visually identify the connections between navigational elements and how the portal pages worked together.

This was helpful in identifying areas where functionality overlapped or didn’t make sense. I corrected these issues in the updated designs and grouped similar functionality and content together. This makes it easier for users to find important information more quickly.

Forming Ideas

Ideating to create new solutions
“How might we increase the efficiency of diagnosing chillers by reducing repetitive work and simplifying workflows?

After research and defining workflows, I began ideation for new portal designs based on the data we assembled. I wanted to explore variations and multiple design concepts in the low-fidelity wireframes before spending a lot of time on visuals to match the Johnson Controls Element design system.

Fault code categories
Fault code categories

Originally, we wanted to combine all of the fault code language (status check, health check, panel codes, etc) and put them into three categories (critical, moderate and low) to simplify categorization.

The goal was to simplify the codes into criticality, but this didn’t make much sense at all to the technicians based on their current mental model, so we scrapped it.

Manage active points
Managing active points

The manage active points window for creating trend graphs was redesigned to remedy some issues with too many scrollbars, wasted white space in between graphs, and lack of labeling on both the selected points and the search functionality.

Configure Notifications

Lots of work was done on the configuration and sending of custom notifications. Being notified of alarms and faults to diagnose offline chillers quickly is of upmost importance to these technicians to reduce downtime and cost to customers.

Configure Fault Rules
Configuration of fault rules

The fault rules screen was redesigned to get rid of the previous accordion menu that was difficult to navigate. Instead, I used a left pane menu that would switch between the fault types and then the input points are displayed on the right to make them easier to find.

Fault rules are important for engineers to configure and set thresholds for when a chiller needs maintenance and be notified of it.

Testing initial design concepts.

It was important to test these ideas with our users in the early stages of design to make sure we were on the right track with our solutions and thereby reducing re-work later in high-fidelity design and development.

I setup three rounds of usability tests with five participants each to gauge their comprehension of how to use the portal with the redesigned functionality. I tested the overview page as well as the trends & comparative page (which used to be separate tabs) and got their overall thoughts on the information contained therein.  

Some changes made after testing

Graph preset manager
Graph preset manager

A preset manager section was added to the manage active points modal. When selecting points on a chiller to monitor, the techs can save presets of the graphs they have open and come back to the same preset later, saving time from setting up the graphs manually again.

They pointed out to us that they have to frequently waste effort re-creating graphs to use on multiple chillers with no way to replicate them.

Smart graphs
Smart graphs

“Smart Graphs” were added as an automation idea that would update the graph’s points based on which active fault is selected next to the graph timeline. The technician can use this data to see what was happening on the chiller at specific time intervals and pinpoint a cause.

"The new workflow with the Performance Index page was valuable to them because of how it combined active event/fault data, a timeline of chiller performance and then trend graphs underneath."
White quotes

Introducing chat messaging.

One of the main issues technicians deal with is communicating between team members and other stakeholders that make decisions on how to handle chiller problems. They needed a way to communicate in the portal itself, either to teammates or technical support, to get answers quickly and resolve issues.

Chat messaging solves this problem by automatically assigning a technical support person to their facility. Their team is also available to chat within the portal, and they don’t have to use Teams or Outlook to communicate about diagnostic information. This reduces cognitive load from application switching and helps techs remain focused on the problem at hand. It also stores the chat messages confidentially in CEP for each team to reference more easily later.

Chat messaging in the portal

Redesigning the diagnostics page.

Data synced to the timeline
Data synced to the timeline

The events (active faults and historic faults) and graphs are synced together with the timeline so if they select a fault, the information displayed in the graphs is accurate to the timeframe selected.

They really liked this idea of syncing the data which makes it easier to pinpoint the cause of a chiller fault.

Graph workspaces

Workspaces work in conjunction with graph presets to reduce manual creation of graphs over and over again. The tech creates presets of existing graphs and then saves them into a workspace to retrieve later.

I heard many times how they didn't have the ability to reuse graphs which is inefficient and frustrating. Workspaces along with presets solves this problem on a per-user basis.

Challenges with BSNA engineers.

We showed the designs to the Principal Engineer and other members of the Building Services North America (BSNA) team, who initially declined to be involved in research efforts due to time constraints and found that the chiller status table workflows did not fully meet their expectations.

They need to work with thousands of chillers in their portfolios and later asked for specific requirements in the designs that we hadn’t considered related to isolating which chillers to focus on.

Even though we had users from other global regions who we gathered data from and were able to design solutions with, we should have pushed back more when we couldn’t gather enough research from BSNA. Each region has slightly different ways of working and this caused issues later in the process that could have been alleviated if we were able to speak with them.

Changes made after BSNA contact

To resolve this problem, we brought these key members from BSNA onto the project right away and communicated with them much more frequently to ensure that their needs were met. I went back to the drawing board on some aspects of the chiller status table, including filtering, various table columns for statuses, and an improvement to the drawer slide-out that shows the fault information on chiller rows in a tabular format.

After these changes are implemented, they were much happier with the outcome.

Usability testing the first build.

I moderated usability tests on the MVP build of the portal to learn whether specific workflows were intuitive and easy to use. Specifically, I wanted to know if the primary task to secondary task flow for more complex interactions was effective and not burdensome with the modal interactions I had in place (such as going from chiller diagnosis to notification rules).

The reason I used modals to accomplish this was that if the engineer had a lot of data setup doing chiller diagnostics and then they wanted to setup a notification rule, they could accomplish this secondary task without losing their place.

Chiller diagnosis primary task to setting up notification rules

From chiller diagnosis primary task to setting up notification rules

Development noted to me that this data could not be saved to come back to, so to preserve it I used modal windows. However, since there are multiple interactions in the secondary task that can be done, it involved using nested modals.

I learned through testing that using nested modals wasn’t the optimal solution to this problem because:

In order to solve this problem, I looked into nested modal alternatives and came up with a solution using an infinite modal and popovers to achieve multiple interactions in the secondary task.

Full screen infinite modal with popover
Full screen infinite modal with popover

I used a full screen infinite modal and popovers to eliminate the need for nested modal stacking. This allows more screen real estate to display data and work in. It refreshes the current modal window with new content instead of opening a new one on each interaction.

I used a popover for certain interactions such as the add notification selection. Popovers can be easily exited, the background isn't dimmed so the content is still seen for reference, and doesn't disrupt the task flow.

Return to previous step and quickly exit task
Return to previous step and quickly exit task

The infinite modal has a back button on each step to return to the previous step. The label on the back button changes based on what the last step was and keeps the user notified of where they are in the task flow.

At any time, the user can quickly exit the secondary task by clicking the close button on the infinite modal and if any changes were made to any of the steps, it asks for a confirmation to close so they don't lose progress.

Spicing up the visuals.

After multiple rounds of ideation, testing and feedback from stakeholders, I began creating the high-fidelity design concepts for the portal to match the Johnson Controls’ Element design system.

Since CEP is part of a larger application framework called OpenBlue, I needed to make sure that it matched the other applications visually and felt like a cohesive part of the platform.

Spicing up the visuals

Home stretch and build out.

Even though I routinely communicated with developers during the design process to get their feedback, I wanted to make sure that the design concepts I gave them were clearly annotated and they understood the new workflows.

I annotated functionality on all the key screens for the application and then used Zeplin flows to show the connections between them and how interactions worked. The regular communication we had as a team and this documentation significantly reduced the usual back and forth questions about functionality that can come up.

Zeplin flows handoff

Impact and insights.

Positive reception

The redesign of the Connected Equipment Portal had a positive impact on the productivity of chiller engineers and technicians based on the feedback we received from them.

They mentioned how the new workflows increased diagnostic efficiency and reduced communication time compared to what they had before.


The Connected Chillers redesign received praise from our commercial solution leads to several of our sales engineers.

They specifically called out, “OBCC (CEP) as the best demo environment they have come across for our solutions. The site was responsive and the user experience was great. They can see how the solution is of value to both our service team and customers. The new customer dashboard looks really good too.”

Increased efficiency

Engineers saw a 44% decrease in the amount of time it takes to diagnose chillers due to the redesigned workflows in the CEP.

Get In Touch.

Thank you for getting in contact with me. I look forward to speaking with you.
Oops! Sorry but something went wrong with sending your message. You can also contact me at alex@alexgcreative.com