top of page

Runes Of Legacy

Intuitive Upgrade UI

Let's Teach Without Telling

During playtesting it was coming up that players did not understand how upgrading their spells worked. I took ownership of this problem to redesign the spell upgrade UI in a way that removed the confusion.

About
Runes of Legacy

Runes of Legacy is a 10 person team academic 8-month project where I served a UI/UX and Level Designer. Every design choice was made with the intent to support the pillars Powerful Warlock, Meaningful Decisions, and Exploitable Encounters.

Project Specs

Engine: Unity 2021.1.10

Duration: 8 weeks

10 Person Team Student Project
 

Identifying the Problem

Issues:

Players are very confused by the spell upgrade system. Playtest results show that players don't know what upgrades do (comments wondering how the upgrade worked or 'if that did anything') or how they are applied (testing out left click when a right click upgrade was chosen).

Where the menu is failing:

  • Some players do not know upgrades apply to one, not both of their abilities

  • Most players experience confusion about when an upgrade takes effect

  • Players do not know what upgrades they already have (this information is not currently logged in a visible place)

  • To compare upgrades, players must move their selection between those upgrades presented and remember what upgrades do

  • The menu does not currently support the Narrative Designer's goal to include lore about the upgrades

  • The menu does not support the system need of four upgrade options

Problem Statement:

Create a Spell Upgrade Menu that new players can understand intuitively. 

What we're working with

The culprit UI confusing everyone.

Completion Criteria

  • Four upgrade options are presented to the player

    • This is a change made by the System Designer that should be reflected in the new UI​

  • New players understand two upgrades are for their melee ability and two for their range ability

  • *New players understand they can only have one upgrade

  • *New players have an understanding of what the upgrade does

  • Players are easily able read unique lore about each upgrade

  • *Players can easily compare upgrades

  • *Icons should convey what element a spell upgrade is to the player

​

*These elements support the Game Pillar "Meaningful Choices". The choice is not meaningful if the player doesn't have a full idea of the choice they are making and the impact on how it can support their playstyle.

Wireframe Passes in Figma

My process for starting out was collaborative with another designer at a white board. I drew out various layouts and we discussed their merits before I moved to building out proper wireframes in figma.

ListLayout.png

Pros:

  • Hiearchy can be randomized so that no preference is given to the melee or ranged ability

  • Has the most room of all the wireframes for upgrade description text

Cons:

  • At a glance the player cannot determine what upgrades are for their melee and what are for their range

    • some players may miss the icon (small white box, upper right of the option boxes) entirely- needs tested​

  • No place for past upgrades

ChunkedListsIteration.png

Pros:

  • With the left box denoting melee or ranged, this chunking will allow the player to easily tell which ability goes where

  • Has a fair amount of room for upgrade description text

Cons:

  • This layout creates a hierarchy where either the melee or the ranged ability is physically 'above' the other

  • No place for past upgrades

ChunkedLists.png

The above, but now with slots for past upgrades to be shown. These can use a tooltip to show the past description and title on mouse over. At this point, however, I'm still unhappy with the con list.

SeperatedLayout.png

Pros:

  • Now the left column is for melee and the right for range. Players will still start on the left but this feels more balanced than the stacked version.

  • We also keep the chunking here for the player to assess at a glance which upgrade goes with which. With the left box denoting melee or ranged, this chunking will allow the player to easily tell which ability goes where

  • Has a fair amount of room for upgrade description text

Cons:

  • This layout creates a hierarchy where either the melee or the ranged ability is physically 'above' the other

  • No place for past upgrades

NormalLayout.png

Testing out reducing the gap to chunk the upgrades together while still keeping the column upgrade hierarchy (left will be range, right will be melee, as left click is range and right click is melee)

The iteration where all choices are chunked does not have as strong connection to which ability it is for. However, this can be made clear as soon as the player selects or hovers over a selection as this can temporarily fill in the slot it would take if the player accepts the upgrade.

This also lets us draw attention to the changing flavor text by only having flavor text visible when the player is considering a specific upgrade.

This method also provides a nice amount of room for description text. Descriptions need to be concise and easy to compare, by limiting the room we are forced to follow these rules more closely.

NormalLayout.png
ChoiceHighlighted.png

Motion Design

Once I built out the new menu in engine and it was tested to confirm it had successfully met our goals it was time for me to begin planning out the motion design.

​

