The UI design was a collaborative project with a video game developer from my other projects. I was in charge of designing the UI interface for a "TRPG" (tactical role-playing game) that would houses a wide range of information into an intuitive system with ease for the player. However, after completion, I decided to redesign it.
Why did I choose to redo my designs?
Well...., being it was one of my early UI work, I wasn't as experienced at the time. After graduating from the User's experiences program at Humber college, I wanted to put the knowledge I learned to the test.
What will this go over?
This Project will go through the original design in how I first started out and then roll over to the redesign and the changes made.
The UI design was a collaborative project with the small video game developer form my other projects, expect this time, I was a task to design a UI interface for a "TRPG"
(tactical role-playing game).
The challenge was to help construct an interface that houses a wide range of information into an intuitive system for the user to custom the character status with ease. However, after completing the project I decided redesign it.
Why I chose to redo my designs?
Well...., Being as one of my early UI work, I wasn't as experienced at the time in my early career. After graduating from the User's experiences program at Humber college, I wanted to put the knowledge I learned to the test.
What will this go over?
In this Project will go over my old process in how i first started out and then roll over to my new process and the changes that were made.
Before bucketing down, I had to do a bit of research on the layout of how are the RPG interfaces designed. Depending on the type of RPG the interface can range from simple or complex by doing so, I would have a good understanding of the functionally and visually.
UI dashboards consist of:
- The main page
- Roster Dashboard
- Character Dashboard
- Award Dashboard
Before bucketing down, I had to do a bit of research on the layout of how are the RPG interfaces designed. Depending on the type of RPG the interface can range from simple or complex by doing so, I would have a good understanding of the functionally and visually.
UI dashboards consist of:
- The main page
- Roster Dashboard
- Character Dashboard
- Award Dashboard
Once I establish a Low-fi design, I began polishing out the design and exporting the asset to send off to the developer. Since the video game was a fantasy theme, I base the character dashboard like a help wanted signs or bulletin board give a player a sense of familiarity.
Once I establish a Low-fi design, I began polishing out the design and exporting the asset to send off to the developer. Since the video game was a fantasy theme, I base the character dashboard like a help wanted signs or bulletin board give a player a sense of familiarity.
Here is my original design system that contains all visual assets for the UI design.
Before making the adjustments, I had to identify the reason why the interface was not intuitive. So the help with it, the best approach was to Conduct a Heuristic Evaluation.
What did I mean by revelation? Well, after I graduated from the UX Design program at Humber College. The program exposes me to many different design methods that went into UX design under the user, and user testing were the two valuable things taught to me. So know those methods, I went back to had another look at UI design and realized there was a lot of improvement need to be done.
Over the Award, the dashboard does provide an understandable layout of how player transfers their awards to their inventory.
However, minor phrases like “Burn” may not prob the player as a way to delete an item from their inventory.
Visibility of system status:
Pass
Consistency and standards:
Minor
Recognition rather than recall:
Minor
User control and freedom:
Minor
Aesthetic and minimalist design:
Minor
Visibility of system status:
Minor
Consistency and standards:
Fail
Recognition rather than recall:
Minor
User control and freedom:
Minor
Aesthetic and minimalist design:
Minor
The Character dashboard does layout does provide important information but lacks a bit of direction on how the player should interact. Aesthetic wise it fit the theme of the game but can cause legibility issues.
Unfamiliar phrases such as resistances, attributes could pose a challenge for the player to understand the purpose of each section and can open room for errors.
The minimalist design of the roster dashboard may be too minimalist for its design provides little direction to the player if a character has been added or removed from the Roster to the Party dashboard.
Also, the Party and Party are hard to differentiate from the Roster or Party.
Visibility of system status:
Minor
Consistency and standards:
Fail
Recognition rather than recall:
Minor
User control and freedom:
Pass
Aesthetic and minimalist design:
Minor
Visibility of system status:
Pass
Consistency and standards:
Minor
Recognition rather than recall:
Minor
User control and freedom:
Minor
Aesthetic and minimalist design:
Minor
The Award dashboard does provide clear layout on how the player can transfer award items to their inventory.
However, minor phrases like “Burn” may not prob the player they could delete an item from their inventory.
Visibility of system status:
Minor
Consistency and standards:
Fail
Recognition rather than recall:
Minor
User control and freedom:
Minor
Aesthetic and minimalist design:
Minor
The Character dashboard layout provides the information but lacks a bit of direction on how the player should interact. Aesthetic wise it fit the theme of the game but can cause legibility issues.
Some of phrase used to label each section could be unfamiliar to the player and could pose a challenge.
Visibility of system status:
Minor
Consistency and standards:
Fail
Recognition rather than recall:
Minor
User control and freedom:
Pass
Aesthetic and minimalist design:
Minor
The minimalist design of the roster dashboard may be too minimalist for its design provides little direction for the player if a character has been added or removed from the dashboard.
Also, the party and party are hard to differentiate from each other.
Visibility of system status:
Pass
Consistency and standards:
Minor
Recognition rather than recall:
Minor
User control and freedom:
Minor
Aesthetic and minimalist design:
Minor
The Award dashboard does provide a straightforward direction on how to transfers awards to over to inventory.
However, minor phrases like “Burn” does not indicated the player they could remove an item from their inventory.
Visibility of system status:
Minor
Consistency and standards:
Fail
Recognition rather than recall:
Minor
User control and freedom:
Minor
Aesthetic and minimalist design:
Minor
The Character dashboard does layout does provide important information but lacks a bit of direction on how the player should interact. Aesthetic wise it fit the theme of the game but can cause legibility issues.
Unfamiliar phrases such as resistances, attributes could pose a challenge for the player to understand the purpose of each section and can open room for errors.
Visibility of system status:
Minor
Consistency and standards:
Fail
Recognition rather than recall:
Minor
User control and freedom:
Pass
Aesthetic and minimalist design:
Minor
The minimalist design of the roster dashboard may be too minimalist for its design provides little direction to the player if a character has been added or removed from the Roster to the Party dashboard.
Also, the Party and Party are hard to differentiate from the Roster or Party.
I started with redesigning UI interface using a similar design language commonly to most RPG games to help reduce the cognitive load.
Layout Improvements: Compare to the original UI before, all the elements in the new design are less cumbersome with room to breathe, making the flow of information is easy to follow and identify.
I started with redesigning UI interface using a similar design language commonly to most RPG games to help reduce the cognitive load.
Layout Improvements: Compare to the original UI before, all the elements in the new design are less cumbersome with room to breathe, making the flow of information is easy to follow.
In the final design, legibility, Indication, and functionality had to be changed to help the player instantly understand with little explanation.
- The fonts were changed to improve legibility and to differentiate the labels.
- Changed in the colour scheme to help provide better contrast for the user to differentiate the visual elements and reduce eye stress.
- Using recognizable icons to help reduce the cognitive load and give the player more control and freedom to interact on the dashboard.
In the final design, legibility, Indication, and functionality had to be changed to help the player instantly understand with little explanation.
Fonts: The fonts were changed to improve legibility and to differentiate the labels.
Colour: Changed in the colour scheme to help provide better contrast for the user to differentiate the visual elements and reduce eye stress.
Icons: Using recognizable icons to help reduce the cognitive load and give the player more control and freedom to interact on the dashboard.
In the final design, changes were made to improve the legibility, Indication, and functionality for the player to instantly understand with little explanation.
Fonts: The fonts were changed to improve legibility and to differentiate the labels.
Colour: Changed in the colour scheme to help provide better contrast for the user to differentiate the visual elements and reduce eye stress.
Icons: Using recognizable icons will give the player help reduce the cognitive load and give the player more control and freedom to interact on the dashboard.
In the early stage of my UX/UI career, I did not know what a design system was? "It is a collection of reusable components or assets, guided by a clear standard used for assembling or building any number of applications." On the first attempt, I did not fully understand the proper approach, which resulted in a lack of information and direction. On the second attempt, I learned the correct way to structure the content using the Atomic Design methodology. Having learned to do this process properly will allow me to communicate the visual design effectively and clearly to developers.
I can say without regret that redoing my previous design was a good exercise. It allowed me to assess my design skills and an opportunity to apply the teaching I've learned from the User's experiences program from Humber. Understanding how the Users would interact with the interface help assess which were the problems and what solutions best fix them. All have helped me learned to be a better designer.
Developer & Programmer:
Anuj Patel
UI designer: Kevin Huynh
