UI/UX, Mobile Experience, Web Game Design

MTR Tap Tap Game

Duration: Over 6 months

Online Location: Visit the MTR Mobile website

The MTR Tap Tap Game was my first project as a design lead, allowing me to explore new ideas in greater depth. Designed as a fast-paced matchmaking experience, it features a low learning curve and competitive gameplay, including a leaderboard with rewards for winners.

During production, I focused on creating new animations, developing features such as code redemption, and implementing a real-time scoreboard to support ongoing competition. The art direction was inspired by retro arcade aesthetics and 8-bit pixel art, reflecting styles that were especially popular in Hong Kong around two decades ago.

Overview

I led the development of the game’s art direction and themes, incorporating an 8-bit and pixel art aesthetic to create effects such as pixelation and posterization, reminiscent of classic arcade games. MTR branding was integrated into the visual design to produce a stylized, immersive look and feel.

A comprehensive design system was also created, including typography using the DotGothic16 font. Title treatment included increased font size, shadow effects via duplication, unified black stroke outlines, and pixelated drop shadows. The color palette used brand colors with teal highlights, while custom icons and key visuals were produced through a pixel-based process to maintain visual consistency.

Low-fidelity wireframes and detailed layouts were developed for key sections, including the landing page, redemption page, and leaderboards. Animations were designed for the landing experience, instructions, starting screen, button presses, and the finishing screen.

During User Acceptance Test (UAT) and usability testing, insights were identified for two key audiences. For seniors, the experience was improved through higher contrast, larger font sizes, simplified controls, fewer clicks, and an overall reduction in the learning curve. For MTR fans, the design incorporated more MTR elements, increased replayability, and strengthened the emphasis on competition.

Design System

Typography

Color

Wireframe

Layout

This project gamifies the MTR ecosystem to drive digital engagement and long-term user retention. By integrating a rewards-based loop with daily missions and competitive leaderboards, the UI/UX strategy incentivizes consistent interaction across MTR’s mobile and web touchpoints.

The design leverages a cohesive visual identity—incorporating iconic brand elements and mascots—to ensure an immersive, recognizable experience. Through intuitive navigation and streamlined flows for point redemption and progress sharing, the interface balances playful interaction with functional efficiency to encourage competition and reward-driven motivation.