Wild Hearts website UX/UI design case study
This design case is from my experience at
Electronic Arts
Role
Experience Designer
Industry
Gaming
Active team
Date
2023
Outcome
From teaser to comprehensive player hub
Wild Hearts was a new IP from EA Originals, inspired by Japanese mythology and centered on large-scale Kemono battles and the Karakuri crafting system. The website needed to introduce an unfamiliar world, build anticipation, and guide players from discovery through pre-order and launch within a three-month timeline. I translated the game’s depth and mechanics into an immersive, intuitive, and globally accessible digital experience by structuring the site across three strategic phases, Announce, Pre-Order, and Launch, while defining key personas spanning core fans, casual players, and media stakeholders to inform content hierarchy, navigation, and visual emphasis, ensuring clarity, accessibility, and performance at scale.
My role
I owned the end-to-end UX/UI design and front-end implementation of the Wild Hearts website, from research and information architecture through visual design, interaction design, and development.
Collaboration
I partnered with producers, designers, copywriters, QA, marketing, and SEO teams to support launch goals while building a system that could scale across live updates and localized markets.
Tools & methods
HTML, CSS, and JavaScript implemented within Adobe Experience Manager, with design and motion work in Figma, Photoshop, and After Effects
The challenge
The primary challenge was translating the depth and atmosphere of Wild Hearts into a cohesive website that functioned not only as an information hub, but as an immersive extension of the game’s world. This meant distilling a rich, mythologically inspired universe into a clear and approachable digital experience, designing intuitive navigation for a global audience with varying familiarity with hunting-style games, and differentiating a new IP within a genre dominated by established franchises. All of this had to be delivered and iterated within a three-month timeline, alongside frequent updates and cross-team dependencies. Balancing immersion, clarity, performance, and long-term scalability required careful prioritization, strong systems thinking, and close collaboration across disciplines.
The process
Research & ideation
Within a three-month timeline, I synthesized existing research, internal insights, competitive analysis, and player sentiment from comparable action RPGs to inform early UX decisions and align with marketing and studio launch goals. I defined three core personas (a dedicated player, a casual explorer, and a media stakeholder) which directly shaped content hierarchy, navigation, and progressive disclosure across all launch phases.
Exploration & conceptualization
I explored multiple layout and interaction approaches across key surfaces, including the homepage, feature sections, and pre-order flows, with a focus on translating the game’s mythological tone and mechanics into clear, engaging digital experiences. Through sketches, wireframes, and low-fidelity prototypes, I tested navigation models, storytelling approaches, and content hierarchy, sharing early concepts with stakeholders to gather feedback and refine direction.
Iteration & refinement
As designs evolved, I worked through frequent feedback loops with producers, designers, QA, and marketing to refine layout, hierarchy, typography, motion, and interaction patterns. Usability testing and cross-device reviews surfaced friction points early, allowing iteration to balance immersion with clarity while optimizing performance, accessibility, and localization readiness for both core and casual players.
Delivery & implementation
In the final phase, I translated approved designs into high-fidelity prototypes and production-ready front-end builds using HTML, CSS, and JavaScript within Adobe Experience Manager, collaborating closely with developers and content managers to ensure accurate, scalable implementation. The final delivery supported multiple launch phases, responsive layouts, and 15+ localized versions, enabling ongoing content updates while maintaining visual and interaction consistency post-launch.
Visual work & highlights
Path to adventure: the roadmap
Our design process focused on the players, ensuring every phase of the website's development aligned with their needs. After understanding our audience, we partnered with the marketing team and studio to structure the project into three clear phases. Each phase had a specific goal: sparking curiosity, driving pre-orders, and delivering an immersive experience.
Design process
The design process was where everything started to come together. I broke it down into clear phases to stay focused and aligned with the project goals.
High-fidelity prototypes and implementation
These high-fidelity prototypes were translated into production through hands-on implementation in Adobe Experience Manager (AEM), ensuring the final experience matched the intended design and interaction details.
Reflection & impact
This project required leading the design of an immersive, scalable experience under tight timelines while launching a new IP to a global audience. From the start, I had to make deliberate trade-offs between visual ambition, performance, and clarity, grounding creative decisions in early research, accessibility requirements, and close cross-functional alignment to ensure we could ship confidently. One of the core challenges was balancing world-building depth with usability. Rather than exposing everything at once, I chose a phased experience strategy (Announce, Pre-Order, and Launch) prioritizing progressive disclosure over completeness. Similarly, while interactive storytelling and rotating Kemono visuals helped establish a distinct identity, they were carefully scoped and optimized to avoid performance regressions, especially on lower-powered devices. A modular, localization-ready system supported 15+ languages, trading bespoke layouts for consistency and long-term scalability. The result was an experience that increased engagement, supported pre-order goals, and received strong feedback for immersion and clarity, while remaining performant and accessible across regions. More importantly, this project reinforced a core principle of my practice: strong experience design is defined by thoughtful trade-offs, knowing when to push ambition, when to simplify, and how to turn complexity into clarity through systems, iteration, and collaboration.
