Beyond Smart Cities is an interactive STEM learning platform that teaches programming, advanced technology concepts (A-G), and Sustainable Development Goals (SDGs) to junior secondary students. The platform aims to help students develop problem-solving skills and foster a positive attitude towards tackling future challenges through real projects.

Popular courses include AI art, self-driving cars, and trend prediction. These courses utilize real projects to teach students how to use technology effectively to improve human lives.

Role and Responsibilities

As the Design Lead, my responsibilities included collaborating on building an online learning platform and data collection app for junior secondary students. I created user flows and interactions, informed the team of goals and progress, and ensured deliverables were consistent to guarantee a positive user experience.

Creating Learning Activities

The design team created visuals for print and digital media, as well as all learning pieces on the platform. These included slides, courseware, web interfaces, research apps, animations, game-based simulations, Python programming, quizzes, extended readings, and advanced programming challenges. Distributing the workload evenly across team members and staying on track with numerous learning activities posed a challenge.

Designing CityScape: Epidemic Outbreak Simulator

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

📒 About CityScape: Epidemic Outbreak
Students use a mobile app to collect data on mask-wearing, generating a dataset for simulating virus spread and cure rates. This considers public/personal prevention measures, land use, and population density.

Designer Mode

Design and Simulation Tabs

To visualize the simulator, I drew inspiration from existing simulators, interior design software, and my imagination. The simulator featured two tabs: design and simulation. In design mode, students drag and drop buildings onto grids to form a city. They can also increase the density of residential, industrial, and commercial buildings using the flyer menu.

Map Interface and Navigation

Designing this interface required a deep understanding of the map interface and game experience, taking into account interactions, states, visual cues, gestures, and other elements. I suggested adding map zooming and moving functions to enhance the design mode experience.

Simulation Mode

2D and 3D Viewing Modes

Simulation mode has two viewing options: 2D and 3D. The 2D mode offers a simpler visualization for quickly identifying land uses and modifying the map, while the 3D mode provides a more realistic and immersive experience. We refined the building’s appearance, lighting, and effects to address performance issues and create a futuristic feel.

Guided Tour and Onboarding

After developing the necessary functions, we reviewed the entire learning process. Providing a guided tour or onboarding was crucial, as the simulator was unfamiliar to many users.

Onboarding UI: Pop-Ups vs Coach Marks

Initially, I considered using coach marks or pop-ups for the onboarding UI. However, a series of coach marks could overwhelm users and make the tool appear difficult to use.

Instead, we opted for pop-ups with a concise copy to display necessary or unexpected interactions and information, enabling users to quickly understand their goals and how to achieve them.

Company	Cherrypicks
My Role	Manager, Design & UX
Platform	Website, App
Responsibilities	PRD 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)