Reworking the UI/UX of Demon's Souls (2009)
The "Soulsborne" series has gathered quite the cult following over the years. Between intricately woven stories and expansive biomes the series has inspired even it's own genre dubbed "souls-like" games.
FromSoftware's Sekiro: Shadows Die Twice even won game of the year.
However, anyone who has played these games knows that the UI can be clunky and difficult to navigate at times.
As of June 2020, it was announced that Demon's Souls will be re-released on the PS5. So with the games remake on the near horizon, what UI/UX improvements could be on the horizon for us?
As a thought experiment, I took it into my own hands to explore some potential improvements the remastered game could see.
Into The Unknown
Project Plan
Project Scope
I initially considered revamping the entire Demon’s Souls UI. I laid out a large list of nice to haves vs. need to haves for UI improvements. Some UI enhancements that quickly came to mind were:
- Stockpile Thomas’ item storage
- The fast travel map
- Inventory management
- Player stats and equipment comparisons
I realized very quickly what a large task this was becoming. Being the one man UI/UX agency I am, I decided to refine the scope of the project and focus on the main in-game HUD.
Purpose
I have a lifetime of enjoying video games and have combined this with my passion for UI/UX in several side projects such as this one. This type of project allows me to:
- Build my portfolio
- Attempt a GUI redesign for the first time
- Have fun digging deep into a game series that I am a huge fan of
Research
My research budget was roughly $0, so I needed to be creative with how I aggregated user feedback. However, having startup and non-profit experience, I am no stranger to running on a tight budget. I needed to be creative, scrappy, and lean.
The resources I used to uncover user pain points and include:
- User generated reviews
- Content and articles surrounding the game
- Myself! Having poured many hours into multiple playthroughs, and being a UX Designer, I have often discussed many of the game’s UI pain points.
User Persona
I wanted a persona to think back on as I recreated the UI, so I decided to use my main character as a point of reference.
Archetype:
The Hero
- Always seeking to grow in strength and improve
Demographic
- Male
- Young adult working professional
- Gamed as a kid and has for the majority of his life
- Uses gaming as a way to stay connected with friends and family
Platform
- Owns a PC and a PS4
Motivations
- Enjoys being pushed into challenging situations and experiencing the rush of finding solutions to overcome
Goals
- Becoming a stronger than the average character
- Optimizing every aspect of his weapons and armor
- Playing through the game multiple times to acquire all the items
Pains
- Lack of difficulty
- Losing unfairly due to bugs
- Poor game design
User Personas
After a lengthy multi-page brain dump on a google doc, I feel ready to tackle the main UI.
I initially was planning to revamp the entire UI, but halfway through my
Archetype:
The Hero
- Always seeking to grow in strength and improve
Demographic
- Female, 28
- Gamed as a kid and has for the majority of her life
Platform
- Owns a PC, PS4, Xbox
- Games daily for multiple hours
Motivations
- Hardcore gamer
- Enjoys being pushed into challenging situations and experiencing the reward of overcoming them
Goals
- Becoming a stronger than average character
- Optimizing every aspect of their weapons and armor
- Playing through the game multiple times
Pains
- Dislikes lack of difficulty
- Dislikes losing
Breaking Down the UI/UX
Typically, I would have booted up Adobe Illustrator or Adobe XD to start sketching, but I felt the visual complexity that comes with GUIs lended itself to using Photoshop. I had never prototyped in Photoshop, so I thought it would be an interesting experiment as well.
In Photoshop, I used a pencil-like brush tool to mark up the UI while taking notes in a Google doc. After some careful thought I began sketching up a rough first iteration of the reworked UI.
Health, mana, stamina, buffs
Health, Mana, and Stamina
The Demon’s Souls health bar is nothing too fancy.
Let it get too low and you die, the Nexus reclaims you, and you return to your last Archstone save point in ghost form.
It gets the job done, however, I wanted to think critically about how to improve it.
Pain points:
- Buffs and debuffs are lumped together which causes confusion on whether a status effect is good or bad
- Your max health is reduced by 50% when you die, and the game constantly reminds you of that, which can be frustrating as the game is punishing enough as it is.
To fix that, I decided that the new UI needed:
- Display the buffs and debuffs separately
- Give the ghost form debuff a softer look that still gave the player the information they need
Buffs and Debuffs
By visually grouping these separately, it is easier to tell whether you’re effected by a buff or debuff in the heat of combat.
Health in Ghost Form
When you die in Demon’s Souls you lose 50% of your max health. The only way to counter that is to use one of your two ring slots with a specific item (seen below)
Even as a hardcore gamer, it feels bad to be missing half of your health. My idea is too make it softer and more visually appealing by embodying the ghostly aspect of yourself in the health bar.
Now, the health bar feels more organic. However, not knowing precisely how much health you would need to heal seemed confusing.
To remedy that, I added a subtle marker on the health bar to make it clear what your max health is at the time.
After giving the bars a little more of a sheen to provide contrast against the dark and gloomy environment, we had the the final product.
Player Tendency
The small “eye” to the left of the health and mana bars tells you how evil or pure the player has been in the game.
Simply put, it’s a karma system. Harm a friendly NPC? Your player tendency goes towards evil (black).
Destroy an evil invader? Your player tendency goes towards good (white).
At times, it is extremely difficult to tell where you are truly at on the spectrum, especially on the main player interface.
For example, look below. Which do you think is good and which do you think is evil?
Pretty easy to tell!
However, let’s look at another example.
Can you tell me how evil or pure the player has been in their playthrough based on the image below?
It’s hard to tell, even for the most experienced players.
So how can we make this experience better? I mocked up a few ideas and landed on a bar that fills and drains in real time as you do evil or good actions.
With this system, the player will understand that certain actions cause the world to change around them, rather than the seemingly patternless, guess-and-check game you have to play in the current state
I also wanted to make it clear that the player version of world tendency is different form the world tendency, so I added a small player icon to notate that.
Good Versus Evil
World Tendency
Wait, didn’t we just talk about this?
Juggling these two karma systems simultaneously is a challenging task for a new and experienced player alike.
To top it off, you can only obtain certain items or trigger certain in game events if you meet specific world tendency requirements.
This system is not explained at all within the game and it is left to the player to figure out exactly how to navigate this cryptic feature, and how it will impact their playthrough.
This is all pretty typical FromSoftware and Hidetaka Miyazaki. Nothing really gets explained and it’s up to the player to lean on their intution, or the tightknit ‘Soulsborne’ community
Many times, it is somewhat unclear just how good or evil your character has been behaving as there are no notifications.
You will only know your tendency if you are constantly checking your world map or your player health bar. And even then, it happens so infrequently that it is difficult to tell whether you’ve actually moved the needle one way or the other.
How can we improve the tendency UI?
Pain points:
- Difficult to tell exactly where you lie on the spectrum of good versus evil
- Difficult to understand when an action has you going up or down on the spectrum
To fix that, I decided the new UI needed:
- A 0%-100% bar to show how good or evil your tendency is in that moment
- A visual indication to show when an action has triggered a good or evil shift
I started by roughly sketching what a combined 0%-100% scale within an Archstone could look like. I opted to not use tick markers to keep the system from feeling rigid. Going towards good or evil should feel like a gradual, fluid transition.
The engravings of wings around the Archstones inspired the addition of the demonic-looking, stone wings that jut out of either side. These are purely cosmetic.
World Tendency + Location SKetches
After I felt comfortable with the first rough iterations I dug into my asset library to move the mockups from lo-fi to hi-fi
I also wanted to visualize the way the bar would look being close to 100% (very good) and closer to 0% (very evil). I mocked up a few stages of that progression, with a gradient going from dark to light.
World Tendency + Location SKetches
I felt there needed to be micro-interactions to help the player understand that an action was deemed good or evil by the game.
For this I decided adding a visual cue of a bright glow or gloomy glow for a good and evil action respectively would be much more easy to understand, and it would feel more immersive than constantly checking the world map.
World Tendency micro-interactions
All Archstone Variants
(not including the broken giant archstone)
Spells, weapons, and items
Weapon and Spell Hotbar
In Demon’s Souls, you can cycle between 4 separate categories of items — left hand (left), right hand (right), consumables (bottom), and spells (top).
Swapping between items, spells, and even weapons is a crucial part of the game’s combat system.
For example, you may need to switch your shield to get off a quick ranged spell with a staff.
Or you may need to switch to an item on your item bar that clears the poison status effect.
And yet, it is difficult to do so without properly preparing which item is next in the queue, and even then, the player must remember which item is even there.
In the heat of a fight, it can be difficult to remember just where you put that much needed healing item. I reworked this UI by showing a queue of items that are upcoming for each slot.
Always see what item is equipped next
Since weapon slots can only have two items in queue, adding the next weapon on the top right was a simple visual queue to know what else you have equipped.
Easily Manage upcoming Spells
You can have up to 5 spells “memorized” in Demon’s Souls, so a visual reminder of all the spells you have at your arsenal will be very helpful in a pinch, rather than cycling through all five of them to find that one you need.
Item Repair Status
Another grueling mechanic in the game is the repair feature, which you have to manually check over and over.
In my opinion if there’s a
A simple status bar for your active item solves this problem.
For the next item in the queue, a superimposed 0-100% circle gauge shows the status of that item as well. This is a simple quality of life update that I think would made a huge difference in the game.
Reworked item and spell navigation
This is the full hi-fidelity iteration of how the items navigation could look in a reworked version of Demon’s Souls.
Souls
A key feature in any “Soulsbourne” game is – you guessed it – accumulating souls. Souls are the universal currency in all these games.
And yet, the soul UI simply involves a ticker that counts how many souls you’ve accumulated. That’s it.
The simplicity of it isn’t necessarily a bad thing, but I always liked how in From Software’s game of the year hit, Sekiro: Shadows Die Twice, you hit “checkpoints” of accumulated experience. Although in Demon’s Souls you don’t bank the experience (souls) like you would in Sekiro, I thought showing the player just how many levels their souls equated to would be another helpful quality of life upgrade instead of always having to make a mental note of roughly how many it will take the next time you visit the Maiden in Black who levels you up.
Reworked Soul Level Ticker
A minor rework that provides the player a bit more context in the game of how much their souls net in terms of levels.
Putting it all together
Now with each section of the UI complete, it was time to put it all together.
Before and After
A side-by-side comparison of the end product.