Beyond Smart Cities

Beyond Smart Cities is a STEM learning platform that provides interactive activities to teach programming, advanced technology A–G concepts, and the Sustainable Development Goals (SDGs). It helps students develop problem-solving skills and instils a positive attitude for tackling future challenges through real projects.

Popular courses: AI art, self-driving car, trend prediction and so on.
With real projects to teach students to use technology wisely to improve human lives.


Based on learning objectives, we built an online learning platform and data collection app for junior secondary students. I created user flows and interactions, co-built the project with the design team, and kept them informed of goals and progress. Ensuring deliverables were consistent and guaranteeing a positive user experience.

Variety of Learning Activities

The design team was responsible for creating visuals for print and digital media, as well as all learning pieces on the platform, such as slides, courseware, web interface, research app, animation, game-based simulation, Python programming, quizzes to evaluate learning outcomes, extended readings, and advanced programming challenges.

It was challenging to evenly distribute the workload of each team member and stay on track with so many learning activities.

CityScape: Epidemic Outbreak

I was not only unfamiliar with the platform’s content but also wary of the simulator, CityScape: Epidemic Outbreak, as it differed from other simulation games, I had played.

📒 What is CityScape: Epidemic Outbreak?
Students will use a mobile app to collect data on mask-wearing. This will create a dataset that will be used to simulate virus spread and cure rates, taking into account public/personal prevention measures, land use and population density.

Designer Mode

I had been wondering how to visualize it. I looked to the actual simulator and some interior design software, plus my imagination, to create the experience. Our simulator had extra settings and interactions, making things more complex.

In the simulator, there are two tabs: design and simulation. In design mode, students drag and drop buildings onto grids to form a city. Using the flyer menu, they can also increase the density of residential, industrial, and commercial buildings.

Designing this type of interface requires a comprehensive understanding of the map interface and game experience. Consider interaction, states, visual cues, gestures, and other elements to create a cohesive experience. Since the topic of this course is urban development, the interface requires special attention to map navigation. I suggested adding map zooming and moving functions to complete the design mode.

Simulation Mode

There are two viewing modes in simulation, 2D and 3D, but why are there two modes?

2D mode offers a simpler visualization, enabling students to quickly identify land uses and view and modify the map.
The 3D mode is more realistic and more immersive.

We discovered that the buildings were too detailed, resulting in performance issues and a lack of a futuristic feel. To address this, we simplified and refined their appearance, and modified the lighting and effects.

Guided Tour

We reviewed the entire learning process after creating the necessary functions. As the simulator was unfamiliar to many people, providing a product tour or onboarding was important.

I had two ideas for onboarding UI: coach mark and pop-up. However, users may be overwhelmed with a series of coach markers, which could raise their cognitive burden and give the impression that the tool is difficult to use, as the instructions are extensive and hard to remember all at once.

Instead, use pop-ups to display necessary or unexpected interactions and information with concise copy. This allows users to quickly understand their goal and how to achieve it.

My RoleManager, Design & UX
PlatformWebsite, App
ResponsibilitiesPRD specification
UX copywriting guide

Content analysis and research
Responsive website design and prototyping
Editorial writing and copywriting
SEO writing
Analytic tracking
Translation (Traditional Chinese, Simplified Chinese and English)