Metriplace & City OS
-
Product Designer
-
8 Weeks
1.0 Executive Summary & Vision
-
UX Design, Design System
"Smart City Operating System, Comprehensive UX/UI Design Scheme & Execution Strategy"
-
Figma, Gemini
-
Metriplace is not just a data dashboard; it is a bi-directional City Operating System (City OS).
Downstream: Connects physical infrastructure (IoT, Sensors, Mobility Grids).
Upstream: Connects human decision-makers (City Officials) and urban residents (Citizens).
-
To transform massive, complex urban Telemetry into visual Insights and executable Actions, ultimately fostering a city that is efficient, sustainable, and inclusive.
2.0 UX Strategy Framework
Based on the core goals identified in the research phase, we have defined specific execution strategies:
3.0 Key Personas & Pain Points
A. The City Commander (Operations Manager)
-
Responsible for daily dispatching of city traffic and safety resources.
-
Information Overload. Facing thousands of sensor alerts, unable to distinguish critical issues from noise.
-
Intelligent Triage.
System automatically filters low-priority noise.
Aggregates related alarms in the same area (e.g., Intersection Accident + Congestion + Camera Fault) into a single "Incident Case."
B. The Engaged Citizen (Resident)
-
An ordinary person commuting daily and using public services.
-
Black Box Feedback. Feels that "Smart City" is just surveillance and unrelated to their life; reporting issues leads to nowhere.
-
Transparency & Empowerment.
"Snap & Report" flow simplified to 3 steps.
Visual Progress Bar for issue resolution (Received -> Dispatched -> Fixed).
4.0 Interaction Architecture & Logic Flows
4.1 Core Workflow: Intelligent Traffic Congestion Resolution
This flowchart illustrates how the system assists the manager from issue detection to resolution.
4.2 Information Architecture (IA) - City Dashboard
-
Overview | Mobility | Energy | Safety | Environment | Ops | Reports
-
Core KPI Scorecards (Traffic Index, Energy Grid Load).
Real-time Alert Feed (Sorted by Priority/Severity).
-
Interactive GIS Map (Zoom, Pan, Tilt).
Layer Controller (Toggle Infrastructure/Data Layers).
Object Pop-over (Details on hover/click).
-
Contextual Data Panel (Drill-down metrics).
Quick Actions (Dispatch, Broadcast, Reset).
AI Co-pilot (Conversational Assistant).
5. UI Design System Specifications
6.0 Validation, Risks & Roadmap
6.1 Usability Testing Focus
-
Simulate "Multi-Crisis Scenarios" (e.g., Heavy Rain + Congestion + Power Outage) to observe if users can identify the critical path amidst a flood of alerts.
-
Test the Citizen App's "Report Issue" flow with elderly demographics to ensure accessibility compliance (WCAG 2.1).
6.2 Risk Mitigation Strategies
-
Implement a "Privacy Mask" feature in the UI. When operators view CCTV, faces and license plates are automatically blurred unless high-level decryption authorization is granted.
-
Introduce "Explainable AI (XAI)" tags. When the system suggests a signal change, it must display the rationale: "Reason: Northbound traffic backlog detected > 500m."
6.3 Product Roadmap
-
Data Visualization Dashboard + Basic Alerts + Citizen Reporting App.
-
Predictive Maintenance + AI Traffic Optimization.
-
Autonomous Loop (Self-repairing workflows for low-risk issues like streetlights).
7.0 Conclusion
The final section consolidates research, strategy, and design outcomes, providing a comprehensive view of how the City OS framework translates into coherent product experiences and demonstrable impact.