M-Fire Mobile Fire-Safety Platform

Background & Challenge

This was an optimization project for a government fire-safety inspection management system, and I owned the UI/UX design from start to finish. The original screens looked frozen in the 2000s: dense tables crammed into the viewport, a gear-style system entry menu, a heavy visual hierarchy, no responsive design, and no dark mode — a real burden for people on long shifts, some of whom needed to use the system in the field.

But the hardest part of the legacy system was not the visuals; it was the habits users had already formed. So I set myself one principle: preserve the familiar mental model, and only translate the presentation into a modern language. The gear-style system entry, for example, was kept as a motif but injected with 3D icons and a notification ticker — turning it from “dated” into “characterful.”

The old system menu: a ring of colorful gear icons serving as system entries — System entry: keeping the familiar gear motif, reimagined with 3D icons and a notification ticker

The redesigned system entry: the gear-ring menu is preserved, each system now uses a 3D icon, with a notification ticker on top and support-line and FAQ cards integrated below — System entry: keeping the familiar gear motif, reimagined with 3D icons and a notification ticker

Design Decisions

The old portal page: a blue announcement list, a single government SSO login button, and sticky-note style information blocks, each styled its own way — Login portal: unifying the disconnected announcements, info blocks, and login button into one consistent card language

The new portal page: announcements, the repair hotline, FAQs, the public lookup, and the login entry unified into a single card language sharing the same spacing and hierarchy — Login portal: unifying the disconnected announcements, info blocks, and login button into one consistent card language

The old to-do statistics page: a full-width wall of plain-text rows with every item listed side by side, making urgency hard to read — To-do list: from a full-width wall of plain text to tag-filtered cards paired with a drillable pie chart.

The new inspection dashboard: a pie chart of registered premises on the left, tag-filtered to-do statistics cards and a two-level drillable chart on the right — To-do list: from a full-width wall of plain text to tag-filtered cards paired with a drillable pie chart.

The old fire-safety inspection record: a direct copy of the paper format, with dense fields packed across the entire sheet — Inspection checklist: from a photocopied-paper field dump to a layered digital form segmented by stage with grouped whitespace.

The new fire-safety inspection record: a digital form segmented by workflow stage with grouped, whitespaced fields, tabs, and a progress bar — Inspection checklist: from a photocopied-paper field dump to a layered digital form segmented by stage with grouped whitespace.

The M-Fire back-office three-level sidebar in its expanded state, showing the full navigation hierarchy — The collapsible three-level sidebar: the full hierarchy when expanded, icons with short hints when collapsed, and tooltips for longer items.

Outcome & Reflections

After the overhaul, the system went from a desktop-only legacy platform to a modern back office that stays clear and usable on any device. Alongside it I delivered a design guideline document and markup specifications, defining shared patterns for empty-state illustrations, descriptive result dialogs, and toasts, so later development and expansion had a consistent reference.

The lesson that stayed with me most: modernizing a legacy system is not about overthrowing it, but about translating it. The gears, the tables, and the paper workflows users knew are all still there — just translated into a clearer, less taxing interface language. Holding that balance within the constraints of a government project was the most valuable practice this case gave me.