Coding Galaxy City X is a mobile learning platform that helps students aged 10–16 understand smart city technologies through interactive, gamified experiences.
As Design & UX Manager, I led a cross-functional team across design, animation, courseware, and development to build a product that balances educational rigour with engaging gameplay.
Goals & constraints
City X set out to replace static classroom materials with a flexible, mobile learning experience.
Goals
- Increase lesson completion and return sessions.
- Maintain academic rigour while improving moment-to-moment motivation.
- Give educators visibility to support at-risk students.
Constraints
- Age range: 10-16 year olds have vastly different cognitive abilities and tech literacy.
- Ecosystem integration: Had to work within the existing Coding Galaxy platform architecture.
- Multi-format delivery: Mobile-first experience, plus web dashboard for teachers, plus printable worksheets.
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 a 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 Layer
Students take on the role of smart city developers, addressing civic challenges through story-driven quests. Concepts are presented through dialogue, and chapter “inventions” serve as rewards that reinforce knowledge application.
Diverse Interaction Types
To maintain attention and improve learning transfer, we designed varied question formats:
- 🔶 Interactive diagrams (drag-and-drop)
- 🧩 Block-based (blocky) coding tasks
- 🎛️ Real-world simulations
- 📌 Adaptive multiple-choice questions
Mobile-First Patterns
I developed a pattern library for consistent interactions, added contextual hints, and used Lottie animations to create a smooth onboarding and learning experience. The design ensured seamless integration with the broader Coding Galaxy ecosystem.
Additional screens
Impact
City X launched with comprehensive courseware across mobile and print. Pilot programs in schools showed strong student engagement and helped schools adopt new technology learning standards. The gamification framework we developed now serves as a model for future game-based learning products.
Reflection
This project deepened my expertise in integrating gamification with education and applying behavioural psychology to UX. Working across design, animation, and development teams reinforced my belief that thoughtful UX design can make learning more accessible and enjoyable for students and educators.
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!
