'%20stroke-width='1.5'/%3e%3cpath%20d='M34.9999%2019.0001L39.9998%2024L34.9999%2028.9999'%20stroke='hsl(82.25%2095.7%25%2081.76%25)'%20stroke-width='1.5'/%3e%3c/svg%3e)
Architecture Redevelopment for Leak Detection & Mitigation System
We designed operational UX and UI, implemented UI and backend architecture redevelopment for a real-time water leak system — Halo.
Client & Context
Halo is a leak-detection and mitigation system for residents, technicians, and building management.
Previously, Halo ran two separate platforms (technicians vs. clients), which caused confusing navigation and slowed improvements. We moved to a single platform with multiple roles.
Different screens of new, single platform
Goals
- 1Unify technician and client experiences under a role-based platform.
- 2Accelerate incident handling.
- 3Elevate situational awareness with clean analytics, statuses, and listings.
- 4Streamline device management and search.
Challenges
- Role complexity: different permissions and views.
- Noise vs. signal: high alert volumes risked fatigue and missed incidents.
- Legacy models: users were accustomed to two systems.
- Safety-critical context: UI errors during valve operations are costly.
From Audit to Unified Platform
Product & UX audit
We audited the two legacy platforms, mapped user roles and top incident paths, and identified duplications and dead ends.
Information Architecture & Roles
We defined a single navigation and role-scoped visibility so users only see what they can act on.
Operations Dashboard
We surfaced real-time incidents, device health, and building topology with color-coded statuses and clear next actions.
Dashboard screen
Device Management UX
We consolidated the inventory, added a quick-add flow for new devices, and built powerful filters for fast lookup.
Incident Workflows
We designed stepwise flows to confirm → locate → isolate (valves) → resolve, with explicit confirmations for risky actions.
Condition resolved screen
Alerts & Notifications
We introduced priority tiers, channel preferences (email/SMS/in-app), and escalation paths for unacknowledged alerts.
Report screen
Design System
Mobile version
We created status badges, icons, and layout tokens for consistency, plus accessibility and high-contrast states for field use.
The experience is mobile-first and responsive across devices
Prototyping & Validation
We delivered clickable prototypes and ran scenario tests with technicians and managers, iterating until core flows hit target success.
Handoff
We specified interactions, states, and error handling, and shipped a component library for rapid build.
Onboarding
We trained 8 HALO specialists over 4 days and provided an admin handbook, SOPs, and quick-start videos.
Sites screen
Risks & How We Mitigated Them
Missing the deadline
Mitigation. We fixed a short, weekly milestone rhythm and only moved forward after each milestone was approved.
Decision bottleneck. Design/dev blocks while waiting for feedback
Mitigation. We booked fixed review windows and applied a “silent approval after 48 hours” rule for non-critical items.
Team member unavailability. A key designer or developer becomes unavailable
Mitigation. We kept specs and demo recordings up to date and assigned a backup owner for each critical area.
Compliance & Security
Results
HALO went from two separate apps to a single, role-based platform. Users now get a clearer, faster interface that reduces effort and improves operational efficiency.
