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.
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.
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.
|My Role||Manager, Design & UX|
UX copywriting guide
Content analysis and research
Responsive website design and prototyping
Editorial writing and copywriting
Translation (Traditional Chinese, Simplified Chinese and English)