Skip to content
All work
HELIX

About project

HELIX2022-2023Shipped

A whole roleplay city, from the HUD to the phone in your pocket.

Helix is an open-world PC sandbox on Unreal Engine 5 where creators run their own game modes. I led the interface of its flagship roleplay city, Parallel City Online (PCO), in a team of three designers, from the design system to release, then designed the interface of Dark RP, Helix's second roleplay mode. PCO's components were reused across the platform.

  • Game UI
  • PC
  • Design System
  • Motion
Role
Lead UX/UI Designer (team of 3)
Client
Hypersonic Laboratories Inc. · Helix
Platform
Game · PC
Tools
Figma, Photoshop, LottieFiles
The city HUD in play: everything keeps to the corners, so the street stays readable.

Challenges

In PCO players choose a role, from police officer to bandit, and live a second life: they work, drive, shop, gamble, rob and arrest each other. Every activity is a system with its own screens. The interface had to turn dozens of systems into one language that reads at a glance and that the team could keep extending.

  • Dozens of systems in one mode, from the HUD and cars to police tools, mini-games and a phone
  • Read over a live 3D city, by day and by night
  • Played with keyboard and mouse: every action needs a key and a hover state
  • A team of three designers, with every layout prepared for development
The player
goes from driving to a shop or a heist in minutes, and should never relearn where the money, the map or the way back are.
Police and admins
keep order on a live server and need tools that are quick in the middle of a situation.
The developers
build the city system by system, and need every screen with its states, not a single picture.

Solutions

  1. 01

    One frame under every shop

    I put the showroom, the bar, the cinema, the gun store and the mechanic on one frame rather than each to its own logic: the wallet at the top right, the goods in the middle, every price marked with the gold LIX sign, Esc at the bottom right.

    Trade-offEach place's character has to come from its dress, which means artwork for every venue, and a dress can bend the rules: the bar's Buy drinks button glows neon, not gold.

  2. 02

    The world first, the menu second

    A place opens from the scene: at the bar a prompt offers E for Buy drinks, the menu opens over the blurred room, and a purchase ends back in the world with a small notification, so a player is never parked in a menu.

    Trade-offEvery purchase takes two steps instead of one, and the prompt only works if the level places it where people stop.

  3. 03

    The phone carries what can wait

    I put messages, the bank, stocks, insurance and events into phone apps, so the HUD keeps to what matters in the moment: health and needs, the map, money and the hotkeys. Even a call opens the phone at the edge, not over the street.

    Trade-offAnything on the phone is a few clicks further away, so the phone borrows patterns players already know from their own phones.

  4. 04

    Keys on the actions that matter

    PCO is played on a keyboard, so most main actions show their key: Enter on gold buttons such as Buy for LIX, Space for a test drive or a spin, Q and E to page through cars, parking spots and films, Esc to leave every screen.

    Trade-offKeycaps add clutter, every hint has to stay true when the controls change, and they did not reach every button: the cinema's Buy a ticket still has none.

System

Three accents carry most of the meaning

PCO stands on one kit: on most screens, dark glass panels over the scene, Outfit for the type and three accents. Every control is drawn in its states, with the hover timing written down for the developers.

Teal at work in the HUD kit: arrest progress ends in teal handcuffs, your voice chip is teal.

Accents

  • Teal#00D9B1Selected, in progress, yours
  • Gold#FFC93EMoney and the main action
  • Coral#FF5347Danger, loss and what is closed
Interface
Outfit
Dark RP
BarlowThe HUD of the second roleplay mode
Phone apps
SF Pro TextKeeps the in-game phone in iOS proportions
Even the car key is drawn state by state, down to the green or red light in answer.

HUD

The HUD keeps to the corners

The street has to stay readable, so chat, the map, voice, money and hotkeys stay at the edges, drawn in two layouts. The centre is borrowed only when play needs a decision.

Quick select on Tab borrows the centre: eight slots around the character, picked with the number keys.
A call opens the phone at the right edge, so the street and the HUD stay in view.
The minute before death takes the centre: G to accept death, U to call an ambulance.
The alternative design: the ring fills as the time runs out, shown at 50, 30 and 12 seconds.
The map sorts the city into 21 kinds of places; pick Hotel and every hotel lights up.

Character

Locked tiles say what is missing

The main menu gathers a whole character, from quests to the family and a business, in twelve tiles. A locked tile is not hidden: it says what is missing, so a new player sees what the city has to offer.

The menu prototype: each tile lights up in its own colour, and locked ones say what they await.
Statistics puts a whole character on one screen, from fines and arrests to cars, houses and skill points.
The inventory is built on dragging, with six quick slots and the weight against its limit in view.
Dragging an item reveals two drop zones: hand it to a player, or throw it on the ground.
Splitting a stack asks for the amount, with the range spelled out and Min, 50% and Max shortcuts.
Handing over asks the same way: nearby players with their distance, then the amount with quick presets.

Vehicles

The showroom puts tank and trunk above speed

A car follows a player through the whole economy, so it gets a full journey. The showroom sells on what matters in a roleplay city: tank, consumption and trunk space above the speed.

