Game Mobile UI/UX
Showcasing my work for a hip-hop-inspired mobile trading card game, this project highlights onboarding redesign and social feature implementation. I crafted intuitive UI screens, defined a bold visual style, and brought interactive elements to life in Unity. My focus: clarity, accessibility, and creating a visually striking experience that keeps players hooked.
TEAM
Five Mics Studios
MY ROLE
UI/UX Designer, Technical Implementation
TOOLS & SKILLS
Figma, Unity, C#, Adobe Photoshop
Timeline
2023 - 2024
Project Objectives
Design a clear and intuitive interface to guide players while addressing the visual presentation of complex interactions.
Visual Style
I used bright colors to represent the game's unique world setting, which blends realism with a futuristic vibe. The vibrant palette also conveys the dynamic energy of hip-hop culture. To further enhance the sense of superpowers and excitement, I incorporated subtle neon effects throughout the design.
/Mood Board
/Color Palette
User flow
Focusing on onboarding and battling, I designed a narrative-driven tutorial to engage players before introducing the account creation process, ensuring they could start playing immediately without delays. I also developed a streamlined flow for selecting battle modes and created a user-friendly friends feature for adding and accepting friend invitations.
*Only publicly released screens are shown to ensure confidentiality.
High-Fidelity UI
GOAL
Create a strong first impression and effortlessly guide both new and returning players.
SOLUTION
Bold, eye-catching imagery with clear, intuitive buttons and concise text.
GOAL
Motivate players to progress through the tutorial without losing interest.
SOLUTION
Reward players with collectible incentives and visually satisfying "completed" badges for a sense of achievement.
GOAL
Make signing up engaging and enjoyable.
SOLUTION
Let players choose their starter bundle and avatar first for excitement, followed by the sign-up form.
GOAL
Showcase player info, enable seamless navigation, and maintain visual excitement.
SOLUTION
Use clean visual sections for organization and dynamic slides for announcements and updates.
GOAL
Make selecting an AI opponent quick and intuitive.
SOLUTION
Use distinct colors and highlighted features to differentiate each AI opponent.
GOAL
Make selecting an AI opponent quick and intuitive.
SOLUTION
Use distinct colors and highlighted features to differentiate each AI opponent.
GOAL
Provide a streamlined experience for managing friends and adding new ones.
SOLUTION
Organize features with tabs, include sorting and search options, and encourage inviting friends with rewards.
GOAL
Ensure smooth and intuitive navigation during battles on a mobile screen.
SOLUTION
Display only essential information and include a hint button for additional guidance.
Unity Implementation
After team discussions and iterations, I implemented responsive UI in Unity. Added dynamic button animations, seamless scene transitions, and drag-and-drop functionality. Enhanced 3D holographic card upgrades with custom shaders for a striking visual impact.
/Button Animation
/UI Implementation
/3D Holographic Card Design (Shader)
3x
20%
Players praised the eye-catching visuals and seamless interactions, boosting overall user satisfaction. The narrative-driven tutorial tripled completion rates and reduced player drop-off during onboarding.
Strong visual cohesion left a lasting impression, making the interface intuitive and memorable. During the demo launch window, we gathered insights from surveys, playtests, and analytics to release 3 targeted iterations. These updates resolved key pain points, enhanced usability, and increased returning user rates by 20%.
Each change reflected our commitment to delivering a polished, player-first experience.