City X is an educational program to teach students about the latest technologies and their applications in creating smart cities. It bridges the gap between computational thinking and programming education, focusing on problem-solving skills and a design-thinking mindset.
Target Audience
- End-user: Students in grades 5–10 (Primary 5–Secondary 4)
- Decision-makers: Schools
Delivery Format
- Self-learning mobile app
- Digital and paper courseware
Design Principles
The City X product and design teams followed five guiding principles to shape the end-to-end experience:
- Bite-sized learning: knowledge can be easily absorbed and evaluated
- Game-based learning: boosts academic performance and motivation
- Everyday application: makes learning more accessible and relevant
- Design thinking: encourages learners to identify, understand, and solve problems
- Self-learning: low guidance level; users can learn independently with the app.
Gamification Elements
City X incorporates gamification elements to make micro-learning enjoyable and engaging, drawing lessons from successful educational platforms such as Mimo, Foursquare, Google Primer, Duolingo, and Elevate. The gamification areas that encourage student engagement are:
- Business model and learning topics
- Bite-sized learning
- Reports and achievements: visualising goals and accomplishments
- Learning reminders: encouraging revisits
- EXP/streak earning: developing study habits
- In-app upselling
Storytelling Approach
City X integrates storytelling with Coding Galaxy’s storyline, where learners become investors in a smart city and create innovative technologies to solve problems for the public. The program transforms terminologies and learning paths into quests, emblems, storylines, and reward systems, making learning more like a game.
Gamification can be executed in more impressive ways, but it’s essential to consider the extent of its use. We believe a dialogue-based experience with fictional stories is the most user-friendly and achievable approach.
Interactive Questions
City X utilises interactive moments to promote self-learning, assess knowledge and maintain focus.
Designing these feedback components was challenging as questions can take various forms, such as completing diagrams, programming, Blockly, or simulations, not just multiple-choice questions.
For example, programming questions like Blockly or Scratch took up the entire page, so we had to find alternative ways to provide hints, introductions, or other information.
Given that this part is more challenging, it requires a better grasp of app patterns. I carefully designed and documented the interactions and limitations of each question type, ensuring their ease of use on mobile devices while also delivering dynamic content in various formats.
Onboarding Experience
To convince both decision-makers and learners, City X prioritises the onboarding experience. The onboarding emphasises the app’s learning objective and prepares learners for their journey to Coding Galaxy. To create a more emotional experience, the design team uses Lottie to animate the graphics. This would make a more dynamic experience. This collaboration allows designers skilled at drawing to work with animation experts, resulting in fantastic outcomes.
Additional App Screens
The City X app has several additional screens, such as quests, quest intros, missions of a quest, and completed missions.
Conclusion
City X provided valuable insights into the connection between gaming and learning and the impact of psychology and behavioural science on user experiences. The product concept and wireframe were handed off to UI design, illustration, and micro-animation teammates, and the app was released with complete courseware for the initial chapters.
Reflection and Acknowledgements
Throughout the City X project, I had the opportunity to investigate the connection between gaming and learning and the impact of psychology and behavioural science on user experiences.
As a consumer or user, you may not know how psychology and behaviour science shape your learning and usage habits. With City X, we were able to put these lessons into practice, and I am excited to see the results of our efforts.
I’m deeply grateful to the design team for their tremendous effort in offering their expertise and helping me bring the product to fruition. I’d also like to thank my other teammates for expressing faith in my ability to conceptualise ideas and manage the development from start to finish. I was astonished by how each person utilised their skills to support and collaborate on the product prototype.
| Company | Cherrypicks |
| My Role | Manager, Design & UX |
| Platform | App, Web, Prints |
| Responsibilities | Product design and research User flow, wireframing Design management |
Constance Tang 