Coding Galaxy City X is a mobile learning platform that helps students ages 10–16 understand smart city technologies through interactive and gamified experiences.
As the Design & UX Manager, I led the team in creating a product that balances educational rigor with engaging gameplay, aiming to foster computational thinking and real-world problem-solving.
Goals & constraints
City X set out to replace static classroom materials with a flexible, mobile learning experience that blends academic rigor with playful interactivity.
Goals
- Increase lesson completion and return sessions.
- Maintain academic rigor while improving moment-to-moment motivation.
- Give educators visibility to support at-risk students.
Constraints
- Wide age and tech-literacy range (10–16).
- Must integrate with the broader Coding Galaxy ecosystem.
- Cross-platform delivery (mobile, web, print) with tight production time.
Gamification meets practical learning
Research revealed that students lose motivation with long or text-heavy lessons and that teachers need clear progress tracking. To address these issues, I worked closely with the team to:
- Adopted bite-sized lesson structure: Offer short modules with instant feedback and visible progress, making learning easier to digest and track;
- Use gamification: Implemented gamification framework inspired by platforms like Duolingo, Elevate and Mimo, including achievement badges, XP, streaks and unlockable content to motivate students;
- Applied learning: Develop real-world smart city challenges and project-based tasks,
- Encourage design thinking: So students can identify problems and create solutions,
- Allow for self-learning: With minimal guidance and plenty of exploration.
- Visual dashboard: Powered by ClassMind, make it easy for educators to monitor student progress and identify those who might need extra support.
Narrative-driven quests
We believe that a light narrative layer would make abstract smart-city concepts concrete and memorable.
Students take on the role of smart city developers, addressing small civic challenges. Concepts are presented in easy-to-understand dialogues and the chapter “inventions” serve as rewards to reinforce their application of knowledge.
Diverse, interactive learning formats
City X uses varied interaction types maintain attention and improve transfer of learning. Question formats include:
- 🔶 Interactive diagrams (drag-and-drop)
- 🧩 Blocky coding tasks
- 🎛️ Real-world simulations
- 📌 Adaptive MC questions
Mobile-first patterns and interactions
Mobile-first design was a priority. We developed a pattern library for consistent interaction, added contextual hints and used high-quality Lottie animations to create a delightful onboarding and learning experiences.
Seamless integration with the broader Coding Galaxy ecosystem ensured students could transition smoothly to more advanced content.
Additional screens
Impact
City X launched with comprehensive courseware with mobile and print. Also, pilot programs in schools demonstrated strong student engagement and helped schools adopt new technology learning standards. The framework we developed now serves as a model for future game-based learning learning products.
Personal reflection
This project deepened my expertise in integrating gamification with education, applying behavioural psychology to UX and collaborating across design, animation and development teams. Most importantly, it reinforced my belief that thoughtful UX design can make learning more accessible, practical and enjoyable for students and educators alike.
Special thanks to the dedicated design team for their trust and collaboration in bringing the project from concept to launch!
| Company | Cherrypicks |
| My Role | Manager, Design & UX |
| Platform | Mobile App (iOS & Android), Web, Print |
| Responsibilities | Product Design User Flow Wireframing Design Management |
Need a design strategist to create user-friendly solutions? Let’s connect!
