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.
February to June 2018
Developer & Programmer: Anuj Patel
UI designer:
Kevin Huynh
February to June 2018
Before bucketing down and designing the Interface, I had do some research on how RPG interface are layout. Depending on the type of rpg they can range between simple or complex. by doing my research I would have reference and understanding of functionally and visual, when i start to design.
UI dashboards consist of: Main page, Roster Dashboard, Character Dashboard, and Award Dashboard.
Once the Low-fi design was approved, 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 editor dashboard, from that help wanted signs or bulletin board to help fit the theme, but give the user a familiar layout.
In here this was my original design system that contain the Icons, Colour Palette, and Typography to be sent off to the developer.
When I meant by Revelation because a month later, I attended the UX Design program at Humber College. At the program, they taught me a lot of the design process that went into UX design under the user, and user testing was two many things I learn to help me be a better designer. After I graduated from the program, I went back to have another look at UI design and realized there was a lot of improvement need to be done.
So I decided to take another crack at it.
Before making does new changes, I had to identify what was the problem that made the interface not intuitive. The best approach was to conduct a Heuristic Evaluation.
Visibility of system status
Pass
Consistency and standards
Minor
Recognition rather than recall
Minor
User control and freedom
Minor
Aesthetic and minimalist design
Minor
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
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.
In the low-fi, I started with redesign the UI interface with design commonly used in an RPG layout.
Layout Improvements:
Compare to the original UI design had to be redesign, so it did not feel cumbersome and improve the flow
of 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 that can be use to assemble or build any number of applications." On the first attempt, I did not fully know how to approach it, this resulted in a lack of information and direction. On the second attempt, I learned to properly structure 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 in redoing my old design was a good exercise because it allowed me to assess my design skills and what mistakes I made. Since this was one of my earlier works, it was an opportunity to apply the teaching I learned from the User's experiences program from Humber. I learned to design how a user would interact with the interface and learn to build an effective design system. I also learned that heuristic evaluation helps spot and reduce the amount of error before preparing user testing. All have help learned to be a better designer.
© 2020 Copyright Kevin Huynh
