Redesigning Systems and Adobe XD Wire Frames to The Final Product

This blog will be discussing my experience in learning Adobe XD along with the High-Fidelity Wireframes that I had created in preparation for the team UI/UX pitch to Incendiary blue that is coming up next week. Along with talking about Adobe XD I first have to explain a redesign of our crystal/magic system that took place at this moment in time and I will be going into detail on the "why" this system changed and how we hoped this would improve the game.

The Crystal System Redesign

As mentioned in a previous blog, the original system that I had designed for the implementation of the crystal system within our project was that it would act like an "omnitrix" or "watch" where the player would twist an object on their hand to select their powers, The team really wanted to work with this idea but upon going into Unreal Engine our programmers quickly realised that the system might have proven to be too much at this time to develop as it seemed to be causing a lot of problems at the beginning of development.

So I went to the team and we all sat down and I asked Josh Davidson and Holly Boyle our two programmers on our team exactly what was causing issues and what they thought wasn't working with the system. I wanted to take on this information so that when it came to designing a new system I knew what areas of programming to avoid so that these issues wouldn't arise again.

After a couple of days of brainstorming I came to the team with the idea of keeping the idea of having the system be contained to the players hand but I tried to simplify the actions the player had to take in order to select their magic while sticking to the information I had been given by the team programmers. This then lead to the idea of having elemental crystals attached to the players hand, these crystals could then be picked up by the player and placed into a magic circle above the players hand.

This idea proved to be a hit with the team, most importantly the programmers felt that this was a much more feasible task than the last idea, Which was exactly what I wanted. I had also done some more additional research into the intrinsic laws of UX design (Here) as I wanted to have a stronger reasoning behind certain design decisions. Looking into all the laws of UX proved to be extremely beneficial as I was able to focus on aiming to stick to these laws when designing this new system so that it would be an enjoyable User Experience.

UX Flow Diagram

Before I could start into creating High Fidelity wireframes I had to make sure that the team had an understanding of the players journey from booting up the game to where every action they could take would lead them to before entering the first level within the project. I outline what happens when the player presses the start button, options, exit all of which go into the detail of sound cues, player actions and pseudo-code.

I drew this out on Miro so that the team and myself could refer back to it when we needed. But I felt that this was a really important piece of documentation to have going into developing the high fidelity wireframes.

Learning Adobe XD

Going into this project as a UI/UX designer I had known of Adobe XD being something of Industry standard along with applications such as Sketch and Figma however, I had no experience with such applications until we were given a workshop by our lecturer Sabrina, Where we spent the majority of a day going through a crash course of Adobe XD. I felt that I was able to grasp the core concepts of the application quickly to a degree where I could produce high fidelity wireframes for the team to work off of.

Now when it came to first starting the first high fidelity wireframes for our project I honestly struggled for a good few days with trying to translate designing in Adobe XD to a players perspective in VR. My head just couldn't wrap its way around how to lay it out within XD. So we were back to square one and I went back to my lecturer and asked for some advice on how they might approach it. This talk started to clear things up for me however, I still wasn't as confident as I hoped I would be but I took my first stab at creating a high fidelity wireframe for our main menu start button. (Seen Above)

While this was a good start for my first attempt, I couldn't shake the feeling that it just wasn't up to scratch for what I would need to present to Incendiary Blue in the weeks to follow, but nevertheless this was a good starting point.

Starting to Find Footing In Adobe XD

After some back and forth and experimenting with Adobe XD I was still struggling to nail down creating wireframes for a first person point of view. Until I realised that my key problem was that I had no references to work from, until I had the genius moment where I realised I am constantly looking for a first person point of view in real life. (Yes this really happened, I remembered how my eyes work) and with that revelation I decided to take pictures from my point of view to use as reference.

High Fidelity Wireframes

So with the new strategy of using real life images as references I got to work and started into the high fidelity wireframes. All of which are going to be detailed below, along with a brief explanation of what is being shown off.

Main Menu - Start Button (Hi-Fi)

As this was the first area I tried to tackle in my first attempts when using Adobe XD I felt it only right that I started here when really trying to make these high fidelity wireframes. After using the references of my own perspective it made it so much easier to sit down and go through step by step in each wireframe. The above images are what the player would see upon pressing the start button.

I wanted to make sure that I went into detail showing the step by step process, for each action the player would take in pressing the button, this was purely so that the team would have a good understanding of how this mechanic should work from start to finish.

Main Menu - Options Menu (Hi-Fi)

