Coding Galaxy: City X is an educational program that teaches students about the latest technologies and how they can be used to create smart cities. It fills the gap in the curriculum between computational thinking and programming education, helping students develop problem-solving skills and a design-thinking mindset.
Target audience:
- End-user: students in Grades 5–10 (Primary 5–Secondary 4)
- Decision-maker: schools
Medium:
- Self-learning mobile app
- Digital/paper courseware
Goals
City X emphasises interactive activities and micro-learning, which are more flexible, practical, and reflective than traditional text-based learning. The product and design teams kept five principles in mind when creating the end-to-end experience:
- Bite-sized: 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.
Gamified the Experience
Educational specialists developed the curriculum early on, but how is it integrated with the mobile learning experience? I drew lessons from successful educational platforms such as Mimo, Foursquare, Primer by Google, Duolingo, and Elevate to make micro-learning enjoyable.
These areas encouraged students to engage:
- Business model and learning topics;
- Bite-sized learning;
- Reports and achievements: visualizing goals and accomplishments;
- Learning reminders: encouraging revisits;
- EXP/streak earning: developing study habits;
- In-app upselling.
Learning from Stories
Role-playing games also inspired me to encourage students to empathise through storytelling. The heroes in these games are motivated by a desire to help others, to understand their struggles, and to gain experience in the process. Isn’t this similar to using design thinking to solve real-world problems?
Gamification can be executed in more impressive ways, but it’s important to consider the extent of its use. We believe that a dialogue-based experience with fictional stories is the most user-friendly and achievable approach.
Designing Interactive Questions
Now, let’s discuss interaction. City X encourages self-learning through interactive moments. Learners answer questions while or after reading the bite-sized learning cards to assess their knowledge and maintain their focus.
Designing these distinctive feedback components was a challenge. Questions can take many 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.
Because this part is more challenging, it involves a better understanding of app patterns. I designed and detailed how each question type interacted and its limitations, making them simple to use on mobile devices and delivering dynamic content in various formats.
Onboarding
When the user interface (UI) and user experience (UX) are intuitive, onboarding is usually unnecessary. However, there are exceptions. To convince both decision-makers and learners, we prioritize the onboarding experience. It should emphasize the app’s learning objective and prepare learners for their journey to Coding Galaxy.
Rather than using a static carousel, I suggested that the design team use Lottie to animate the graphics. This would create a more emotive experience. This collaboration allows designers who are skilled at drawing to work with animation experts, resulting in fantastic outcomes.
Other Screens
Afterword
After that, the product concept and wireframe were passed on to UI design, illustration, and micro-animation. These small details significantly influence the impression, and emotion learners receive. We released the app and supplied schools with complete courseware for the initial chapters. However, the team has decided to move to another project, so City X is no longer being developed.
I’m delighted to be part of this project’s product planning and research, where I’ll investigate the connection between gaming and learning. Undoubtedly, many educational platforms outperform us. However, as a consumer or user, you remain unaware of how psychology and behaviour science shape your learning and usage habits. Now I can put these lessons into practice.
I’m thankful to the design team for their tremendous effort to offer their expertise and help me bring the product to fruition. Other teammates have also expressed faith in my ability to conceptualise ideas and manage 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 