The pillar used as a guiding light for the design would be "Powerful Warlock". To the team, this means it should have a strength and sureness to it, as well as a magical feel.

To start, I brainstormed with the team potential transitions that felt strong, magical, or both to see what excited people the most.

Strong:

  • Sliding fully into frame- perhaps knocking around dust particles

  • The menu "CLANGS" into place

  • Cool, dark colors

​

Magical

  • Lots of fades

  • Cloud of smoke transitions

  • A tomb of spells appears before you

    • The transition out could be it burning away​

  • A twisting rune is the menu

  • The menu is full of dark magic as the background

​

Strong and Magical

  • The menu appears from a burst of flame

  • The menu filters into view like the rune magic does in the game

  • Things move faster, "if you blink you miss it"

Narrowing it Down

We have some good ideas on the list from everyone so now I can take them and see which ones are most suitable to be implemented as well as plan out how I want to draw the player's eye through the menu.

For the past two years anytime I'm set to work on motion design, I always go and watch the clip starting at 8:19 from this video "So You Wanna Make Games?? | Episode 9: User Interface Design"

I always find myself coming back to the video because the motion design in all the examples feels so good. I get a giddy feeling everytime. The "Intention" clip (8:34) is what I really wanted to bring home with the spell upgrade menu.

Here's the order I want players to notice things:

  1. Title (Manifest your power)

  2. Upgrades

  3. Attention back up to Melee and Range spell icons

  4. Return to Upgrades

​

After talking more with tech, we decide to focus on slides and fades to create a very clean entrance and exit. The particle effects or magical element effects would be cool, but getting the style right with no artists would be challenging. 

Sketching it Out

I've worked with masks and transitions prior to this project. Alex, one of our programers, was interested in learning about how they worked so after I sketched them out I worked alongside him to implement them in the engine.

NormalLayout_MotionDesign.png

  1. First, the menu background will slide in from above. To make this feel better it should slow down as it approaches the bottom. While this is happening a black fade will darken the rest of the screen to transition the player into 'upgrade mode'.

  2. The 2nd trigger will start once the menu has almost reached its resting place. This will have the white "Manifest your power" menu title and its underline fade and transition in starting from the center and spreading either direction. At the same time, the continue button will begin its fade, but this will be far more subtle to avoid drawing the eye down.

  3. Now we can draw the elements in. While the upgrade selections will start first, they'll be the last to finish in order to be where the players eye ends up after all the movement is complete. The spell and slots will follow shortly after to allow the eye to bounce between the two elements while they come in.

    1. The transitions here will include the spell icons and slots being revealed in a diagonal direction that points towards the upgrade selection.

    2. The upgrade selections will all start their slide from the middle and slide into the left, expanding right- similar to how the mask will be implemented on the menu title.

And at normal speed:

The Exit

Since we're using fades and slides it makes sense that the exit should also do so. Because the menu is meant to be 'strong' I decided that all the elements should leave at once rather than having a hierarchy to exit like the entrance.

A fade-out seems less strong the sliding off the screen and this should be definitive. Afterall, our warlock has just chosen a powerful upgrade.

This leaves sliding up, the way the menu came or sliding down as though it is continuing off.

I choose to slide the menu up and out because this is the direction the player needs to move. Would they move backward if I didn't do this? That's unlikely since it would mean backtracking to nothing, but I like the idea of this motion leading up to the unknown and serving as a quiet nudge to continue exploring that direction.

Before and After Upgrade UX

This is certainly a huge step up in the communication department as far as the UI goes, but I was also able to address the UX of this moment for the player. You'll notice that the rune the player interacts with has some different behavior in the before video than in our fresh new UI look video. I was also responsible for drawing this out, and since these decisions were also addressing the player confusion over upgrades I'll include a quick overview of that process as well.

Changes and Why to the UX

  • I created a particle effect burst of dark magic from the rune when you interact with it

    • This is to bring home the narrative idea that you are draining power from the dungeon​

  • I have the rune fade away after the menu disappears to a gray, burnt marking on the floor

    • This also is in support of the narrative idea that you are draining power from the dungeon​

  • I worked with tech to have a skyrim inspired "the power goes into you" as you walk away from the rune

    • This is an extra sign to the player that says 'upgrades take effect immediately and to support that pillar of making the player feel like they are a powerful warlock​

​

With these changes, we're able to step away from the boring low interaction of the initial state into one where the player gets to witness their effect on the dungeon and the growth of their own power.

bottom of page