How we transformed a complex JSON-heavy gateway configuration tool into a standardized, keyboard-friendly workspace with guided commissioning wizards and bulk modifications.
NDA & Simulation Notice
This project was executed under a strict Non-Disclosure Agreement (NDA). The interactive panels and dashboard mockups shown below represent sanitized, functional wireframes designed to simulate the core system logic and information architecture without disclosing proprietary client data. High-fidelity UI designs and case files are available upon request.
Gateway configuration is a highly technical task within Siemens Building Technologies. In the **TOC (Technical Operational Center)**, analysts must register building controllers, configure temp thresholds, establish schedules, and push these records to hardware gateways.
The legacy config software was a complex, form-heavy interface. It functioned like a raw JSON code editor. Because it lacked error validation checks, analysts frequently committed typographical errors that crashed field devices.
Furthermore, there was no **bulk editing** capability—adjusting a customer's global temperature limits meant opening and manually rewriting hundreds of individual sites one by one. The workflow was slow, error-prone, and required extensive employee training.
Re-designing the Config Workflow
Legacy Config Friction
Raw JSON Interface: Gateway configurations felt like writing raw parameters with zero contextual help.
Fleeting Error Messaging: System errors popped up in flash banners and vanished before users could read or triage them.
Inconsistent Navigation & Popups: Navigating sites was confusing, with countless modal dialogs blocking keyboard flows.
Zero Bulk Modification: Global customer properties had to be adjusted site by site, introducing manual error.
Simultaneous Write Collisions: No mechanism to prevent two analysts from editing and pushing to the same controller concurrently.
Standardized Configuration UX
Guided Setup Wizards: Wizard components with progress bars that steer analysts step-by-step through template loads.
Persistent Validation Checks: Continuous validation feedback on set points and scheduling properties before gateway pushes.
Keyboard-First Navigation: Standardized form focus utilizing Tab controls and shortcut key bounds with minimal popups.
Bulk Modification Control: Multi-select site grids permitting simultaneous offsets and bulk gateway updates.
Concurrent Edit Lockout: Real-time visual write blocks indicating when other TOC analysts are editing a site.
Interactive UX Lab
Standardized Config Workspace
We standardized the UI to match Siemens' core Enterprise Portal templates using a professional light theme. Navigate the workspace tabs to test commissioning wizards and bulk modifications.
Siemens Config Tool
TOC Provisioning Console • v4.2
Active Commissioning Registry
Showing 4 Connected Building Gateways
Building Site
Active Template
Set Point
Status
Concurrent Lock
Seattle Tech Hub
Office HVAC Standard
72°F
Configured
Available
Denver Operations Center
None
70°F
Unconfigured
Available
Boston Lab Annex
None
68°F
Unconfigured
Available
Dallas Storage Facility
Warehouse High-Flow
76°F
Configured
Locked: Marcus Vance
TOC Operations Check: Lockouts prevent simultaneous edits. If another analyst is working on a site, the gateway lock automatically renders the configuration input read-only.
Stakeholders & Lifecycle Workflows
The Config Tool interfaces with three primary user brackets within the Technical Operational Center ecosystem.
TOC Operators
The primary daily users of the platform. They triage client support calls, load templates, run local modifications, and push changes to gatekeepers.
Primary Operations
Engineering Support
The internal Tier 3 technical team. They define master templates, debug complex scaling properties, and handle core software gateway connections.
Tier 3 Expert Setup
Client Service Managers
Weekly stakeholders managing local client agreements. They use the tool to make minor support configurations and review system anomalies.
Weekly Maintenance
Standardizing Building Automation
Because the Config Tool is an internal workspace used alongside the **Enterprise Portal** and **Operations Tool**, UI standardization was critical. We established consistent styles for input fields, dropdown triggers, and warnings matching the Siemens Core theme.
By integrating validation guards directly into the step-by-step wizard forms, we prevented out-of-spec configurations before they reached gateway transmitters. Transitioning obscure, disappearing banners into persistent warning boxes with auto-correction paths significantly cut down support calls and technician error rates.
Let’s Talk About Your Configuration Platform
If you are looking to design guided setup wizards, configuration workspaces, or bulk update frameworks for complex enterprise systems, let's talk.