Coding Galaxy: City X

Coding Galaxy: City X is an educational programme that teaches students about cutting-edge technologies and how these are applied to develop smart cities. It bridges the curriculum gap between computational thinking and programming education whilst fostering problem-solving skills and a design thinking mindset.

Target audience:

  • End-user: students in Grades 5–10 (Primary 5–Secondary 4)
  • Decision-maker: schools


  • Self-learning mobile app
  • Digital/paper courseware


Over typical text-based learning, City X emphasises interactive activities and micro-learning, which is more flexible, practical, and reflective. The product and design teams considered the following five principles when creating the end-to-end experience:

  1. Bite-sized: knowledge can be effectively digested and assessed;
  2. Game-based learning: enhance academic achievement and motivation;
  3. Everyday application: make learning more accessible and meaningful;
  4. Design thinking: encourage learners to emphasise, understand, then solve problems;
  5. Self-learning: low guidance level; learn independently with the app.

Gamified the Experience

Educational specialists developed the curriculum early on, but how it is integrated with the mobile learning experience? I began by thinking about how to make micro-learning enjoyable.

With the emerging educational platforms, there are many ways to carry out game-based learning. I drew lessons from the most successful ones, such as Mimo, Foursquare, Primer by Google, Duolingo, and Elevate, to encourage students to indulge in terms of these areas:

  • Business modal and learning topics;
  • Bite-sized learning;
  • Reports and achievements: visualising goals and accomplishments;
  • Learning reminders: encourage revisits;
  • EXP/streak earning: developing study habits;
  • In-app upselling

Learning from Stories

RPGs (role-playing games) also inspired me to persuade students to empathise through story-telling. Heroes in the games are driven by a desire to help others, to understand their struggles, and to gain experience along the way. Isn’t it similar to using design thinking to solve problems in real life?

As a result, we integrated that experience with Coding Galaxy’s storyline. Learners will be inventors in a smart city, creating innovative technologies to solve problems for the public. To make learning more like a game, we transformed the terminologies and learning paths into quests, emblems, storylines, and reward systems.

While gamification can be executed more spectacularly, it’s important to consider the degree of gamification. We feel that a dialogue-based experience with fiction stories is the most viable user-centred and feasible approach.

Designing Interactive Questions

Now, let’s talk about the interaction.

City X facilitates self-learning through lots of interactive moments. Learners will answer questions during or after reading the bite-sized learning cards to evaluate their knowledge and keep their attention.

Designing these unique feedback components was undoubtedly a challenge. Questions can take many forms, such as completing diagrams, programming, Blockly, or even simulations, not just multiple-choice questions. Programming questions like Blockly or Scratch, for example, took up the entire page for programming, so we had to come up with 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 their limitations, making them simple to use on mobile devices and delivering dynamic content in various formats.


When the UI and UX are clear enough to speak for themselves, onboarding is usually unnecessary, but there are always exceptions.

To persuade both decision-makers and learners, we value the onboarding experience, which highlights the app’s learning objective and prepares learners for their journey to Coding Galaxy. Instead of using a static carousel, I suggested that the design team use Lottie to animate the graphics to convey emotion. This collaboration allows designers who are good at drawing to work with animation experts, and the results are fantastic.

Other Screens


After that, the product concept and wireframe were passed on to UI design, illustration, and micro-animation. These small details will have a big impact on the impression and emotion that learners will receive. We released the app and provided a complete set of courseware for the first few chapters to schools. Unfortunately, the team has decided to move to another project; therefore, City X is no longer developed.

I’m thrilled to be a part of this project’s product planning and research, where I’ll be exploring how gaming and learning are connected. Many educational platforms, without a doubt, perform better than we do. Even yet, as long as you are a consumer or user, you will be unaware of how psychology and behaviour science shape your learning and usage habits. Now I can implement these lessons in practice.

I’m grateful to the design team for putting in tremendous effort to lend their expertise to help me bring the product to life. Other teammates have also expressed confidence in my abilities to conceptualise ideas and oversee the entire development from start to finish. I was amazed by how each person used their skill sets to support and collaborate on the product prototype.

My RoleManager, Design & UX
PlatformApp, Web, Prints
ResponsibilitiesProduct design and research
User flow, wireframing
Design management