Side Hustle: a co-op RPG, from paper sketch to Unreal

01The setup

Six people, one summer, one game

Intervene · Distract · Manipulate: mercenaries for hire in a space colony.

Side Hustle showcase poster, the six playable characters in the game's purple, hand-illustrated style — The showcase poster: the game's cast in its hand-illustrated, purple-soaked art style.

Side Hustle is a cooperative, turn-based RPG for PC where players act as mercenaries in a futuristic space colony. It was the summer project of my Master's in Interactive Digital Media at Trinity College Dublin, created with a team of six, each of us taking on roles: game designer, level designer, game UI designer.

My primary focus was the UI design, working closely with Abhishek. We iterated on every screen through team discussions, with the guidance of our supervisors, Mads and Sam, sharpening the final outcome.

06Teammates, every hat between usTeam

02On the UI: me and AbhishekUI duo

02Supervisors: Mads & SamGuidance

01Engine: Unreal, learned on the jobBuild

01Sketches → wireframes → final screens → widgetsMe

02Research

Doing the genre homework

The project began with brainstorming sessions where the team explored concepts and landed on a turn-based RPG. To understand the genre, I analysed games like Honkai Star Rail and Pokémon, pulling out the essentials: clearly displayed stats (HP, XP, energy) and navigation you never have to think about.

Those insights fed a set of mood boards that established the game's visual language: futuristic palettes and typography that had to feel like adventure, aligned with the sci-fi theme.

Moodboard collage of turn-based RPG references: Persona 5, Miitopia, Temtem, Chrono Trigger, Fire Emblem Engage, Undertale, Deltarune, Omori — The UI moodboard: how other turn-based games display stats, menus and combat, annotated with what to steal and what to avoid.

03UX on paper

What screens does this game even need?

Before touching Figma, we mapped the whole surface of the game on flip-chart paper: combat states, menus and save slots, the overworld HUD, and the bartender's quest board. The same sessions produced our design principle (quirkiness) and the concrete rules to get there: randomness, rounded corners, squishy icons, bold capitalised type.

Whiteboard notes listing the combat screens needed: transitions, lock-in ability, in progress, victory and loss states — Combat needed four states: transition, lock-in, in-progress, and the ending (victory or loss).

Whiteboard notes mapping main menu, load and save menus, settings, overworld HUD and inventory screens — Menus, saves, settings, overworld HUD, inventory: the unglamorous screens that make a game playable.

Whiteboard notes sketching the bartender screens: quest board, quest info and store flows — The bartender's corner of the game: quest board, quest info, and the store.

Whiteboard defining the quirkiness design principle (looks different, fun, unique, expressive) achieved through randomness, rounded corners, squishy icons and bold fonts — “Quirkiness” pinned down as rules the whole team could apply, not just a vibe.

Initial hand-drawn sketch of the combat screen: character avatars, HP and stat bars, skill buttons and the attack button — The first pass at combat, drawn by hand: avatars, stats, buffs, a skills row and one big Attack button. Almost everything here survived to the final screen.

04Lo-fi in Figma

Iterating the critical screens, cheaply

Starting from the sketches, I iterated through low-fidelity variations of every critical screen in Figma. The combat screen was the pivotal one: it had to show stats and actions clearly without overwhelming anyone. And every layout had to hold up in both single-player and multiplayer. For the MVP we deliberately simplified some screens, prioritising core functionality over embellishment.

Lo-fi wireframe variations of the main combat screen exploring placements for enemy stats, player unit stats, skills and the attack button — Main combat screen: testing where enemy stats, unit stats, skills and the attack button should live.

Lo-fi wireframe variations of the overworld exploration HUD with currency, teammates, chat and map placements — Overworld exploration: currency, teammates, chat and map, arranged so multiplayer info never blocks the world.

Lo-fi wireframe of the victory screen with player avatars, XP gains, level ups and currency rewards — Victory: every player's avatar, XP, level-up and currency in one readable moment.

04 / DefeatEnd of combat

Defeat: softened with a tips section, so losing teaches something.

Two lo-fi wireframe variations of the quest board with quest thumbnails and a short quest info panel — Quest select: from a simple board with a summary strip to a split layout with a proper preview.

