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.
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.
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.
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
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
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.
Porting from Adobe XD to Figma
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
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
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
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
User Journey - Beta phase developement
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
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.