Blog

Design Writeup (300 words)

Oxygen Not Included (ONI) is a complex colony simulation game where players manage duplicants in a subterranean environment, balancing oxygen, heat, waste, power, and survival. Although its simulation depth is a major strength, it can quickly become overwhelming, especially for beginners. The game offers little in the way of in-game guidance once the tutorial ends, which has resulted in a widespread dependence on community-made tools, spreadsheets, and wikis. However, this information is fragmented, inconsistent, and often difficult to navigate—especially on mobile.

This project proposes a mobile-first, user-friendly companion app designed to consolidate key ONI tools into a single, cohesive experience. The app is designed for newcomers and experienced players, providing guidance, calculators, tips, and contextual recommendations that adapt to the player’s in-game world.

The app’s core feature, “Your World,” allows users to input their current colony status—such as available geysers, duplicant count, resource limitations—and get tailored recommendations. This includes buildings they can support, warnings about sustainability issues, and suggestions for long-term planning.

Two user personas informed this direction. Emma, a cautious beginner, often restarts her colony due to lack of foresight and wants clear, guided support. Alex, an advanced player, uses tricks like prioritizing geysers to pre-plan but finds the multi-tab method inefficient. Both users want something cleaner, quicker, and easier to reference mid-play.

Visually, the app reflects ONI’s personality through color, iconography, and tone, while avoiding UI clutter. Key features are swipeable, grouped logically, and mobile-responsive.

This app isn’t just a reference sheet—it’s a design-focused solution that supports players through intuitive layouts, helpful logic, and centralized knowledge. By reducing confusion and streamlining decision-making, it enhances both the onboarding experience for new players and the optimisation process for experts.

Mission Statement

To centralize and simplify the ONI player experience by creating an accessible, mobile-friendly companion app that merges multiple planning tools into one seamless interface.

Competitor Research

• ONIcalc – Offers strong power/gas calculations but lacks intuitive navigation.
• oni-db – Good data aggregation, but not responsive and poorly styled.
• Professor Oak’s Heat Tool – Useful but isolated and not integrated with other tools.
• r/Oxygennotincluded (Reddit) – A strong knowledge base, but not structured or easily searchable on mobile.

User Personas

Persona 1 – Emma (Beginner)

• Age: 21
• Platform: Plays ONI on a casual basis (Steam Deck or low-end PC)
• Struggles with: Game systems, colony collapse, managing early-game survival
• Needs: Clear UI, guided advice, and understanding of basic sustainable builds
• Goal: Survive beyond cycle 100 and feel confident in her decisions

Persona 2 – Alex (Experienced Planner)

• Age: 28
• Platform: Dedicated PC setup with mods
• Struggles with: Efficiency, long-term automation, and pre-planning
• Needs: Fast access to geyser viability, power chain feedback, simulation-based forecasts
• Goal: Build long-running megabases with zero-waste loops

Figjam

https://www.figma.com/board/aZFZimwNM960DLTMuc7wQ7/Moodboard—Style?node-id=0-1&t=VAULjseaiQA2fnR6-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.) Oxygen Not Included Wiki Homepage. Available at: https://oxygennotincluded.wiki.gg/ (Accessed: 19 May 2025).

ONI Calc (n.d.) Oxygen Not Included Calculation Tool. Available at: https://onicalc.com (Accessed: 19 May 2025).

ONI-DB (n.d.) Oxygen Not Included Database. Available at: https://oni-db.com (Accessed: 19 May 2025).

Professor Oak’s Shell (n.d.) Heat Exchange Calculator. Available at: https://www.professoroakshell.com/HeatExchangeCalc.html (Accessed: 19 May 2025).

Reddit (n.d.) r/Oxygennotincluded – Community Discussions. Available at: https://www.reddit.com/r/Oxygennotincluded/ (Accessed: 19 May 2025).

Design Writeup (300 words)

The wireframing phase of the Colony Not Included project focused on turning the user flow system map into an intuitive and responsive mobile interface. Using FigJam, I first developed a detailed flowchart covering login, sign-up, onboarding, and all primary features — including “Your World,” tools, settings, and user-generated setups. Each path was designed to reflect real user journeys through the app, aiming to minimize navigation time and cognitive load during active play sessions.

