FINAL FANTASY XV - CASE STUDY

Final Fantasy XV: War for Eos As the UI/UX Lead, this project involved developing the comprehensive UI and UX architecture for the entire game. The scope spanned the full development lifecycle, steering the product from its alpha phase through to a successful global launch. Core responsibilities included establishing the UI art direction, designing the user experience, and managing external outsourcing teams to deliver high-quality assets at scale.

• Immersive Onboarding: The loading screen seamlessly integrates high-fidelity IP key art to set the visual tone before gameplay begins. I developed flows that pulled players from launch to being immersed in the combat system immediately, increasing player retention by upwards of 80%.

• Complex HUD Systems: The isometric world-building view requires organizing a dense array of information. The design successfully balances essential core loops—such as top-bar resource trackers, multi-tiered navigational menus, active quest logs, and an integrated chat system—while maintaining maximum visibility of the 3D environment. This was a monumental evolution of the standards we set in Game of War and Mobile Strike.

• Character Progression UI: I designed the character hero system which utilizes a clean, hierarchical layout. It features a scrollable roster on the left, a central 3D character pedestal, and highly legible action buttons (Rank Up, Level Up) nested beneath clear stat and skill tabs, ensuring intuitive player progression.

Real-Time Combat Architecture As the UI/UX Lead for Final Fantasy XV: War for Eos, a massive effort was undertaken to develop the game's Real Time Combat system. A primary focus of this initiative was spearheading the design to work flawlessly in a mobile format, successfully adapting the fast-paced combat and iconic limit breaks from the original console title into an intuitive touchscreen experience.

• Cinematic Combat HUD: The gameplay interface is designed to maximize the visibility of high-action sequences and elemental effects. The design anchors the player's roster at the bottom of the screen using distinct character portraits equipped with integrated health and ability meters, keeping the player's focus on the battle.

• Mobile-Optimized Tactical Controls: The tactical combat view organizes on-screen chaos by clearly displaying a floating damage number system and status icons directly above the 3D character models. The bottom navigation houses accessible, mobile-friendly controls, including a prominent "TRANSCENDENCE" button for limit breaks, alongside "AUTO" battle and speed multiplier toggles.

• Comprehensive UX Specifications: The detailed technical documentation outlines the strict ruleset for UI behaviors during combat. This includes specific color-coding for damage text (categorizing health gain, shield gain, standard damage, critical damage, and status FX), float behavior animations, and dynamic HP bar positioning to ensure total legibility and clear feedback during complex, fast-paced encounters.

UI/UX Pipeline Architecture As a UI/UX Lead, a critical responsibility was creating scalable design pipelines to ensure efficient transition from abstract concepts to in-game implementation. This sample demonstrates the end-to-end design methodology used to turn complex design briefs into logical UX flows, structural wireframes, and finally, fully polished UI mockups. By standardizing this process, the handoff between the design team and UI/UX engineers was streamlined, ensuring visual fidelity and functional accuracy from the alpha phase through to global launch.

• Logic & UX Flowcharts: The process begins with complex structural flowcharts, mapping out precise user pathways, conditional logic, and screen states to ensure the architecture is sound before visual design begins.

• Low-Fidelity Wireframing: A grayscale wireframe establishes the core layout hierarchy, positioning the Chocobo character art, unit tier selections, resource sliders, and primary call-to-action buttons to test usability without stylistic distractions.

• Mid-Fidelity to Game-Ready Polish: The sequence shows the progression from a blocked-in color mockup to the final, high-fidelity Chocobo Raiders screen. This fully polished, game-ready interface features finalized 3D asset integration, refined typography, and glowing, stylized UI frames that align with the premium Final Fantasy aesthetic.

Animation, VFX, and Prefab Architecture As a UI/UX Lead, a major objective was to inject dynamic energy and life into the game's interface through motion graphics. This phase of development focused on creating high-fidelity animated mockups, finalized visual assets, and structured prefabs. By building out these animated sequences alongside their underlying components, the UI/UX team ensured that major player milestones felt rewarding while maintaining a highly efficient implementation pipeline.

• Dynamic Motion Graphics: The "Chapter 1 Complete" and "Victory" screens utilize glowing particle effects, vivid lighting, and intricate golden and silver crests to create satisfying, energetic reward sequences.

• Prefab Construction: The progression from the initial "Victory" VFX concept to the fully assembled post-match screen illustrates the creation of scalable game-ready prefabs. This modular approach allows complex, multi-layered UI animations and layouts to be packaged seamlessly for engine integration.

• Rigorous Asset Documentation: The detailed breakdown sheet explicitly isolates individual UI components, such as the winged victory crest, stylized reward containers, and specific interactive buttons like "Battle Report" and "Continue". This careful documentation ensures all assets are clearly defined and prepared for accurate handoff to developers.

Store Experience & LiveOps Monetization As a UI/UX Lead, driving the game's monetization required fostering an immersive user experience across both the in-game item shops and premium currency stores. Leveraging deep LiveOps expertise, this phase of development involved collaborating closely with marketing departments and external outsource teams to design high-converting featured sales. The resulting interface architecture successfully balances aggressive promotional strategies with a premium, narrative-driven player experience.

• Immersive Shop Environment: The primary store interface grounds the purchasing experience in the game's universe by integrating 3D character art and thematic environmental backgrounds directly behind the UI panels. The storefront maintains strict usability through clear tab navigation, live reset timers ("1h 20m"), and distinct item states—utilizing prominent "-50%" discount ribbons, inventory stock limits, and highly visible "Sold Out" overlays to drive urgency and clarity.

• High-Impact Sales Pop-ups: The "One Week Catch Up" promotional screen demonstrates aggressive, effective LiveOps design. It utilizes bold, glowing typography, dynamic character key art, and a massive "500%" value indicator to immediately capture player attention. The layout funnels the user's eye directly to a highly visible "$4.99" purchase button, supported by clear reward item previews and active countdown timers to encourage immediate conversion.

• Scalable LiveOps Documentation: The technical breakdown sheet on the right illustrates the rigorous asset management required to sustain frequent LiveOps updates. By explicitly defining UI components, background plates, buttons, and reward icons for a bundle deal screen, the pipeline ensures that marketing and engineering teams can rapidly deploy new sales events without sacrificing visual fidelity.

< Back to Home