Getting to work

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.

Click image to view more

Design System (Original)

In here this was my original design system that contain the Icons, Colour Palette, and Typography to be sent off to the developer.

The Revelation

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.

What were the problems?
‍

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. 

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

Overview

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.

Evaluation

Visibility of system status
Minor  

Consistency and standards
Fail  

Recognition rather than recall
Minor  

User control and freedom
Minor

Aesthetic and minimalist design
Minor

Overview

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.

Evaluation

Visibility of system status
Minor  

Consistency and standards
Fail  

Recognition rather than recall
Minor  

User control and freedom
Pass

Aesthetic and minimalist design
Minor

Overview

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.

Revise Solutions

Low-fi

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.

Click image to view more

Design System (New)

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. 

Click image to view more

What was Learned?

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.