Two lo-fi wireframe variations of the quest information screen with chapter tabs, preview image, rewards and begin mission button — Quest information: chapter tabs, backstory, rewards, and one clear “Begin mission”.

05Final designs

Solid colours, sharp edges, sci-fi tone

The final screens use solid colour blocks, icon-based buttons and sharp-edged elements to carry the game's futuristic tone. Character icons and progress bars were designed to sit inside the narrative: purple panels, comic-book cast, one big satisfying ATTACK.

From sketch to screen: the evolution of the game UI from hand-drawn combat sketch and grey wireframes to the final in-game screens — The through-line: hand sketch, grey wireframes, final in-game screens.

Combat screen iteration, frame 147 — Twelve combat-screen iterations, scrubbable like a flipbook. Most of the arguing happened over one word: ATTACK.

Combat screen iteration, frame 148 — Twelve combat-screen iterations, scrubbable like a flipbook. Most of the arguing happened over one word: ATTACK.

Final combat screen: the party faces the Moth Mafia Boss on a train, with party health bars on the left, boss bar on top and item buttons below — The first hand sketch and the final combat screen, one on top of the other. Drag the handle to see how much of that first drawing survived.

Initial hand-drawn sketch of the combat screen — The first hand sketch and the final combat screen, one on top of the other. Drag the handle to see how much of that first drawing survived.

Final overworld screen: the saloon interior with party member health bars and currency counter overlaid — The overworld saloon: the multiplayer HUD stays in the corners so the level does the talking.

Final victory screen with all three players' portraits, XP gains and level ups — Victory: the whole party gets the spotlight, not just you.

Final defeat screen with the player portrait, lost XP and a tip box — Defeat: quieter, redder, and still handing you a tip for next time.

Final quest information screen with chapter tabs, mission preview, rewards and start button — Quest information: chapters, backstory and rewards on the bartender's board.

Final quest select screen titled Choose Your Adventure with mission thumbnails and description — Choose your adventure: the split layout from the lo-fi round, in full costume.

06Implementation

Designers don't get to stop at handoff

In the final phase I moved from design to development, building the UI as widgets in Unreal Engine. I was new to the platform, so I learned its tools and workflows on the job, translating the Figma designs into interactive elements and testing them against real gameplay. Integrating UI with a live game loop taught me more about designing for games than any static mockup could.

The combat HUD widgets running over a grey blockout level in Unreal Engine — The HUD running over a grey blockout: testing widgets before the art landed.

Unreal Engine widget editor showing the character selection widget being built — Building the character-select widget in Unreal's UMG editor.

Showcase build screenshot: a turn-based boss fight against the Ghost Boss in a dungeon, with the skills bar and attack button — The showcase build: the skills bar and stat plates, live in a boss fight.

Showcase build screenshot: the saloon overworld with the Mission Select prompt above the bartender — Press E at the bartender: the quest flow, playable.

07Reflection

What the showcase taught me

The feedback at the showcase backed the approach we'd taken, and the project gave me the full arc of game UI, from first sketch to engine build. It refined how I balance aesthetics with functionality, and it properly ignited my interest in designing interfaces for interactive media.

The six-person team standing in front of the Side Hustle posters at the Master's showcase — The team of six, in front of the posters that started as flip-chart scribbles.

Challenges

Information density in combat

Stats, skills, buffs and three teammates' health, on screen at once, without overwhelming the player. The combat screen earned its iteration count.

One UI, two modes

Every screen had to work in multiplayer and alone, which meant designing the HUD around information that might or might not be there.

A new engine, mid-project

Learning Unreal's widget system while the deadline ran meant simplifying some MVP screens deliberately: core function first, embellishment later.

Learnings

Game UI is a full-stack craft

Sketch, wireframe, visual design, then building it yourself in engine. Owning the whole arc changed how I design for anything interactive.

Principles beat taste debates

Writing “quirkiness” down as concrete rules (rounded corners, squishy icons, bold type) let six people make consistent decisions without me in the room.

Implementation feedback is design feedback

Screens that looked right in Figma changed once they ran against real gameplay. Testing in engine became part of the design loop, not a step after it.