image 7.png
About
Initial Idea of the game: 

Reel away was a group project done for the final year pre-production assignment and I worked as a UX/UI designer and 3d artist in this video game. This page will show the progress of how the UX/UI of the game was developed and what would have been done better. 

Isometric birds-eye fishing game. Catch fish to sell and then use the money to upgrade your boat to be able to explore deeper waters and catch larger and more rare fish.

What was the process?

The game's UI was designed in Adobe XD and developed using Unity 3d Engine. 

Design Process.png

​the UX design pyramid

This image shows some terms to consider when designing the UX, but the point to keep in mind is that with cognitive psychology, a design can go from an objectively functional state to one that can provide a very good subjective feeling when used.

The UX Design Pyramid.png

Deciding the User Interface type

Non-Diegetic elements are the elements of the game that exist only for the player of the game.

Non - Diegetic UI 

Diegetic refers to the information related by the narrator and many times is comprised of characters thoughts and actions. 

Diegetic UI

Spatial UI are UI elements that are presented as part of the games 3D space but are not part of the game's world.

Spatial UI 

Meta UI is similar to diegetic UI. Both elements are justifiable as existing in the world of the game, but Meta UI exists on a 2D plane for the player, usually on their HUD. 

Meta UI

Why non-diegetic User Interface?

Reel away is more of a simulation game, which means it doesn't contain any story therefore diegetic and spatial user interface weren't necessary but the game itself is UI heavy therefore non-diegetic will be more user friendly. That why a non-diegetic interface was chosen for reel away. 

1_gJCj-wJDbfQwiioyBy4afQ.png

Understanding users: user-buckets and direct impact on product

UX design

The game UI design process started with UX wireframing. That is the stage when the designer lies the foundation of interactions and navigation. Wireframes present the set of monochrome screens to think over the layout and transitions before considering the appearance and style. No images and animations, schematic icons and basic typography – all that enables designers to discuss all the flow of interactions simply and effectively. UI design in games, whatever bright and entertaining it is intended to be, also needs that stage. Here you see some of the screens for the fishing game

UI design

Working on UI solutions, I started from color scheme options to try which one will correspond better to the team's vision of the game style. One was based on a warm colour palette including much orange and red associated with calm and fishing vibes while another used cold colors combination, mostly based on grey, belonging to the most popular among the users’ favorite colors. The graphic design assets such as diversity of fishes, boats, upgrades and the like, were also designed from scratch for the game to give it fresh and original look.

Iterate, Test, Repeat

Games change a lot during production: the team spots problems or opportunities and brainstorms ways to make it better. This eventually leads to changes in the game, and the user experience, acting as a guardian of the user experience, has to keep an eye on how to make changes that actually enhance the experience, and not harm it.

As soon as we have a playable version of the game, I begin testing it with players, checking their reactions, flagging issues to the rest of the team and proposing optimizations.

The more we test and iterate, the better the player reception is. When gameplay or an artistic aspect of the game is awesome, we get amazing feedback. 

The challenge

User Interface Type.png

I’m typically used to designing websites and mobile screens, and there were some unique differences in beginning to design UIs for a game like this.

The most obvious one is that designing for a PC is different from designing apps for touch or designing websites that allow for free-mouse movement. The difficult one is that since Reel away had fishing system, and the player should switch between boating and fishing, Both the icons must be indicated in the screen. This can cause some serious information overload if not handled properly, so I needed to tread carefully here and prioritize exactly what to show and what not to show at any given time on a screen.

A simple reference that kept coming up was Grand theft auto a popular RPG game that has to deal with similar challenges. Every time our team stumbled upon a unique design problem or wasn’t sure what to do, we constantly resorted to the infallible “What would rockstar games do?” formula to help us out.

Initial start - Adobe XD

Screenshot 2021-06-29 215344.png

Initially, mockups were in Adobe XD and exported to unity directly but during this process the assets kept duplicating themselves which populated the unity's GUI system and started to slow down the game. Due to this, I found a solution which was FIGMA. Figma was more accessible and easy to use anywhere and it was free. 

convert.png

Porting from Adobe XD to Figma

converting from a tof.png

This was the time consuming process because there was no solution to port from Adobe XD to Figma. Therefore I converted all the assets to SVG file and exported them to Figma. This was a complicated process but was successfully completed. 

