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).
Leave a Reply