Project Outcomes at a Glance

100% Java Elimination

Completely removed all browser compatibility risks and security vulnerabilities associated with the legacy Java applet dependency.

40% Efficiency Gain

Estimated reduction in building control and remote diagnostic time due to the clean, data-first dashboard designed for NOC environments.

Unified Platform

 Design system and technical documentation, providing a single source of truth for all future HVAC and third-party integrations.

My Project Roles
Core Responsibilities
  • Senior UX Designer & Prototyping Lead
  • UX Researcher (Three-Month Field Study)
  • UI Developer (HTML5 Component Build)
  • Platform Architect & Technical Strategy
Tools & Methods
  • Research: Training Facility Interviews, User Flows
  • Design: Adobe XD, Miro
  • Handoff: Zeplin, Design System Documentation
  • Tech Stack: HTML5, Modern JavaScript, CSS
The Challenge: From Research to HTML5 Implementation

My action started with an intensive three-month research phase at our training facility, engaging directly with our primary users: field installers, electricians, system integrators, plumbers, and building designers.

  • Discovery & Strategy: Mapped existing flows and identified critical friction points caused by the rigid Java interface. Defined a front-end architecture to be fully HTML5-compliant and device-agnostic.
  • Design & Governance: Used Miro for ideation workshops, followed by high-fidelity prototypes in Adobe XD. Crucially, I built a comprehensive design system documented via Zeplin to ensure visual integrity and streamline the design-to-dev handoff.

The Transformation: Legacy vs. Modern UX

Diamond Controls (Legacy)
Screenshot of the old Diamond Controls Java-based interface showing a 3D Floor plan
Building Connect Plus (New)
Clean, monochromatic, data-driven interface designed for rapid consumption in a NOC environment. The design strategy utilized a monochromatic aesthetic to prioritize alerts: color is reserved exclusively for critical warnings and mode status (e.g., Cool/Heat), elevating its communicative impact.

Key Design Solutions

1. A Modern, Card-Based System Overview

The main dashboard was redesigned using a card-based layout where each card represents an individual HVAC unit. This allows operators to quickly scan the status of dozens of units across multiple sites, with key information (temperature, setpoint, mode) visible at a glance.

Screenshot of the new BCP System Overview showing a grid of individual unit control cards.

2. Seamless Third-Party Control Integration

A core platform requirement was managing non-Mitsubishi equipment. I designed a parallel interface that leverages the same card-based design system to control third-party devices (pumps, fans, etc.). This achieved a consistent, unified user experience, finally providing a true single pane of glass for all building management tasks.

Screenshot of BCP 3rd Party Equipment control page using the same card layout.

3. Advanced Diagnostic Tools for Remote Technicians

A dedicated “Maintenance Tool” was built specifically for remote service technicians. This view provides dense, deep diagnostic data and operational values, moving beyond simple controls to enable efficient, off-site troubleshooting and system analysis.

Screenshot of BCP Maintenance Tool dashboard with gauges and detailed data lists.

Impact and Key Takeaway (R & L)

  • Technical Debt Elimination: Successfully replaced the obsolete Java application with a modern, performant HTML5 solution, ensuring browser compatibility and device accessibility.
  • Improved Usability: The new, data-driven dashboard dramatically improved operational efficiency for users in NOC environments.
  • Future-Proofing: The strategic architecture and design system established a foundation that is scalable and easily extensible for integrating future innovative, third-party building equipment.
  • Market Positioning: Solidified Mitsubishi Electric’s standing as a leader in innovative, smart building control platforms.

Key Strategic Learning (L)

Powered by