Beyond Smart Cities is a STEM learning platform that includes a variety of interactive activities for learning programming, advanced technology A–G concepts and the Sustainable Development Goals (SDGs). Through real projects, the platform develops students’ problem-solving skills and instils them a positive mindset dealing with future challenges.
Tasks
Based on learning objectives established by product people, educational consultants, and content writers, the team would create an online learning platform for junior secondary students and a data collection app for research activities.
For each touchpoint of the mobile app and website, I created user flows and interactions, and worked with the project manager to fill in any requirement gaps. I co-built it alongside with the design team and keep them informed of goals and progress, ensuring deliverables were visually consistent and guaranteeing a positive user experience.
Variety of Learning Activities
The design team was in charge of not just the print and digital visual assets, but also all of the learning pieces on the platform:
- Learning slides and courseware;
- Web interface;
- Research app;
- Animation or game-based simulation;
- Python programming;
- Quizzes for evaluating learning outcomes;
- Extended readings;
- Advanced programming challenges.
There are a lot of learning activities, but there are only a few of us, and we have various areas of expertise, so it was difficult for me to spread the workload of each member in the design team and stay on track.
CityScape: Epidemic Outbreak
Not only was I unfamiliar with the content presented on the platform, but I also wary of the simulator, CityScape: Epidemic Outbreak, because it unlike any other simulation games I have played in my life.
📒 What is CityScape: Epidemic Outbreak?
Understand how public and personal epidemic prevention measures, land use, and population density affect the virus spread and cure rates. Students will use a mobile app to collect data on the number of people wearing masks in the real world to build a data set, then transfer the data into the simulation to observe how it affect the outbreak.
Designer Mode
“How should I visualise it?” I had been pondering and trying to come up with analogous things or metaphors for design. I referenced the actual simulator and some interior design software, plus my imagination to construct the experience. Of course, our simulator had additional settings and interactions, making things more complicated.
In the simulator, there are two tabs: design and simulation. In the design mode, students drag-and-drop buildings onto grids to form a city, and in the flyer menu, they may choose to increase the density for 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 many elements to create the whole experience. Since the topic in this course is about urban development, the interface required special attention to map navigation, so 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 there are two modes?
Along the way, we discovered buildings were too detailed, causing performance issues and a lack of futuristic feeling, so we simplified and refined the appearance of the buildings and modified the lighting and effects.
Guided Tour
We went over the entire learning flow after we finished creating the essential functions. Since the simulator was new to most individuals, it was important to provide a product tour or onboarding.
I had two ideas for onboarding UI: coach mark and pop-up.
Users may be bombarded with a series of coach markers. Although the instruction are extensive, they will raise the user’s cognitive burden, making them unable to remember all instructions at once and giving an impression that the tool is difficult to use.
Instead, utilise pop-ups to display necessary or unexpected interactions and information with succinct copy, allowing users 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 