Vertical Slice interface

MainMenu
MainMenu

press to zoom
Inventory
Inventory

press to zoom
MainLevel
MainLevel

press to zoom
MainMenu
MainMenu

press to zoom
1/9

The layout was changed and the design pattern was quite different from the pervious one. The design was later changed 

different type. 

• MiniMap - Minimal  minimap; the user/player can easily access it and identify the location. 

• First-person fishing - Added additional UI for new fishing mechanics.

Collected feedbacks from other teams and random users. Implemented the fixes for bugs in the next phase. 

• Pain Points 

- Need a tutorial scene for making player understand the mechanics 

Prototype User interface

Main Menu Screen 02
Main Menu Screen 02

press to zoom
Shop Menu
Shop Menu

press to zoom
About
About

press to zoom
Main Menu Screen 02
Main Menu Screen 02

press to zoom
1/9

The initial idea was to create a basic interface for the game. This helped us to implement a lot of features in the later stages.

• Main Menu - Minimalist layout and easy to use interface; Making it accessible for the players to click around all four buttons.

• Fish mechanics - UI wasn't implemented yet but the icons were made to represent the fish direction and the hook (Image 4/8)

The user experience wasn't structured but the game was playable at this stage

• Pain Points 

- Broken UI

- Improve the alignment 

- Interface wasn't userfriendly

Problems

The prototype interface wasn't user-friendly, Many playtesters were finding hard to identify the which button does what.

Solution

Created a google forms to ask feedbacks from playtesters and used those information to adjust the user experience.

Alpha interface

Menu Main
Menu Main

press to zoom
About
About

press to zoom
Manual
Manual

press to zoom
Menu Main
Menu Main

press to zoom
1/8

During this phase, entire design was changed and the layout was completely different. Which includes some of the screens like dossier, mini-map, map legend and pause menu. 

Mini Map - Added a minimap system which helped the player to locate the position 

Main Menu - Grid system main menu, this will be easier for player to identify and access

Main Level - Used more icons to make the player identify it and have smooth experience

Manual - Added manual for guiding the player throughout the game 

Options window - For graphics and audio settings

Beta interface

Reel Away 9_06_2021 1_42_34 pm
Reel Away 9_06_2021 1_42_34 pm

press to zoom
Reel Away 9_06_2021 1_43_19 pm
Reel Away 9_06_2021 1_43_19 pm

press to zoom
Reel Away 9_06_2021 1_42_40 pm
Reel Away 9_06_2021 1_42_40 pm

press to zoom
Reel Away 9_06_2021 1_42_34 pm
Reel Away 9_06_2021 1_42_34 pm

press to zoom
1/9

Beta mockup didn't have major changes from pervious one. Just few tweaks and assets were updated in the UI. 

Usertesting - Indie game showcase with team

Frame 2.png

I mapped out the emotional journey taken by both our typical users when rescheduling and tracking progress. Since rescheduling was not utilised as frequently by parents, we concluded that we should focus on redesigning the progress

tracker feature. 

User Journey - Beta phase developement

Journey map.png

User mapping helps us to create a user-friendly interface in gold production of our game. The entire UI design was changed and updated. Everything was changed. The UIs were made easy to access for players during the day and night cycle of the game. 

Gold User Interface

Loading
Loading

press to zoom
Player Stats
Player Stats

press to zoom
Rod
Rod

press to zoom
Loading
Loading

press to zoom
1/18

Entire UI was changed because of the feedback from indie game showcase. The users were having hard time to find some of the icons. Therefore all the interface was changed to grayscale color palette. 

Mini Map - Added a minimap system which helped the player to locate the position 

Main Menu - Grid system main menu, this will be easier for player to identify and access

Main Level - Used more icons to make the player identify it and have smooth experience

Manual - Added manual for guiding the player throughout the game 

Options window - For graphics and audio settings

Figma prototype

UI showcase video - Reel Away

Finally, my team's programmers integrated the UI into the game. The method taught us to keep things consistent and easy to access and utilise for programmers. ​

 

Because this was my first video game UI design job, I faced numerous problems and made numerous improvements. When we migrate this project to mobile devices, it will become more difficult. Mobile devices have different screen sizes therefore I need to generate a lot of mockups and do more user testing to find problems to solve.