Chenxi —
/
Smart City AR: City Health Visualization
Background
The core AR software and, most importantly, the devices that will deliver augmented reality experiences have finally begun to mature. We can imagine local workforces that can efficiently and accurately maintain city assets — from streetlights, cell towers, and fire hydrants, to water wells, public stock, and roads — using smart goggles, hard hat-mounted devices, and other hands-free AR devices. We also can imagine optimizing the reach and impact of high-value experts, specialists, and supervisors who are enabled to provide real-time guidance and technical expertise to field workers with remote AR connections — audio, visual, data, and sensory. Today, all of this is becoming a reality.
My Role: Product Designer
-
Designed UI/UX for two pioneer projects: Smart City Health Visualization and Space Planning.
-
Collaborated with product managers and engineers in the CTAO team during the entire design process and delivered all core features.
-
Created Enchanted Control Rooms using 3D modeling to visualize existing city infrastructures (e.g., locations and functions).
"The increasing availability of broadband internet along with the rise of IoT (Internet of Things) have helped to accelerate the roll-out of smart and connected infrastructure across cities, regions and entire countries. With the ever increasing availability of broadband internet, and IoT coming of age, more smart devices are connected then ever before. Public buildings and facilities, Roadways, energy grids, water and sewage systems, communications networks, cars, and homes, etc. are becoming ‘smarter’ every day."
3D Model for Governance Control/Immersion Room
Overview of City Health Visualization (Top Left), Space Planning (Top Right), City Health Visualization Admin Map Overview (Button Left & Right)
Project 1: Smart City Health Visualization
Project 2: Space Planing
City Health Visualization Admin Map Overview
—
Goal
Specify the Challenge
Smart City AR concept aims to support the various needs of city planners, officers, field workers and engineers. We illustrated how Cisco Cloud-Based IoT (Internet of Things) platform could combine Smart City concept with Augmented Reality and various Cisco networking and infrastructure technologies. We showcased this concept at Customer Experience Centers as well as Cisco Live events in July 2017.
-
Based on Cisco Cloud-Based IoT (Internet of Things) platform, combine Smart City concept with Augmented Reality and various equipment
-
Support healthy, economical, socio-cultural city development through the efficient use of physical infrastructures, artificial intelligence and data analytics.
-
Improve collective intelligence and decision-making in local governments using open innovation processes and co-designing with citizens.
-
Create an immersive experience room to support Smart City AR system, which is highly configurable using video, audio, and sensors for new communication paradigms (Smart Glass + Projection + Basic Gestures Interface + Eye tracking integration + VR/AR Controllers).
Design Process
Context
To begin, we researched and planned to create data-driven decision-making tools based on Smart City concept, which allow city planners to:
-
Visualize real-time metrics and historical trends of city KPIs (Key Performance Indicators）
-
Understand the impact of smart city initiatives on measurable goals
-
Monitor city asset management and maintenance
-
Prototype and assess consequences of planned programs and policies prior to allocating funds and resources
Brainstorming, sketching and mapping
After synthesizing all considerations back and forth, we decided to create three main Smart City POCs combining with AR as pioneer projects for different usages. Then we added plans to our agenda:
1. City Health Visualization: Public Fire and Electric Facilities
2. City Health Visualization: Space Planing
3. 3D Modeling of Control/Immersion Room
4. Others
Meanwhile, we clarified the design process and made a timeline.
Timeline of 3 Pioneer POCs
1. City Health Visualization:
Public Fire and Electric Facilities Maintenance
Don't let this happen in our city
This scenario illustrates how Smart City AR can impact public fire and electric facility maintenance in New York City. Specifically, based on Cisco Technology, this service delivers real-time information to help city government and field workers maintain public fire and electric facilities, such as fire hydrants, extinguishers, automatic sprinkler systems, etc.
Kickoff
Exploring
Our personas are field workers (inspectors, engineers, etc.) and city planners (high-value experts, specialists, supervisors, etc.). The main functionality is primarily targeted toward those interested in site-surveillance by field workers. It enables distribution of information about public fire and electric facilities and communication among devices (handhelds and mobile devices, primarily smartphones, tablets, iPads, and monitors) in a point-to-point, point-to-multipoint, and multipoint-to-multipoint environment. Through real-time data transmission, city planners can efficiently implement analysis and decision-making remotely.
First, I began to explore the concept by creating a journey map to figure out the basic contextual flow, primary functionality, and devices.
User Journey-Map
The user journey map indicates outdoor tracking devices presumably shares more AR functionality. So I selected iPad as POC device first, and begun to determine core features that appeal to our user base by the flow.
AR Tracking System Flow
Clarity
Structure and Hierarchy
Before wireframing, I often consider/deliberate structure, hierarchy, and basic visual language with hand-drawn sketches to synthesize all features from the user flow above.
Sketches and wireframes for critical pages
Polishing
Challenges and Solutions
Based on research findings, wireframes, and the explorations, I came up with particular design principles, color themes and consistency to convert wireframes to high-fidelity mockups. During this process, I cemented three challenges:
-
Challenge 1 - One of the most challenging features for the inspectors and engineers is how to classify maintenance priority into several levels by visual language, so I introduced the level warning system, three color-coded and specific icons to represent facility conditions, which also illuminates the filter design.
Solution:
-
Challenge 2 - In order to avoid information overload and illegibility on the overlay card, I spent a lot of time iterating three versions of the overlay card, to figure out how to reasonably arrange and simplify the occupancy graph with facility icons, time, etc. with limited space.
Solution:
-
Challenge 3 - For the tracking page, information overlay cards float in front of buildings at any moment. If misdesigned, insufficient contrast between the information overlays and backside buildings could cause visual chaos, which severely distracts the user. In this case, I decided to add a transparent layer behind information overlay cards. Technically, I adjusted the layer opacity to avoid blending overlays with the compound scene and dim back-view. After I ran some tests through my colleagues, feedback indicates the most promising opacity is 40%. Tips: Layer opacity could automatically adjust the surrounding lightness to avoid illegibility at night. It also could be manually set up with an editing menu, same as iOS.
Solution:
Software
Wireframe: Balsamiq, Keynote
Mockup: Illustrator, Photoshop, Sketch
Interaction/Motion Graphic: Principle, Flinto, Keynote
Critical Mockup - AR Outdoor Tracking/Survey
Meanwhile, I made an admin system for the map overview to allow city planners to remotely provide real-time guidance and technical expertise to field workers in the control room.
Critical Mockup - Admin System Map Overview
What I Learned
Consistency Lesson
After the wireframe phase, I began to consider consistency. I learned a lot from the whole implementation process, because there are four types of consistency I needed to come up with and polish:
-
Visual consistency: Fonts, sizes, buttons, labeling, and similar elements need to be consistent across the product to keep visual consistency, which increases the product’s learnability.
-
Functional consistency: Similar controls that are functioning the same way make up functional consistency, which increases the predictability of the product. Predictability leads to users feeling safe and secure.
-
Internal consistency: This improves the usability and learnability of the product. Even when you introduce new features/pages, users will have an easy time using them as long as you maintain internal consistency.
-
External consistency: Because this project is the pioneer of the whole Smart City AR concept, this type of consistency would be achieved when there is design consistency across multiple smart city products/systems. This way, the user’s knowledge about one product can be reused in another. Meanwhile, it helps eliminate a lot of the friction and provides a great user experience.
All consistency aspects went through my process, until the second pioneer project:
Further reading: Design principle: Consistency by Anton Nikolov
2. City Health Visualization: Space Planning
Don't let this happen at our office
Space Planning is the process of organizing internal layout and office functions to work effectively together while using space efficiently. Our goal is to combine Cisco IoT and heat map technology with AR to record the distribution of devices (e.g., smart phones, computers, monitors, etc.) to evaluate the occupancy at the workspace. Furthermore, according to data analysis, we consider the workgroup function, building codes, regulations, teaming requirements, inter-communication, and storage to make the best use of available space, work, communication, and supervision.
My design process involved Post-It brainstorming, sketching, journey mapping, user flow mapping, wireframing, and prototyping. Through multiple iterations, I determined the core features that appeal to our user base.
I enjoyed the benefits of all four consistency aspects I considered for City Health Visualization: as our second project, the process directly used a couple of the consistency ideas above, which was much too efficient and smooth to keep the sustainable design.
Software
Wireframe: Balsamiq, Keynote
Mockup: Illustrator, Photoshop, Sketch
Interaction/Motion Graphic: Principle, Flinto, Keynote
Wireframes
Critical Page Mockup-Space Heat-Map
3. 3D Modeling of Control/Immersion Room
Except for the Smart City admin system for urban governance, another perspective is to create a comprehensive immersion room with the latest tech equipment, such as a control office, to provide real-time guidance and expertise given by experts, specialists and supervisors. Immersive space is also potentially a practical, reusable concept that can be converted for multiple other purposes. As another pioneer sub-project, our plan includes:
-
Creating a highly configurable room system to provide, explore and experiment with communication paradigms or Smart City AR.
-
Creating a next-generation Immersive Experience Room with the latest tech for video display, audio, and sensors, as well as exploring systems integration with voice and gesture.
-
Creating concepts for room elements and identifying vendors and products of interest.
-
Contacting resources for AV integration and video wall.
I researched some existing digital space projects and modeled various strategies and concepts to present to the team on how Smart City users could communicate and simplify the integration challenges. Furthermore, according to modeling, I integrated a Smart City AR that I previously have done with models, so that our team can predictably recognize how to arrange and configure all equipment reasonably to save more expenses.
Software
3D Modeling: SketchUp
Visual Effects: Photoshop, After Effects
3D Modeling Effect
Results and Impact
These 3 POCs were successfully showcased at the Cisco Customer Experience Center at the beginning of 2017, and have been well received with the majority of good feedback coming from the top executives, such as the CEO and CTO.
Moreover, the full pioneer exploration illuminates other Smart City AR concepts to go through. Currently our CTAO team is continuing to dig and extend three more relevant concepts of City Health Visualization, and four more business usages of the immersion room.
Brief Overview - Other City Health Visualization and 3D Model Mockups I Made
