Beyond Smart Cities is a STEM learning platform integrated with various interactive activities to learn programming, advanced technology A–G concepts such as artificial intelligence, Bitcoin and Sustainable Development Goals (SDGs). The platform cultivates students’ problem-solving skills through real projects and instils them to adopt a positive mindset to deal with future challenges.
Tasks
Based on learning objectives identified by product people, educational consultants, and content writers. The team would build an online learning platform for junior secondary students and a data collection app for research activities.
I designed user flows and interactions for each touchpoint, including the online website and mobile app, coordinated any requirement gaps with the project manager. I worked with UI designer, 3D artist, and graphic designer to co-build the platform. As the Design Manager, I also kept teammates in the design team informed of goals and status, ensuring deliverables were visually consistent and had a good user experience.
Variety of Learning Activities
The design team was not only responsible for the print and digital visual assets but also every learning piece on the web 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 various learning activities, but there are only a few of us, plus everyone has different expertise, so it was challenging for me to distribute the workload thus keep up with the schedule.
CityScape: Epidemic Outbreak
Not only am I not familiar with the knowledge taught on this platform, but I felt more uncertain about the simulator, CityScape: Epidemic Outbreak, because it differs entirely from many simulation games.
📒 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 actual world to build a data set and then import the data into the simulation to see its impact on the outbreak.
Designer Mode
“How should I visualize it?” I had been thinking and trying to find similar objects or metaphors for designing. I referenced the real simulator and some interior design software, plus my imagination to create the experience. Of course, our simulator had more settings and interactions, so things were more complicated.
There are two tabs in the simulator: design and simulation. In the design mode, students drag-and-drop buildings onto grids to create a city, and houses, industrial and commercial buildings can choose to build density in the flyer menu.
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 found buildings were too detailed, which affected the performance and not looked futuristic, so we simplified and refined the appearance of the buildings and adjusted the lighting and effects.
Guided Tour
After finish developing the essential functions, we reviewed the entire learning experience. Since the simulator was relatively new to people, it was necessary to build a product tour/onboarding.
I had two onboarding UIs in my mind: coach mark and pop-up. Coach marks may bombard users with a series of coach markers. Although the instruction is detailed, it will increase the user’s cognitive load, making users unable to remember all instructions at once and creating an impression that the tool is very complicated to use.
Instead, use pop-ups to display necessary or unfamiliar interactions and information with a concise copy so that users can immediately digest and understand their goal and how to accomplish 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) |