The wireframes were created in Figma using the iPhone 16 Pro frame size. Each screen prioritizes functionality, presenting large, tappable buttons with clear labels and a consistent color palette. The design reflects the visual language of Oxygen Not Included while stripping down detail to avoid visual overload on smaller screens. Navigation is handled via a collapsible hamburger menu that persists across all pages, offering immediate access to any main section of the app without requiring repeated backtracking.

Special consideration was given to accessibility and user diversity. The settings page includes toggles for dark/light mode and colour-blind support, acknowledging the variety of visual needs among players. Key information—such as geyser stats or duplicant lists—is displayed in scrollable stacks for easy mid-game reference, with editing functionality kept minimal and structured to prevent data loss.

The core section, “Your World,” reflects a flexible input/output model. Players can input their colony conditions (e.g. geysers, duplicants, builds), and receive structured, categorized data back. This flow was heavily influenced by community behaviour observed on Reddit, where players often manually cross-reference multiple sites. By consolidating this flow into one UI, the app reduces the need for multitasking and alt-tabbing.

Overall, the wireframes represent a user-first approach: lightweight, direct, and adaptable. Future iterations would include user testing, refinement of text hierarchy, and introduction of icons for additional clarity.

Figjam

https://www.figma.com/design/YJ4gvGJUXyP4cJSj8oftuS/Wireframe?node-id=0-1&t=ExKQ4tgbsh2obeI3-1

https://www.figma.com/board/8nRWhDl1rwhp0dGmdcxt9T/User-Flow?node-id=0-1&t=xowDLCA4jDi5ayzb-1

References

Klei Entertainment (n.d.) Oxygen Not Included – New Hero Art [Image]. Available at: https://shop.klei.com/products/poster-oxygen-not-included-update (Accessed: 19 May 2025).

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).

Design Writeup (300 words)

Adapting Colony Not Included from mobile to tablet and desktop required a deliberate focus on layout scalability, consistent branding, and user accessibility across multiple device types. The app’s mobile-first design was established through wireframes and refined in high-fidelity prototypes using Figma. These were then duplicated and reformatted into tablet (iPad Mini 5) and desktop (16:9 aspect ratio) frames.

Rather than redesign each screen from scratch, I preserved the visual language and interaction model used in the mobile version. This ensured that returning users would experience familiar workflows regardless of platform. Navigation elements were spaced out, containers resized, and button tap areas expanded. On larger screens, layouts were adjusted to avoid excessive white space while retaining a clean, grid-based hierarchy.

The tablet layout offered a more generous touch interface, while the desktop adaptation emphasized keyboard/mouse use and broader visual separation of content areas. A consistent colour scheme and typography system was maintained throughout to unify the brand identity. The hamburger menu was retained across all platforms for consistency, but on desktop it expands into a persistent sidebar on wider layouts, reducing clicks needed to access tools.

Importantly, the larger screen sizes allowed for more visually dense storage and interaction sections. Pages like Geysers, Plants/Critters, Setups, and Duplicates include longer scrollable lists and multiple data-entry points. This is viable on tablet and desktop, as storage limitations and visibility constraints are less of a concern. The app now supports heavier data interactions while staying readable and uncluttered.

As a technical companion to Oxygen Not Included, the app avoids overstimulating visuals in favour of simplicity. The visual style appeals to users who value clarity, usability, and precision—hallmarks of the game’s own player base. Figma’s prototyping tools allowed me to test layouts and link interactions in real-time, ensuring the app adapts cleanly across contexts.

Figma Link

https://www.figma.com/design/H1SRZhT2FhQBjovq4w79l4/Tablet-Adaptation?node-id=0-1&t=ZStIY4IhyLWJt7iU-1

https://www.figma.com/design/nBzjWy6EliVXqz4PxdzeOV/Website-Adaptation?node-id=0-1&t=vnRAMQN7jAHrcVzp-1

References (Harvard Style)

Klei Entertainment. Oxygen Not Included – Official Artwork. Available at: https://www.klei.com/games/oxygen-not-included (Accessed: 19 May 2025).
(Used as background for login/sign-up mockups.)

Klei Entertainment Wiki. Hydrogen Vent Image – Oxygen Not Included Wiki. Available at: https://oxygennotincluded.wiki.gg/wiki/Hydrogen_Vent (Accessed: 19 May 2025).
(Used in geyser detail wireframe.)

u/JosephJoestarisaG. (2024) Oxygen Not Included Promotional Fan Poster. Reddit. Available at: https://i.redd.it/5lrspc7vqcvc1.png (Accessed: 19 May 2025).
(Used in tablet login screen background.)