The CityGPT Electric Bus Wizard
Mastering Urban Mobility: Powering Cities with Data-driven Solutions.

| Background |

The Bus Data Dashboard integrates multiple data sources into a unified system, employing AI to create a smart city traffic dashboard. In collaboration with regional transit operators, it enables real-time scheduling and comprehensive management for more effective transport solutions. CityGPT, an AI-powered data analysis tool, produces visualized data supporting city operations and electric bus data interpretation, enhancing regulatory efficiency and service quality. This application optimizes urban services, advancing smart cities towards zero emissions, and prioritizing environmental sustainability.

My Role and Responsibilities

In this project, I handle the visual design of the dashboard, create the component library, and design related interactive behaviors to ensure the best user experience in various usage scenarios.

The CityGPT Electric Bus Wizard Wins 2024 GDA Human-Centred AI Award 🎉

GDA Aeard Page

| MVP |

| Design Concept |

By utilizing various data charts, we transform complex urban data into intuitive visual elements, enabling users to comprehend data effortlessly and uncover patterns. The integration of map functionality with 3D objects creates an overhead perspective, while a dark interface enhances readability and focus. Our bus data dashboard consolidates city data into one platform, making information visualization swift, intuitive, and effective for users to understand urban occurrences and aid decision-making.

| Design Output |

We referred to smart city dashboards from other countries, drawing inspiration and insights to design a more efficient and intuitive interface and system. Below is our sitemap, along with explanations for each page.

We also analyze and discuss smart city dashboards from other countries.

1 / Home Page

Upon logging in, users will see a 3D overhead view. Data charts and real-time traffic updates for the area are displayed on the left and right sides. Users can interact with buses or icons on the map. Icons indicate traffic accidents, construction zones, transport stations, and charging piles. Data charts display information such as electricity usage, traffic congestion, and population demographics in the area.

2 / Login Page and Detail Info Page

The image on the left shows the login page, where entering your username and password grants access to the system's homepage. The image on the right illustrates what happens when you click on a bus icon on the homepage: the view zooms in on the selected bus, and an information drawer pops up. This drawer displays detailed information about the bus's operation, such as total mileage, fuel and electricity consumption, and the driver's schedule.

3 / Station Locations and Bus Scheduling Info

After selecting a station location from the menu, the operational details of that station will be displayed. This includes total fuel consumption rate, total mileage, driver status, and real-time station monitoring. Additionally, it shows vehicle maintenance status and the number of available charging piles at the station. The chart on the right provides a comprehensive overview of the station’s driver duty status, indicating whether each bus under a driver’s responsibility is departing and arriving on time and the condition of each bus. All this information is presented in data charts for easy monitoring and analysis.

4 / CityGPT

This system also features a generative dialogue capability, providing instant responses to user queries. Users can ask questions about bus operations, station information, or any other relevant topic, and the system will automatically generate appropriate responses based on the query content. Additionally, the system can provide relevant data charts for users to refer to. These charts further elaborate on and supplement the information provided through generative dialogue, aiding users in better understanding and analyzing the information.

Light Mode and Dark Mode

We also provide both dark and light mode options for users to choose from, catering to different users' personalized preferences and visual needs. Users can adjust the system's display mode according to their own preferences and comfort levels.

Additionally, we have developed a mobile version of the application, allowing users to access real-time data inquiries and operations anytime, anywhere using their smartphones. This facilitates easy access to system functions and enables users to stay updated on bus operation statuses and station information at all times.

We've developed a component library for the system to ensure design consistency across the board.

| Feedback & Takeaway |

Beyond Smart Governance: Our Protection?

During the process of working on this project, I gained a wealth of valuable experiences! The product's goal is to achieve urban visual governance and promote sustainable development for smart cities. This goal carries profound significance for me, as it shapes actionable directions and blueprints for the future of cities.

Throughout the development process, we conducted extensive research to understand the experiences and visions of other countries operating smart cities. These insights provided valuable guidance for our product design. However, they also raised important questions about privacy. As we enjoy more convenient and intelligent services, can we also ensure that we are adequately protected? This is a question that I have continuously pondered.

Summarizing this experience, I deeply feel that our efforts have not been in vain. We have not only created a product with practical value but also enhanced our professional skills and broadened our perspectives in the process. This experience fills me with confidence and anticipation for the future of smart cities.