Design Writeup (300 words)
The high-fidelity prototype for Colony Not Included brings together all prior planning—user flows, wireframes, personas, and thematic goals—into a fully visualised interactive model. Using Figma, each screen was recreated with attention to clarity, brand consistency, and mobile responsiveness. The prototype maintains ONI’s distinct sci-fi tone while prioritising readability and ease of use on small screens.
As Oxygen Not Included is a complex simulation game with deep technical systems, the companion app deliberately avoids overwhelming visuals. Instead, it uses flat UI elements, large buttons, minimal clutter, and clearly defined sections. The design is shaped around the habits of technical players who typically prefer streamlined interfaces over excessive decoration. A clean layout ensures that users can quickly access calculators, guides, and colony data during gameplay without distraction or delay.
Branding was kept consistent throughout the app. The burgundy and purple palette reflects ONI’s in-game UI, while the use of cartoon art is limited to introductory screens—providing visual flavour without encroaching on function-heavy pages. Backgrounds were darkened on internal pages to help interactive elements stand out and reduce eye strain during longer sessions. Font size, button shape, and spacing were tested for mobile friendliness.
The prototype includes over 30 linked screens, covering login/signup, home screens, user tools, and editable “Your World” content. Navigation is handled via a collapsible hamburger menu that persists across all screens, ensuring efficient movement across tools. Visual inspiration was taken directly from Klei’s official artwork [https://www.klei.com/games/oxygen-not-included] and ONI Wiki pages like the Hydrogen Vent [https://oxygennotincluded.wiki.gg/wiki/Hydrogen_Vent], both of which are referenced throughout the UI.
This prototype aims to meet the needs of both casual and expert ONI players—focusing on clarity, consistency, and a no-nonsense interface that complements rather than competes with the game itself.
Figjam
https://www.figma.com/design/zYN9HFFzonuO5DXyOi7Vzr/High-Fidelity?node-id=0-1&t=G55TkfIJVLTLm3aT-1
References
Klei Entertainment (n.d.) Oxygen Not Included – Official Game Page. Available at: https://www.klei.com/games/oxygen-not-included (Accessed: 19 May 2025).
Oxygen Not Included Wiki (n.d.) Hydrogen Vent. Available at: https://oxygennotincluded.wiki.gg/wiki/Hydrogen_Vent (Accessed: 19 May 2025).
Reddit user u/ArcticKenshi (2024) Oxygen Not Included Colony Screenshot. Available at: https://i.redd.it/5lrspc7vqcvc1.png (Accessed: 19 May 2025).
Leave a Reply