Interactive 3D City Operations Dashboard
Key Methods
UX - Info Arch, Affinity Map, Wireframes, Usability Test
Dev - SW Arch, Data Vis, 3D Visuals, Data Backend
My Role
Project Lead, UX Design, Unity Dev
Team Members
1 Overall Project Manager, 1 UX Researcher,
1 UX Designer, 1 UI Designer, Data Team
Tools
Unity, C#, ConceptBoard, Animate, Photoshop, XD
Duration
3 months, 2021, remote
Client
Regional City Government
Overview
Scope
Part of a larger Smart City Project where Siemens embed IOT infrastructure across the city, which is visualised in the 3D Data Dashboard Video Wall of the Smart City Operation Center. Here, data analysts will monitor it to make city operation decisions.
Goal
The goal of the dashboard is to enable data analysts to make informed city operation decisions through synthesised data visualisation.
Plan
1. Technical Demo
An Interactive demo was created in a week by myself and 1 UI designer to demonstrate technical & product capabilities.
2. End-to-End MVP
An interactive dashboard MVP was built in 3 months with live IOT data integration for 3 use-cases.
Technical Demo
With 1 week and just 2 of us, it was necessary to prioritise features that demonstrated both user goals and technical capabilities that is within effort feasibility.
Scoping by user goals and technical features
Technical requirements were identified, followed by conceptualising features with user goals and technical breadth in mind, then prioritising them by effort and value.
User goals include: maintenance, city planning, and live monitoring.
Technical features include: animated VFX, 3D visuals, and data graphs.
Water Management Dashboard
The demo features water management, a use-case highlighted by the client. Users can navigate across multiple hierarchy levels in the 3D city, each with its own 3D data visuals on the map that ties in with user goals at each level. 2D data widgets sit on both ends of the screen, featuring a range of widget styles & data that address various user goals.
MVP: User Research & Requirements
Led by our UX researcher specialising in dashboard requirements, we conducted secondary research, client interviews and whiteboard workshops to derive long-list of user requirements.
MVP: Info Arch, Wireframing & VFX
Information Architecture
Requirements were affinity mapped to derive the information architecture. The IA is designed to be consistent across use-cases, for scaling towards more use-cases.
Platform Wireframe
The underlying platform wireframe is redesigned for consistency, affordance and scalability. Particularly, the navigation widget is redesigned from a footer bar to a breadcrumbs bar for improved affordance and visibility, and KPI widgets are fixed to 6 to balance between information density and content space.
3D Map Visuals
The client’s desired visual style, a sci-fi blue colour scheme, is created through post-processing camera effects in Unity, and UI design. A combination of lighting and depth effects are used to create building glow intensities varying by height from ground.
Motion & Animation
Visual animations when switching between hierarchy levels and use-cases are designed to be continuous and consistent, to not confuse the user. This includes camera transition, 2D widgets, 2D map popups, and 3D map effects. Visceral animations such as UI, map popup glows, and camera idle movements, are implemented to keep the visualisation engaging.
MVP: Software Development
Software Architecture
A state machine design is implemented with each state representing a Use-Case & Hierarchy Level. Underlying key state components like UI, Map, Camera, switch states through the main state controller. This ensures each component are modular and scalable without interfering with each other.
Dynamic, Reusable Data Widgets
Data widgets are implemented with reusability in mind. They can take in different types of data to account for different scenarios, and handle live data refresh. UI implementation is responsive to fit widgets into different sizes.
Data Backend
Working with the IOT team, a JSON request is called every 10 seconds to update the local data store. Each use case has its own data store class, containing instances of data classes of each type of data visualisation like bar, line, discrete, and more.
Details are limited due to public confidentiality. For more details, please reach me at mail@alanng.me