Design Arcade – Game Design

Designing and coding interactive games that bring design principles to life.

Designing and coding interactive games that bring design principles to life.

Context

Design Arcade is my thesis project. Its an interactive platform that transforms design theory into playful, hands-on learning. This case study focuses on the game design journey, where I explored how to make design principles like contrast and hierarchy engaging, intuitive, and practical through gamified interactions.

Design Arcade is my thesis project — an interactive platform where students and young professionals practice design principles through play. This case study focuses on how I built a brand identity that bridges the excitement of arcade culture with the credibility of design education.

Deliverables: Logo System, Color Palette, Typography, Mockups, Brand Guidelines

Scope

UX/UI Design

Game Design

Prototyping

Coding

Timeline

2 Weeks

Check Out More

Challenge

Context

Many design students understand principles like contrast, alignment, and hierarchy in theory, but struggle to apply them in practice. The challenge was to create a learning experience that bridges this gap — fun and motivating like a game, but structured enough to deliver real design education.

Design Arcade is my thesis project — an interactive platform where students and young professionals practice design principles through play. This case study focuses on how I built a brand identity that bridges the excitement of arcade culture with the credibility of design education.

Deliverables: Logo System, Color Palette, Typography, Mockups, Brand Guidelines

Challenge

Build a visual identity for Design Arcade that instantly communicates both learning and play. It had to feel bold enough to attract young designers, but structured enough to be taken seriously in an educational context.

Research & Insights

I began with a competitive analysis of gamified learning platforms, looking at how they engage users and where they fall short. Key insight: most platforms either oversimplify principles or overload learners, leaving little space for playful exploration.

Design Development

Using the Game Design Canvas, I structured the experience into three tiers of play:

  • Test Zone — a sandbox where users freely adjust design elements.

  • Design Duel — scenario challenges where players choose stronger design options.

  • Design Repair — real-world UI challenges where players fix issues.

I mapped the full user journey from onboarding to feedback, then translated it into interactive screens in Figma. Tone of voice was critical — playful, supportive, and encouraging iteration.

Application / Testing

To prove the concept, I built a coded version of the Test Zone in HTML/CSS/JS. In this game, players adjust sliders to improve color contrast and instantly see the impact on readability. This demonstrated how quickly design principles could shift from theory to application.

Coding

I went beyond prototyping and developed a working coded version of the Test Zone game. The code integrates web accessibility guidelines, calculating color contrast ratios in real time. As players adjust sliders, the game provides immediate feedback on readability — making accessibility part of the learning experience.

Prototype

The interactive prototype built in Figma showcases the full user journey across all three modes of play — Test Zone, Design Duel, and Design Repair.


Click the laptop image below to try the prototype and explore the games or Click Here

Outcome

The MVP delivers three distinct gameplay modes that scale in complexity, showing how design principles can be practiced through doing rather than reading. The coded Test Zone validated the idea, making it clear, fun, and effective for learners. Designing for education taught me how to balance simplicity in gameplay with depth in learning outcomes, and how even small interactions can spark meaningful design practice.

Role

Game Designer

UX/UI Designer

Prototype Developer

Stack

Figma

Illustrator

Photoshop

HTML/CSS/JS

Deliverables

Game Design Canvas

User Journey

Interactive Prototype

Coded Test Zone Game