The World Ends With You

Prioritize at-a-glance decision making while giving the player additional tools to explore their inventory in this classic Nintendo DS game

Overview

This theoretical case study covers a redesign of the pin management screens in the video game The World Ends With You, and was done as part of a mentorship with the studio UX is Fine.

This project was a great experience to take my existing UX design skills and apply them in the video game space, exploring the differences between designing for responsive web experiences vs the medium of video games.

Project Details

Studio: UX is Fine, as part of a mentorship program

Team:

  • Just me, as UX Designer

Key Deliverables:

  • Game loops

  • User flows

  • Landscape audit

  • Wireframes

  • Prototype

The Challenge

Take your favorite video game and improve its UX.

Don’t have much time?

Watch a quick 5 minute overview of how the project went or check out the final prototype.

Or…

Keep reading on to learn more about my process and this project

What is The World Ends With You?

The World Ends With You (TWEWY) is an action role-playing game for the Nintendo DS first released in 2007.

It follows a group of recently deceased teenagers in an alternate version of Shibuya in Tokyo, who are competing in the Reaper’s Game for a chance to return to life. 

I picked this game for my case study because I personally consider it to be a defining game of the DS era.

Game Loops in The World Ends With You

I started my explorations of the player experience in The World Ends With You by mapping out the major game loops.

As an an action rpg, TWEWY is primarily narratively driven. The player receives challenges each story chapter that require them to make full use of the game’s various subsystems like combat, exploration, acquiring various items, equipping gear with the right properties, and completing environmental puzzles.

I then focused on the sub-systems players utilize to make their characters more powerful.

These subsystems include

  • equipping gear

  • altering current fashion trends that impact gear performance

  • consuming food to permanently improve their stats, and

  • collecting and evolving new pins

Of these subsystems, I thought the pin management system was the best space to explore for UX improvements as it involved the most complex decision making across many play sessions.

But more on that in a second, let’s take a step back first and explain…

What are pins? Why are they so important?

In The World Ends With You, pins are the game’s combat equipment, loot, and the player’s primary source of income. Pins also evolve based on a complex system involving 3 different types of experience points.

With over 300 different pins, the acquisition and evolution of pins is a significant portion of the game’s collection mechanic and the endgame.

Pins are managed and equipped in their own screen one CTA down from the main menu. Here I have converted the existing screens into wires for easy reference and comparison to the updated screens later on.

Now that we have an understanding of this subsystem and where it fits into the game, let’s dive into the work I did to update and enhance it…

Points of Friction, User Flows, and Areas of Opportunity

My initial audit of the pin management system was focused on identifying any immediate points of inaccessibility or friction. I also looked at systems related to pin management - such as combat and the game’s bestiary/loot tracker.

I found several issues including:

  • points of high cognitive load between multiple scenes and across play sessions

  • unclear definitions for pin properties

  • places where information is conveyed only via color (a significant accessibility concern)

I even discovered that the game has an elemental system that is not prominently displayed to the point that I, a veteran player of several hundred hours, had no idea it even existed!

Here are a few example screens from my audit:

I then moved on to analyzing decision flows involving pins, and how and when these moments change as they occur throughout the player experience. 

I broke the player journey down into three main phases - Early, Mid-game, and Endgame - and looked at how the player’s choice of what to equip changes and requires different kinds of support.

My major takeaways from this early research were:

What TWEWY does well:

  • Eye-catching visuals make for easy scanability

  • Multiple pin decks and some limited sort options support some management and planning

  • Acquisition momentum lets players get used to managing a small amount of pins and slowly build up to a large inventory

Weaknesses:

  • Difficult to pick pins with certain properties (like ability, relative strength, or element) out of the group

  • Players often rely on handwritten notes outside of the game which can be lost

Opportunities:

  • Help players track useful information without losing a sense of discovery

  • Clarify stats for easier understanding

  • Additional tools to enable power users and completionists to better understand their pin collection

Landscape Audit

My next step was to conduct a landscape audit for inspiration in how other video games handled these challenges.

Since The World Ends With You pin system is somewhat unique, I looked at games of different genres but with similar aspects such as:

  • planning across multiple play sessions

  • high volume of collectibles to obtain, organize, and evolve

  • wide variety of players spanning casual story-driven players and end-game power users

The Pokemon franchise was a clear choice as Pokemon evolve depending on different conditions, have a wide variety to discover and collect, and players often make plans across multiple game sessions.

The Pokemon series does an excellent job of balancing the interests of casual players against the needs of the power user.

Individual screens are quite light and digestible, but features like the Box Management have dense tools like search to find specific Pokemon in the eventual high volume.

For inventories that manage large volumes of collectibles, I looked at looter shooters like Borderlands, deck builders like Hearthstone and Legends of Runeterra, and gacha games like Genshin Impact.

These games use robust tools like sort, search, sub-categories and filtering to allow players to reduce the amount of material on the screen, aiding decision making by helping the user focus on a refined set of choices.

My general takeaways from the landscape audit were:

  • Distribute stats across more pages with lighter load per page, keeping critical info up front and letting those less often checked stay back

  • Simplify the full inventory view but provide additional tools to manage at a high power user level

  • Leverage large visible elements and let many pins be visible at once

Updated Flows & Wires

I took all of these discoveries into consideration when updating the flows and wires for the pin inventory system. These new flows call out where I’m adding new features or support for previous points of friction.

For the updated wires I’ve both refreshed current screens and added new features, and to make it easier to navigate I’ve provided the original screens for comparison.

Top Screen - Updates

For the top screen I wanted to focus on both decreasing the density of data on each screen while also making all the information more easily scanable.

The first tab has the high level information with the new additions of elemental type and a readout of the previously color-only PP bar indicator. I’ve pushed less commonly needed information like stats to later pages, and added the ability to track discovered evolution paths.

Bottom Screen - Updates

For the bottom screen, where the pins are managed and organized, I wanted to keep the primary focus on the large visual images of each pin. I pulled the sell function away from the location of equipped pins to decrease the likelihood of accidentally selling a pin, and made that panel collapsible.

Updated Sort Function

The previous sort only allowed sorting by pin number and by “psych” , a term that does not seem clearly tied to any specific properties of a pin.

I’ve replaced it with a sort by “class” - a clearly displayed grade each pin gets for their relative power - as well as adding a sort by sell value.

New Features

Newly acquired pins now have a New indicator until they’ve been selected by the user, making it easy to see what hasn’t been viewed yet.

For any pin, a player may click on the stamp icon and choose one of several marks to attach to it. The options picked are shape and color independent, and their meaning and use are left up to the user. The choice of four are intended to suggest the idea of a “favorite” as well as 3 options color coded to the different types of PP a player may want to use to level them.

New Feature - Marking

The second feature is a visual search inspired by the Pokemon series. It allows for a wide variety in parameters, and then filters the results by fading out all pins but the desired matches. This way the users aren’t taken away to a separate search results page, but can still easily discern their matches amidst the large volume of pins.

New Feature - Search

Prototype

Finally, I also converted these wires into a prototype, which you can check out here.

Summary

This work was a great project to see the similarities and differences between video game UX and UX outside of the industry. Working with circular game loops as opposed to user journeys means taking into account how a player’s decision making evolves over time, approaching the same decision from a changing perspective.

I enjoyed the mentorship and appreciated all the support and advice from the UX is Fine team!