Josh Farnaby - UI Designer
Doctrina
Summary
For our Final Year Project we were tasked with creating a project based on our experience and core discipline. As I’ve had experience with educational puzzle games and my specialty is UI Design as well as my passion for helping others, I developed an educational puzzle game about teaching UI design themes like white space (micro and macro) as well as visual hierarchy (Z and F flows), through drag puzzles and additional information screens.
Roles
UI Designer, Technical UI Designer, UI Animator and UI Artist.
Team Size
1
Project Type
University module.
Software
Figma, Unreal Engine 5 and Adobe Illustrator.
Duration
20 January 2025
6 May 2025
-
Skills
UI design, UI animation, UI visual scripting and UI art.
Main Responsibilities
Challenges
- The first challenge I experienced while making Doctrina was in learning how to create Drag and Drop UI for the first time within Unreal Engine 5.
Another challenge I experienced was in learning Figma prototyping for the first time.
Development Part 1
- I started development with creating a proposal document to serve as an agreement with my supervisor on the scope of the project. This included elements like background research and deliverables.
I then began to research different games like Portal and The Witness with both serving as an inspiration on the progressive difficulty with the puzzles UI topics. Portal being an inspiration on the environment and the Witness being the inspiration for the Drag puzzles.
I would then create a puzzle design document with solutions and diagrams of each puzzle. I would then quickly sketch the different UI screens on paper. I would then develop a user flow diagram to understand the relationships between the needed UI, as seen above.
Development Part 2
- I would then recreate the paper UI screens in Figma with iterations like adding the colour yellow to help the puzzle prompt stand out. Using Figma’s prototyping tools I create their functionality to give me an idea of how they work before progressing, as seen above. I overcame the challenge learning this prototyping system by using my Unreal Engine 5 knowledge and starting slow with UI navigation.
Next, I blocked out UI in Unreal Engine 5 and create a puzzle prototype for playtesting, as seen above. I would use a tutorial from Unreal Engine to get a basis for the drag and drop UI system, helping me overcome the challenge of developing this system. To change this, I made the puzzles modular to allow for quick creation of puzzles using a puzzle number. In addition, I used forms for these playtests for interview playtesting method feedback.
Furthermore, I compiled this into a progress review.
Development Part 3
- From the playtesting I would find that I was overwhelming players with too much complicated puzzle solving, so I added tutorial puzzles to have a slowdown moment between puzzles. To continue, I polished the UI with UI animations and sound to give some nice feedback. I would add an upwards animation for the puzzle opening to add immersion of a new puzzle tab opening, as seen above. I also added some upbeat music for the main menu build up and chill puzzle solving music.
I would also develop some UI art with inviting yellow school pencil outlines to help elements stand out and cold sci-fi blues to match the sci-fi testing facility the game takes place in, as seen above.
Using asset packs from FAB for complicated assets and textures for my Unreal Engine modelling 3D art, I would bring this testing facility to life. To conclude, I compiled all of this into a final reflective report and viva presentation.
Reflection
Most Proud of:
One part I am proud of is how I was able to achieve the main intention of this project through teaching UI Design themes. This is seen through people knowing more about UI Design themes after playing than before with one playtester recognizing a Z flow in a different game a while after playing.
Another part I am proud is how I was able to achieve a consistent UI art style in from of a Sci-fi test facility. This is shown through a playtester noting this exact style being what they recognized the game as.
Any Important Skills?
UI design,
UI animation,
UI visual scripting,
UI art implementation and
UI art.
Any Changes?
To start, the first improvement I would make would be to lock the relevant additional information screens behind the right puzzles. This allows the user to feel an extra bit of positive game feel through unlocking new information with each new puzzle topic. It also prevents the user form being overwhelmed with too much information at once after the first puzzle.
Another improvement I'd make would be to make the game more accessible through the inclusion of additional settings like colour blindness modes as well as other inputs. This allows the game to be more customizable to a specific user's needs, great for making the UI Design teaching more accessible.
Final Product
Credits
Asset Packs:
Modern Home Pack: MeikWModels (2025) Modern House Pack Vol.1. Available at: https://www.fab.com/listings/47ebf30c-a2a8-45f8-b282-7c5f424ced4f
Car Dealer Pack: MeikWModels (2025) Car Dealer. Available at: https://www.fab.com/listings/06ac3ca0-175f-4331-b232-62ad1011b24e
Music:
Main Menu Music: Ivantraveso (N/A) Music for Puzzle Game. Available at: https://pixabay.com/music/video-games-music-for-puzzle-game-146738/
Puzzle Room Music: Denis-Pavlov-Music (N/A) Game Music Puzzle Strategy Arcade Technology Game. Available at: https://pixabay.com/music/video-games-game-music-puzzle-strategy-arcade-technology-301226/
Sounds from Pixabay and Freesound.org.