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.
Tasks
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?
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.
| 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) |
Constance Tang 