Xenoblade Chronicles 3 - The Fusion Arts Tutorial
Jackson Davis Herd • 7 minute read
Check out the full Figma prototype here.
Context
Monolith Soft, likely hearing the negative player feedback on Xenoblade Chronicles 2’s tutorial, made some drastic improvements to the tutorial in Xenoblade Chronicles 3 (XC3). The sentiment to the changes were positive with many calling it a massive improvement. But on August 9th Stephen Totilo (former Kotaku Editor-in-chief) tweeted about their struggle with simply understanding the Fusion Arts tutorial in XC3.
If there’s friction for an industry veteran then it’s safe to assume there’s friction for newer players. Friction increases risk of player churn and makes re-onboarding difficult. It can also skew game balance if the player decides “they’re just not gonna learn or use that mechanic“.
This disparity led me to investigate XC3 and the UX of tutorials. And it resulted in multiple iterations on the tutorial.
Tools
- Notion
- Figma
- Scrivener
- Game UI Database
- YouTube
Outcomes
The final product is a prototype built in Figma and can be viewed here. This includes the original tutorial slides rebuilt in Figma and my iterated slides.
I’ve never played XC3 or designed a tutorial, so this personal project involved a large amount of research. Thankfully the XC3 community has extensive documentation, making it easy to overanalyze the game’s systems. Combined with Game Maker’s Toolkit’s video “Can we Improve Tutorials for Complex Games?” I was able to construct a set of tutorial standards for this (and future) projects.
Convenience sample research showed the iterated slides increased understanding compared to the original slides.
Biggest Achievement: Running my own, independent research and design process. This was my first time putting together the skills I’ve cultivated without guidance. Also learning the aforementioned tutorial standards for future projects.
Biggest Lesson: Tutorials are complex and need to be discussed early and often in game design. Not doing so can result in a tutorial that makes accommodations for the designer, and not the player.
Even devout fans were concerned the latest Xenoblade would continue the trend of arduous tutorials (Reddit).
Many players were impressed with the quality and accessibility of XC3’s tutorial (Reddit).
Background
I scanned the internet for casual opinions on XC3’s tutorial system after seeing Stephen Totilo’s tweets. The majority of public feedback on XC3’s tutorials were positive. Multiple Reddit threads laud XC3’s tutorials as the best in the series.
This disparity in opinions highlighted that there are opportunities to iterate on this tutorial.
Stephen Totilo’s first tweet, exclaiming their difficulty parsing the Fusion Arts tutorial message (Twitter).
Stephen Totilo’s second tweet, poking fun at the complex explanation of the Canceling Fusion Arts tutorial message (Twitter).
Research
Xenoblade Chronicles 3
It was important I get a holistic understanding of XC3’s combat before making any changes. Thankfully the Xenoblade series has a large fanbase, and the video “Truly Understanding Combat in Xenoblade 3” from creator Enel taught me the fundamentals of XC3’s combat.
To summarize what I learned:
Your party of heroes in XC3 automatically attack (auto-attack) during combat. These characters have powerful ultimate attacks called Arts that need to be charged, via auto-attacking, before use. Arts can deal big damage, cause special effects, or both. Arts are divided into Class Arts (bottom-right) and Master Arts (bottom-left).
Truly Understanding Combat in Xenoblade 3 – Spoiler Free from YouTuber Enel was invaluable in teaching me the basics of XC3 combat.
This flowchart shows the standard attack options a player has in XC3. The Fusion Art branch is only usable after the Fusion Arts tutorial.
You can “cancel” an auto-attack into an Art attack using “Art canceling”. Art canceling is when you prematurely end the auto-attack’s animation by using an Art. This saves time, dealing damage slightly faster. But you cannot cancel an Art into another Art – at least not until you unlock Fusion Arts.
Fusion Arts require a Class Art and its symmetrical Master Art charged. Fusion Arts not only combine the damage and effects of both Arts, but can also be canceled into other Arts. This again results in faster damage output but also more strategic depth.
Game tutorials
This Fusion Arts tutorial is primarily text based. UX writing concepts like using succinct language and leading with the main point of the message are vital for this iteration.
Game Maker’s Toolkit’s (GMTK) video “Can we Improve Tutorials for Complex Games?” is a primary resource for this project. Two topics in the video are especially relevant: “leverage familiar things”, and “show don’t tell”. The former is about using pre-existing knowledge to minimize cognitive load. The latter emphasizes teaching with player action instead of talking at the player.
GMTK’s video covers a variety of tutorializing and teaching strategies, only some of which are relevant to this project.
I also wanted to study how other games handle their tutorials. I found similar tutorials in the Game UI Database, including tutorials from Resident Evil 4 (2023), The Legend of Zelda: Tears of the Kingdom, and Ni no Kuni II: Revenant Kingdom.
With these three concepts in hand (UX writing, leveraging the familiar, show don’t tell), and multiple tutorials to reference, I started making iterations.
These annotated screenshots were referenced from the Game UI Database. A truly massive repository of >53,000 screenshots, and a goldmine for anyone working in or around UI.
Iterations
Page 1 - Fusion Arts
Click and drag the arrows in the middle of the image to swap between the original tutorial slide (re-created in Figma) and my iterations.
The first slide struggles with communicating the major details of Fusion Arts. There’s also vague language used with the word “paired”. And the supporting image is useful – it’s showing the opaque connection that appears when two arts are ready to be fused – but it’s challenging to see.
My iterations include using a direct sentence structure, and replacing the word “paired” with “symmetrical”. I also included bolded words and iconography to leverage familiar concepts. My final change was to add annotations to the screenshot to visually show Fusion Arts in addition to explaining them.
Page 2 - Canceling Fusion Arts
Click and drag the arrows in the middle of the image to swap between the original tutorial slide (re-created in Figma) and my iterations.
The second slide is much more complex, and that’s shown by the length of its one sentence at 27 words. It’s a lot of information that could be separated into more sentences for easier reading. The supporting image shows the visual effect that appears when a move is cancelable. This is an important concept, but not what needs to be taught.
My first change was breaking this slide’s message into 3 sentences. I also applied the same bolded words and iconography that I used on the first slide. Again, I replaced the supporting image to show instead of tell. The image I used is a flowchart of the new combat routes available with Fusion Art canceling. It can benefit from further stylization, but it still aids the Fusion Art canceling explanation.
Next steps
The final product is a prototype built in Figma and can be viewed here. This includes the original tutorial slides rebuilt in Figma and my iterated slides.
If I were to continue work on this project then I would test these iterations with players with varying levels of Xenoblade Chronicles expertise, while compensating for order bias.
It’s a convenience sample, but friends and family of many levels of game literacy reported an easier time understanding the iterated slides compared to the originals. While this data shouldn’t be acted on, they are promising initial results.