01 · Starting your office
ORBIT OFFICE
Choose a save, set up a small office, and begin the working day in orbit.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
← UI & UX studies
UI & UX / Space management game concept
Orbit Office.
Orbit Office is my management game concept about running an ordinary office in space. I designed the interfaces around arranging rooms, helping the crew, and dealing with zero-gravity problems, with a funny, friendly tone.
My work Flows · Wireframes · UI & visual design
Figma 20 game screens · Personal concept
A working day in orbit
Ordinary office. Extraordinary orbit.
Browse the journeys, compare each design with its wireframe, and expand either version to see the full screen.
01 · Starting your office
Choose a save
Choose a save, set up a small office, and begin the working day in orbit.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
01 · Starting your office
Create your office
Choose a save, set up a small office, and begin the working day in orbit.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
01 · Starting your office
Monday Club
Choose a save, set up a small office, and begin the working day in orbit.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
02 · Rooms & furniture
Build a room
Find a place for each room, furnish the workspaces, and keep the office connected.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
02 · Rooms & furniture
Place a workroom
Find a place for each room, furnish the workspaces, and keep the office connected.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
02 · Rooms & furniture
Furnish the workroom
Find a place for each room, furnish the workspaces, and keep the office connected.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
02 · Rooms & furniture
Workroom 01
Find a place for each room, furnish the workspaces, and keep the office connected.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
03 · Crew & supplies
Your crew
Help colleagues, balance assignments, and keep everyday supplies within reach.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
03 · Crew & supplies
Mina Park
Help colleagues, balance assignments, and keep everyday supplies within reach.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
03 · Crew & supplies
Assignments & schedules
Help colleagues, balance assignments, and keep everyday supplies within reach.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
03 · Crew & supplies
Supplies & deliveries
Help colleagues, balance assignments, and keep everyday supplies within reach.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
04 · Managing the shift
Zero-gravity hiccup
Handle interruptions, improve the office, and wrap up the shift.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
04 · Managing the shift
Office improvements
Handle interruptions, improve the office, and wrap up the shift.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
04 · Managing the shift
That’s a shift
Handle interruptions, improve the office, and wrap up the shift.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
04 · Managing the shift
Take a breather
Handle interruptions, improve the office, and wrap up the shift.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
05 · Life in the office
Busy office overview
Explore a busy office, help a colleague, respond to gravity trouble, and plan an expansion.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
05 · Life in the office
Help a colleague
Explore a busy office, help a colleague, respond to gravity trouble, and plan an expansion.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
05 · Life in the office
Gravity interruption
Explore a busy office, help a colleague, respond to gravity trouble, and plan an expansion.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
05 · Life in the office
Expand the office
Explore a busy office, help a colleague, respond to gravity trouble, and plan an expansion.
Finished
Wireframe
Expand for a closer look, or switch between the finished mock and its UI-only wireframe.
The design decisions
Make the unusual feel everyday.
The office is familiar. The setting is not. I used warm materials, readable controls, and small moments of humor to make space management feel approachable.
Keep the office in view
A compact status bar and contextual side panels leave room for the crew and their work. Close-up room views help players place furniture and understand what needs attention.
Give each task its own scene
Save records, crew conversations, floating equipment, and office expansion use purpose-built illustrations. The architecture and employee suits stay consistent across those views.
Build a shared control language
Cream console surfaces, violet frames, and gold primary actions connect the screens. Labels, controls, and wellbeing meters remain editable over separate artwork.
Personal game UI concept. This project presents 20 finished screens and their matching wireframes. The illustrations were generated and art-directed for the interface layouts; these are design mockups, not a released game.
Explore in Figma
Wireframes & flows.
Editable UI-only wireframes, organized in the same sequence as the finished mocks. Open the Figma file to inspect the editable layouts.
Explore in Figma
The finished screens.
The 20 finished screens, with editable UI and separate illustrated artwork. Open the Figma file to inspect the editable layouts.