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

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

High-fi Interface Wireframe

High-fi 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 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 were the problems?

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.

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

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.

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

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

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

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. 

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

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

What was Learned?

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.

Follow Me

Contact Me

kev.j.huynh@gmail.com

2021 Copyright
Kevin Huynh