.png)
Kwyjibo Adventure UI&UX Design
kwyjibo Adventure is a narrative-driven action game where players discover a magical yo-yo that grants extraordinary powers. Using these abilities, they embark on a heartfelt journey to confront their bullies and reclaim their confidence.
1. Project Overview
The Concept
.png)
Timeline
2 Months
Tool Used
Figma, Photoshop, Unity
Number of Team
5 people
About Kwyjibo Adventure
-
Kwyjibo Adventure is a 3D turn-based combat game where players take on bullies using a magical yo-yo. You play as Emily, the new kid at school, fending for yourself by performing dazzling tricks and casting mystical spells with your yo-yo.
Challenges
-
This project combined turn-based combat, roguelike elements, and a yo-yo theme — a rare mix with few comparable titles on the market.
-
Although the game was developed over six months, our available time was far more limited than expected. Balancing coursework, a part-time job, and an active job search alongside development meant we couldn’t dedicate our full focus to the project.
Solutions
-
We broke down our research and design focus into the game’s three unique features — turn-based combat, roguelike progression, and the yo-yo mechanic — to ensure each was fully explored and integrated into the player experience.
-
Given that each team member had additional commitments during the six-month development period, we used JIRA for task management. This allowed us to clearly assign responsibilities, set deadlines, and maintain alignment across the team.
Design Process
Empathize
User Interviews
User Research
Competitive analysis
Ideate
User Flows
Task Flows
Design
Low Fidelity
High Fidelity
Test
Usability test
Feedback
2. Empathize
Research & Interview
Quantitative Research - Understanding the uniqueness
-
I spent approximately one month researching and playing games that featured each of our three core elements — turn-based combat, roguelike progression, and yo-yo mechanics. This allowed me to understand how each feature attracts and engages players.
-
While no existing title combined all three elements, this research helped me identify the best possible approach to merging them into a cohesive gameplay experience.
Competitive Analysis
Conducting a competitive analysis was essential for understanding both the market landscape and user expectations. This process helped us:
1. Identify Opportunities – Pinpoint features and design elements that strongly appeal to players, as well as areas where our game could be improved.
2. Meet User Expectations – Study user experience patterns and feature sets from top-performing games to understand what works and how we can refine our own implementation.
3. Achieve Visual Harmony – Determine the most fitting art style that could unify our three core elements — turn-based combat, roguelike progression, and yo-yo mechanics — into a cohesive aesthetic.
Hades
Core Theme: Mythological Underworld with a Bold, Stylized.
-
A painterly, hand-drawn visual style combining deep shadows, rich highlights, and high contrast.
HUD & Gameplay UI:
-
UI is minimalist during combat — using symbolic, instantly readable shapes rather than large panels.
-
Health, mana, and gold are displayed using ornate frames and stylized meters that blend seamlessly with the game’s theme.
Typography:
Heavy, capitalized serif fonts inspired by Greek inscriptions formal, powerful, and thematically coherent.
Color:
Dominated by deep purples, crimson reds, obsidian blacks, and gold accents.
Penny's Big Breakaway
Core Theme: Whimsical Retro 3D Platformer with a Saturday Morning.
-
Bright, low-poly-inspired stylization with exaggerated proportions, bold outlines, and flat shading.
HUD & Gameplay UI
-
Uses snap-to-corner UI layout: clean and functional while matching the visual tone.
-
HUD elements float unobtrusively around the screen — bold, outlined meters for health/yo-yo energy, oversized collectable counters.
Typography:
Bold, round sans-serif font with drop shadows and colorful outlines.
Color:
Primary palette: Sunset orange, electric blue, bubblegum pink, and lemon yellow.
Honkai: Star Rail
Core Theme: Sleek Sci-Fi Fantasy with Premium Anime. Aesthetic
-
High-fidelity anime visuals with polished, futuristic UI design.
HUD & Gameplay UI
-
Minimalist layout with high contrast — all critical info is delivered through glow effects, icons, and dynamic animations.
-
Key stats (ATK, SPD, HP) are emphasized using larger font sizes, accent colors, and visual icons to guide player focus.
Typography:
Modern, geometric sans-serif fonts with cut corners and high legibility — reinforcing the sci-fi aesthetic.
Color:
Primary palette: deep navy, charcoal gray, and icy blue, creating a cool, high-tech tone.
Direction
-
From the quantitative and competitive research, I found that the reason these games’ UIs stand out is their uniqueness — each is highly aligned with its game’s theme, and none use a flat design style.
-
Based on these insights, the design principle for Kwyjibo Adventure will follow the same approach: creating a UI that is distinctive, thematically consistent, and visually rich.
3.Ideate
Game Flow & Loop
Game Start
The player begins discovering the game mechanics and experiments with attacking enemies.
Attacking Enemy
The player engages in combat by executing combo skills using the controller.
Defeat Enemy
Through player actions, the enemy is defeated, leading to the reward phase.
Rewards
Upon victory, the player selects a reward to enhance their character’s skills before progressing to the next level.
My Tasks
My Tasks
Given the number of elements required in this game flow, my responsibilities included both UX and UI design:
UX Design
-
Layout for the combat section and reward section
-
Layout for the player and enemy panels
UI Design
-
Controller button icons × 4
-
Attribute and reward icons × 72
-
Visual design for player and enemy panels
-
Game logo design
5. Design
Low & High Fidelity
Goals
-
Immersion & Theme Alignment – Design a UI that feels immersive and strongly reinforces the yo-yo theme.
-
Clarity & Guidance – With the large number of elements in the game, ensure the UI/UX supports players in understanding mechanics and navigating the game with ease.
-
Unique Visual Experience – Deliver a distinctive visual style that sets the game apart, enhancing the overall player experience.
Low Fidelity
To help the developers better understand the game flow and reward scene transitions, I created a short low-fidelity gameplay flow video instead of a traditional frame-by-frame prototype. This approach allowed me to clearly demonstrate pacing, interactions, and transitions in a way that was faster to produce and easier for the team to interpret.
Combat Flow
Rewards scene transition
High Fidelity
Due to development workload constraints, the reward scene was implemented differently from my initial design, and some of the planned functions were not integrated into the final build. Additionally, we transitioned all assets from high-poly to low-poly because of unforeseen team resource changes, which resulted in a slight mismatch between the UI and the updated game aesthetic.
The following images showcase the UI elements I designed, alongside how they were ultimately implemented in the game.
Main Interface
.png)
Logo
Skill Icons
All Icons
6. Test Phase
The Iteration
Feedback
We conducted a playtest midway through the project and received a great deal of valuable feedback from players. These insights helped us identify clear directions for improving the UI and overall user experience.
However, due to the heavy workload on the coding side, we were unable to implement all of the suggested improvements within the project timeline. While many enhancement opportunities were identified, they remain as potential updates for future iterations.
7. Reflection
Outcome & Reflection
Outcome
-
The game was successfully published on Steam and made available to a global audience. We also hosted a game event in Santa Cruz, where over 100 players had the opportunity to try our game and share their feedback.
The Experiences
This project was a wonderful experience that taught me how to be a more effective team member and how to communicate my ideas constructively without causing misunderstandings or hurt feelings.
Figma & Research Skills Improvement
On the technical side, I became highly proficient in Figma, learning to quickly convey design ideas to my teammates through clear prototypes and layouts.
I also improved my research skills — both quantitative and qualitative — allowing me to gather insights more efficiently and apply them effectively to design decisions.
If I had more time
If given more time, I would rework all UI assets to better match the updated game aesthetic. I would also assist the development team in integrating my own designs directly, helping to balance the workload and elevate the overall quality of the game.
Key Takeaways
-
Strengthened cross-functional collaboration and constructive communication skills
-
Achieved professional proficiency in Figma and improved efficiency in both quantitative and qualitative research
-
Learned the importance of aligning UI assets with evolving game aesthetics
-
Recognized the value of balancing workload across design and development to improve overall project quality