Project Type:

February to June 2018

Team Members:

Developer & Programmer: Anuj Patel

UI designer:
Kevin Huynh

Overview

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.

Overview

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.

Team Member:

Developer & Programmer:
Anuj Patel

UI designer:
Kevin Huynh

Project Duration:

February to June 2018

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.

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

High-fi Interface Wireframe

High-fi Interface Wireframe

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

The Revelation

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.

What were the problems?

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.

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:
Pass

Consistency and standards:
Minor

Recognition rather than recall:
Minor

User control and freedom:
Minor

Aesthetic and minimalist design:

Minor

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.

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.

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

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

EvaluationVisibility 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

EvaluationVisibility 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.

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

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.

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.

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.

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.

High-fi

High-fi

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.

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.

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.

Follow Me

Contact Me

kev.j.huynh@gmail.com

2021 Copyright
Kevin Huynh