For the options menu I wanted to have it so that if the player pulled a lever then the options menu would come down from above towards the player, They would then be able to select from a few different buttons that would each enable or disable a certain in game setting.

Main Menu - Options Menu In Game

During development it turned out that having the lever as a way to control the options menu turned out to suffer from the same problems as the original magic system in that it was becoming too problematic to implement into the project, even though the VR expansion plugin made this easier for us, we couldn't seem to get it working properly.

So we just decided to go for a much more simplistic take on the menu in just having a static menu with buttons that the player could press. While it wasn't as fancy as the original concept it got the job done and I have to say Josh Davidson did a fantastic job in implementing the whole main menu into the world.

Selecting Magic (Hi-Fi)

As previously mentioned the magic system had to be completely reworked and the above images are the first part of the new system in which the player has each elemental crystal on their hand that they can select.

There would be a holographic image of a crystal that would appear as soon as the player picked up the crystal to give affordance to the player that the crystal is supposed to go into that slot, almost like a puzzle piece.

The player would then expend the crystal over time with use and it would eventually drain of its power. To which the player has to return the crystal to its slot on their own hand where it would recharge.

Recharging Crystals (Hi-Fi)

These Wireframes show how the magic system recharges over some time. The player would be alerted to the crystal being fully recharged with haptic feedback and particle effects. This would provide feedback to the player to let them know that the cooldown period had expired without them having to look at their hand.

Force grabbing Sword (Hi-Fi)

A good user experience in VR is one that doesn't exert or make the player feel uncomfortable and a key trope within VR to combat this is to have some form of "Force Grab" ability where players don't have to fully bend down to pick up an item. We took this into consideration when developing as we know that not every person that would play our game would have full room scale VR and with a limited space. Little features like this really add to make the overall experience more enjoyable.

This is the first version we had of the force grab in action and while it does differ in some areas from the initial wireframes. Such as the change of having the whole sword highlight into a red material as opposed to the symbol that is present in the wireframe.

While we did experiment with the idea proposed in the wireframe it became evident that the UI element could become unclear when it blended in with the environment, so after some discussion with programmers this Holly made it so that when the player hovered over the sword from a difference it was highlighted in red which worked much better in the game world.

Enhancing weapons (Hi-Fi)

One of the ideas that came about from the initial concept art of the sword the player would use was the idea of inserting a crustal into the middle of the sword to imbue it with a certain element type, which would deal more damage and would drain the energy out of the crystal similar to if the player was just the crystal normally.

When I designed this I felt that it work work extremely well to enhance gameplay as it would give player agency and choice in whether they would like to enhance their melee attacks when they felt it would be more beneficial than using ranged magic.

Above shows how the infusion system might look in game and sadly while this idea was personally one of my favourites of those that we had developed as a team. It wasn't meant to be as due to some development constraints and having to prioritise certain other areas of development this mechanic had to be cut from the game.

Player Healthbar (Hi-Fi)

Again mentioned in the concept art blog but the idea of having the players Healthbar be wrapped around their wrist. The players Health would also change colour depending on how depleted their health is. Finally they would also have a rhythmic heartbeat haptic feedback when the players health got below 25% as well as adding a glow effect. Again similar to the haptic feedback it would provide the player with a notification without having to look at thier wrist.

(An early development video showcasing how this health bar would look in game on the player character)

Enemy Health bars- Damaging Enemies (Hi-Fi)

When the player attacks an enemy, I wanted a damage counter to appear within the game world so that the player would be able to see exactly how much damage they have done to the enemy.

(Video of Holly Boyles AI testing) -

Enemy Health bars- Example Health (Hi-Fi)

The enemy health bar would work in a very similar way to the players it would progressively change colours depending on how low the enemies health was.

Map System (Hi-Fi)

One of the Ideas that I had for the players navigation throughout the level was to have a diegetic map that the players could pull out from behind their shoulder. This map would update the players location depending on what area of the level they were in.

I also thought that it could be useful as a way to allow the player to see the game controls without having to open a menu, these controls would be on the other side of the map. it was just another way I thought we could work around having a fully diegetic UI. However, this mechanic much like the sword infusion had to be scrapped again due to development constraints.

Overall getting to learn Adobe XD has been an absolute blast and it has been a real learning curve at times for me. It took ages to finally understand exactly how I was going to approach these wireframes but I am extremely pleased with how they turned out Learning Adobe XD is a skill I am so glad to have learnt in preparation for our UI/UX pitch in the coming weeks as I will take it forward to my UX journey.