The showroom leads with tank, consumption and trunk, and pages through 256 cars with Q and E.
The catalogue filters by class with a count on every filter; hovering a car opens its card.
Parking: each spot reads as free, selected or occupied, and is rented for 24 hours.

At the mechanic

  • Body parts are labelled on the car itself; the hovered one turns into its action, Edit side skirts.
  • Tuning: each part has a rarity, a speed bar and a price, and buying asks for confirmation.
  • The same screen with the parts installed: the bars fill up and each button turns into Part installed.
  • Paint: the choice goes to the mod list with plates and kits, rather than straight to the bill.
  • Licence plates: custom text in typefaces from Bold to Horror, backgrounds and frames, with a preview on P.
  • Maintenance: repair and cleaning kits, with the equipped kit marked in teal.

Venues

Four casino games share one frame

Businesses are places first, each in its own dress. The casino runs four games on one frame, so a player who has learned roulette already knows where the bet, the balance and the timer are at blackjack.

The bar starts in the world: a prompt offers E for Buy drinks, a notification confirms the drink.
The Pink Ivory Bar in its own neon dress, with the total next to Buy drinks.
Nova Cinema sells tickets from posters, each with its length and price, paged with Q and E.

The casino: four games on one frame

  • Roulette sets the casino frame: the balance, the bet and the possible win along the bottom.
  • Blackjack keeps the balance and the bet in place and names its moves plainly: Enough, More, Double, Split.
  • Poker on the same frame: the bank and the time to choose on top, five moves below.
  • The end of a hand: the winner, the win and the combination that took it.
  • Slots: three reels, Spin on Space, and the paying combinations at the right, hidden with Q.
The gun store fits attachments and skins with seven stat bars in view; Add to weapon is gold.

Police

Police and admin screens work as tools

A police profile gathers warrants, fines, criminal history and vehicles with their plates. A fine is a paper form with a separate civilian version. A ban cannot be confirmed until the reason and the term are filled in.

The police profile: criminal history shows the role in each incident, next to warrants, fines and vehicles.
A fine is a paper form; with three of four fields filled, Charge a fine stays dashed.
Parallel Bank, where fines are paid: balances, deposit and withdraw, payments in and out in teal and red.
The admin panel: everyone online in one searchable list, and a ban that waits for reason and term.

Jobs

Work and heists are played, not waited out

An office shift is played as match-three, with the same board re-dressed for other jobs; a car door is picked in four stages. Every mini-game hides the HUD and keeps its controls and Esc in the corner.

Cloning a fingerprint: match fragments to the print against the clock, with attempts left counted below.
Lockpicking in four stages: turn with the mouse, move with A and D, a teal arc for progress.
Hotwiring: connect the ignition wires, with Gas and Power meters below.
The job comes from Werk, a freelance site on the in-game laptop, with earnings and a rating.
An office manager's shift is match-three: a score, a target of 6,000, 50 moves and three boosters.
A banking officer's task: complete the word in 15 seconds, with a hint for when you are stuck.

Phone

The phone stays close to iOS on purpose

The phone opens on P over the game and reads at a glance. Each of the thirteen apps was designed as a prototype next to its own UI kit.

Home: thirteen apps on one grid, so the phone reads as a phone and not as a menu
Messages: roleplay runs on text, so the chat had to work like a real one
Privy: rooms a crew can talk in without the city reading along
Ridinghood: stocks, because the city needed a way to make money sitting still
Events: what is on tonight, so players meet somewhere instead of nowhere
Insurance: the screen that makes dying an inconvenience rather than a reset
Chattr, the city's social network in the spirit of Twitter, has its own case study on Behance.
JobSeek, connecting employers and workers, has its own case study on Behance.
Property Pulse, for buying and renting property in the city, has its own case study on Behance.

Dark RP

A second mode gets its own HUD, in Barlow

Dark RP brings the classic roleplay format of Garry's Mod servers to Helix: jobs, an elected mayor, a police agenda. I started from a research board of existing server interfaces and gave the mode its own HUD in Barlow.

Dark RP's HUD carries the mode's rules: an election strip with a timer, the police agenda, your job.
Job tags float over players in their colours: blue for police, green for citizens, a speaker when talking.
The weapon selector opens a number slot into its list, from the gravity gun to the physics gun.

Results

Parallel City Online went from first concept to release on this system, and the same components were reused across the Helix platform.

40+unique layouts designed and prepared for development in a year of work on PCO
13 appson the in-game phone, from messages and a bank to stocks and insurance; three have their own case studies on Behance
2 modesPCO and Dark RP, each with its own HUD on the same platform
3 yearsof one interface: from the first concept of PCO to Dark RP on the same system, in a team of three designers

Reflection

  • Separating identity from function let one language serve roles with opposite goals.
  • Prototyping every state in Figma caught flows that static screens hide.
  • The narrow palette kept the world legible but made a legendary drop or a critical alert hard to push. Next time I'd budget one or two spotlight tokens.

Links

Behance
  • ChattrThe city's social network, an app on the in-game phone
  • JobSeekJobs and hiring, an app on the in-game phone
  • Property PulseBuying and renting property, an app on the in-game phone

Next

Big Arcade