AI x UI
This project is a collection of practical design interventions, my attempts at incorporating AI generation & ideation directly into a live mobile game's UI pipeline.
Overview
This project explores integrating AI into a live game's UI pipeline, using AI image generators (Figma Make and Gemini) not just for asset generation, but as a collaborative tool for ideation and problem-solving. This case study details the critical design decisions made to enhance player retention, drive monetization, and maintain a state of "flow" during high-octane gameplay.
I mixed AI tools with solid UI rules. Here is some of the examples of how I fixed some of the problems
The Reward Mystery
UX Principle Goal: Gradient Effect
The Challenge: Players were engaged but unclear. In the old system, constant feedback was the same: “What am I getting?”
My reinterpretation: Using Figma’s suggestion, I brought rewards directly into the leaderboard, aligning it with our design language for better clarity and motivation.
Fast and Furious
UX Principle: Efficiency of Use
The Challenge: A big animation triggered on every strong streak, but the goal was flow and consistency. Interviews showed post-shot animations were breaking rhythm and feeling frustrating.
My reinterpretation: I replaced the “hero moment” with a subtle feedback loop that still hits dopamine, but doesn’t interrupt flow—keeping the experience smooth and uninterrupted.
From cluttered stats to controlled progression
UX Principle: Progressive disclosure and endowment
The Challenge: A new screen had to be designed from scratch to show progress, stats, and key information clearly.
My reInterpretation: Guided by Figma Make, I simplified the layout, removed unnecessary clutter, and split the content into two steps using progressive disclosure. I also introduced a manual “Claim” button for rewards and milestones to break auto loops and give control back to the player.
Bridging the Real World
UX Principle: Match Between System and Real World & User-Centric Validation
The Challenge: We needed a promo banner and logo for the T20 World Cup event that felt authentic, so players could truly feel the hype of the tournament.
My interpretation: I studied the real ICC T20 visual style and used Gemini to explore multiple logo directions inspired by it. Instead of choosing internally, I tested the options with users and selected the community favorite. The final logo was paired with detailed player visuals in a vibrant in-game banner to create a more relatable and authentic event feel.
The Premium Dashboard
UX Principle: Perceived Value
The Challenge: How to clearly show VIP activation status, unlocked perks, and renewal details in one place.
My reinterpretation:Figma Make gave a strong starting direction. I redesigned the unlocked state into a premium horizontal dashboard with custom benefit icons instead of plain checkmarks, making perks more visual and rewarding.
Standardizing Interruptions
UX Principle: Consistency and Standards
The Challenge: Needed a popup system from scratch. The AI suggested a generic, bulky, light-themed error popup.
My reinterpretation: I replaced it with a unified, minimal glassmorphic dark modal system. One consistent design language across No Internet, Connection Failed, Quit Game, and Pause states for a cleaner, more cohesive experience.
Key Learnings: AI as My Co-Pilot
AI makes exploration faster: It helps me quickly explore ideas, layouts, and visual directions without slowing down the creative flow.
Testing became much quicker: I can create multiple concepts in minutes, test them with users, and spend more time refining the strongest direction.
Better outcomes through collaboration: AI speeds up execution and exploration, while design thinking helps shape the experience with clarity, context, and intention.
Speed + empathy creates stronger design: AI helps move faster, and combining that speed with human understanding leads to more thoughtful user experiences.
Related Projects
