myJCI — Digital Customer Gateway
Design for a unified customer platform at Johnson Controls

myJCI — Digital Customer Gateway
Design for a unified customer platform at Johnson Controls

At Johnson Controls, I contributed as Lead UI Designer to the development of myJCI, a digital customer gateway that consolidated services, dashboards, and navigation into a single platform.

I worked in close collaboration with a UX Designer partner who led most of the wireframing. I supported him during early exploration, and later focused on translating flows into hi-fi UI screens. As the project grew, I also provided guidance to another designer who joined the team, reviewing their flows and ensuring consistent use of the design system.

At Spin Premia, I collaborated with the product team to turn OXXO GAS raffles into a gamified rewards experience. The team identified low transparency and undelivered prizes as major pain points, and together we ideated Golden Boxes as an instant rewards mechanic.

My role was to develop the flows, prototypes, and animations, applying gamification principles and user-centered design. In just four months, the initiative grew from 113 to over 51K users, significantly increasing participation and user trust.

Context

Johnson Controls provides smart building solutions worldwide, including HVAC, fire safety, and energy systems. Customers needed a centralized digital platform to monitor services, request support, and manage resources.


myJCI was envisioned as that gateway, combining dashboards, service requests, and site navigation into one integrated experience.

Industry

B2B

Role

UI Lead

Project type

Web App Design
(Mobile and desktop)
Mobile App Feature Design

Timeline

2023

The challenge

Discovery showed that customers faced a fragmented experience:
  • Multiple disconnected portals for different services.
  • No central dashboard to visualize KPIs at a glance.
  • Requesting services required long manual processes.
  • Navigation lacked structure, making it hard to locate site-specific information.
Discovery showed that customers faced a fragmented experience:
  • Multiple disconnected portals for different services.
  • No central dashboard to visualize KPIs at a glance.
  • Requesting services required long manual processes.
  • Navigation lacked structure, making it hard to locate site-specific information.
Discovery showed that customers faced a fragmented experience:
  • Multiple disconnected portals for different services.
  • No central dashboard to visualize KPIs at a glance.
  • Requesting services required long manual processes.
  • Navigation lacked structure, making it hard to locate site-specific information.

Objectives

  • Create a unified digital platform for customer services.
  • Provide a dashboard overview with actionable KPIs.
  • Simplify service request flows through Service onDemand.
  • Design an intuitive site navigation system for large organizations.

Take a breath

Process

Process

1

Discovery

Collaborated with the UX Designer partner to analyze customer pain points, business requirements, and technical constraints.

Discovery

We analyzed user behavior and existing campaigns, complemented with a benchmark of gamification mechanics (loot boxes, surprise reveals). Insights showed that users expected instant gratification.

Discovery

We analyzed user behavior and existing campaigns, complemented with a benchmark of gamification mechanics (loot boxes, surprise reveals). Insights showed that users expected instant gratification.

2

Exploration & Design

  • Supported the UX Designer in building wireframes for key flows.

  • Designed hi-fi UI screens, defining component structure and visual hierarchy.

  • Led the migration of the design system from Adobe XD to Figma, collaborating with the Design System team to establish scalable components and improve cross-team alignment.

Exploration & Design
Based on these insights, I explored multiple reward formats — from envelopes to boxes — and validated that boxes created a stronger perception of value and excitement. I designed user flows that emphasized immediacy (fuel → box → reward), and prototypes that balanced clarity with delight. Animations were added to reinforce the anticipation of opening a box and uncovering the prize.

Exploration & Design
Based on these insights, I explored multiple reward formats — from envelopes to boxes — and validated that boxes created a stronger perception of value and excitement. I designed user flows that emphasized immediacy (fuel → box → reward), and prototypes that balanced clarity with delight. Animations were added to reinforce the anticipation of opening a box and uncovering the prize.

3

Iteration & Collaboration

  • Provided UI guidance to an additional designer, reviewing flows and ensuring proper use of the design system.

  • Conducted internal usability reviews with stakeholders to validate flows.

  • Delivered detailed design specs to developers, ensuring smoother handoff.

Solution

The myJCI platform included three major modules:

  • Homepage Dashboard: a consolidated view of KPIs, service status, and recent activity.
  • Service onDemand: simplified flow for requesting services, reducing friction with clear step-by-step UI.
  • Site Navigator: structured navigation system enabling users to explore large-scale facilities and access site-specific data.

Homepage dashboard - Desktop version

A unified dashboard that consolidates service KPIs, giving customers a snapshot of system performance (HVAC, Fire, Security) and recent activity. Users can also view the status of multiple sites and track the performance of critical assets like chillers, all from a single entry point.

Service onDemand - Desktop version

Service OnDemand section: Centralized view of all active jobs across sites, distinguishing between Maintenance (scheduled or preventive tasks) and New Requests (on-demand service tickets). This separation helps track recurring work while managing ad-hoc needs efficiently.

Request service: A guided flow where users select site and system, describe the issue, set priority, and submit — ensuring clear, consistent requests with real-time tracking.

Site Navigator- Desktop version

Site navigator: An interactive view that allows site owners to explore their different facilities, access site-specific data, and monitor system performance. From here, they can quickly drill down into details such as HVAC, Fire, or Security systems, making it easier to locate issues and manage services across large organizations.

Impact

Although I left before launch, the design work delivered had measurable value during the development process:

Although I left before launch, the design work delivered had measurable value during the development process:

Design delivery

80+hi-fi UI

screens across 3 major user flows (homepage, Service onDemand, Site Navigator).

Learnings

  • Working in a UX–UI duo allowed us to separate responsibilities while keeping the process efficient.

  • Leading UI design required not only designing, but also mentoring and reviewing others’ work

  • UI consistency and strict use of a design system were critical for scaling an enterprise-level platform.

What’s next

  • Conduct user testing post-launch to validate usability and adoption.

  • Expand the platform with new service modules based on customer demand.

  • Integrate personalization features to tailor dashboards and service recommendations.

Next project

FEATURE DESIGN

FEATURE DESIGN

Improving Product Discovery in OXXO a Domicilio: Redesigning search to make shopping faster, easier, and engaging.

Search was the main driver of conversion, but the experience was fragmented. I worked on redesigning it with visibility, personalization, and smarter guidance — improving conversion, reducing time-to-product, and turning dead ends into opportunities.

View case study

View case study

©2025 CATALINA ARANGO. All rights reserved. Mom,Dad I finally built my portfolio! :)

©2025 CATALINA ARANGO.
All rights reserved.
Mom,Dad I finally built my portfolio! :)