Finnovate, a Toronto-based technology company, assigned a game UI/UX design project to improve the user experience of their client's gaming platform. The objective was to create an engaging and intuitive interface that would enhance the overall gaming experience for their users.
UI Designer
Developers, Product Owner and Stakeholders
1 month
Following a catastrophic microbe outbreak that ravaged a region, scientists have salvaged essential DNA fragments, vital for potential life form repopulation. Players are charged with reconstructing these incomplete DNA strands to pinpoint life forms suitable for regeneration, racing against time as the DNA is susceptible to deterioration. Yet, vigilance is paramount, as the lethal microbe responsible for the initial devastation might lurk within these samples. Upon detection, swift action is crucial to halt its spread and guarantee containment, adding a layer of urgency and caution to the mission.
This end-to-end UX/UI project covers the full spectrum from game branding to interface design. The first step was to craft a compelling visual identity that captures the essence of Bio Arcade - a mobile game blending science, urgency, and retro arcade aesthetics. The logo design served as the foundation for a cohesive visual language, reflecting the game’s core themes of DNA reconstruction, microbial threats, and fast-paced, science-driven gameplay. This identity would go on to inform the look and feel of the UI, in-game icons, and supporting visuals.
To begin, I explored key themes from the game narrative:
Science & Biology: DNA, microbes, lab environments
Arcade Aesthetic: Retro 8-bit visuals, pixelated typefaces, vibrant contrast
Dual Tone: Urgency and optimism — the game is serious, yet engaging and fun
I crafted a moodboard incorporating classic arcade logos, scientific icons (like test tubes and DNA strands), and color palettes associated with biological visuals (green for DNA, red/yellow for hazard, teal for energy).
Given the “arcade” context, I created pixel-style typography to evoke nostalgia and communicate the game’s fast-paced puzzle nature. I experimented with:
Blocky, 8-bit fonts
Grid-based layout
Modular spacing for scalability on mobile screens
To distinguish between the “BIO” (science) and “ARCADE” (game) aspects, I used two different colors and treatments to subtly emphasize the dual identity of the game: learning + gaming.
Green (BIO): Symbolizes life, DNA, and regeneration
Teal (ARCADE): Adds a futuristic and digital tone, drawing from arcade culture
White Outline: Adds contrast, visibility, and a light, digital frame tying the two elements together
Accent (Flask): The beaker includes red gradient liquid to allude to chemical danger and curiosity — a subtle nod to the lurking microbe and the experimental nature of DNA rebuilding
To enrich the narrative visually, I incorporated a stylized laboratory flask tilted playfully above the wordmark. It:
Reinforces the science theme
Adds motion and energy
Provides a focal point and character for potential animation or branding extensions (e.g., loading screens or icons)
The logo uses stacked, modular typography with pixel-aligned edges to ensure adaptability across screen sizes and resolutions. It can scale well from app icons to splash screens. The spacing and contrast ensure it remains legible in both dark and light UI environments.
Following the logo creation, the next step was to design the app icon, a crucial touchpoint for the mobile game’s identity. The icon needed to be instantly recognizable, visually appealing at small sizes, and thematically aligned with Bio Arcade’s blend of science and retro gameplay. The goal was to abstract the idea of DNA reconstruction while maintaining clarity, simplicity, and strong brand association. The app icon had to:
Communicate the scientific theme (DNA, lab work)
Feel dynamic and game-like
Align with mobile interface requirements and icon design best practices
Reflect the color palette and tone established in the visual identity
The final icon design is a modern, stylized DNA double helix formed using colorful circular nodes, paired with bar-like segments to hint at genetic coding. This visual metaphor reinforces the core gameplay of reassembling DNA strands, while the minimal style ensures legibility on any device size.
Color Palette:I used vibrant shades of lime green (#addc00), sky blue (#00aeef), and deep navy (#023862). These colors are scientifically inspired yet playful, giving the icon energy while maintaining biological credibility.
Rounded Square Format:The helix design is placed within a soft rounded-square background, conforming to mobile OS icon guidelines and adding a friendly, approachable feel.
This app icon strikes a balance between scientific precision and gameful simplicity. It represents the DNA puzzle mechanic in a bold, minimalistic way that scales effectively across platforms. The use of geometric repetition (dots and bars) hints at modularity and logic, both central to the game experience. This design not only introduces players to the gameplay concept at a glance but also reinforces brand consistency by reusing the core visual language established during the logo phase.
After establishing the visual identity and app icon, the next focus was mapping out the gameplay flow: a critical step to ensure smooth user engagement, logical progression, and replayability. This flow outlines the core interaction path a player follows from launching the game to completing or retrying a level, which directly shapes the overall player experience.
The primary goal of the gameplay flow was to create a seamless and engaging player experience that promotes clarity, progression, and replayability. The structure needed to support both success and failure paths, guiding players smoothly whether they level up or need to retry, while maintaining momentum throughout the session. Strategic decision points were integrated to offer players control, while reward loops like achievement collection were designed to reinforce progress and encourage continued play.
Home Screen – Serves as the entry point with access to gameplay, achievements, and navigation
Play → Choose Game Mode – Players select their preferred challenge type or difficulty level.
Game Start – The main interaction begins: reconstructing DNA under time pressure while avoiding dangerous microbes.
Continue? – A decision point appears after a level ends. Based on success:
Win → Level Up → If players succeed, they advance and can enter a higher difficulty.
Lose → Retry → Players are prompted to try again, reinforcing a quick return to gameplay.
End of Session Check – Upon completion or exit, the system checks if a higher level was unlocked. If so, players are directed to the Achievement Collection screen to view their rewards.
Return to Home – Players always have the option to return to the home screen to explore other areas or restart the game flow.
To translate the gameplay concept into a functional interface, I developed a series of low-fidelity wireframes that outline the core structure and user experience of Bio Arcade. This stage focused on defining layout, flow, and interactive behavior while working closely with developers to ensure technical feasibility and scalability.
These wireframes served as a blueprint to align the design direction with gameplay mechanics, allowing early validation of screen transitions, game logic, and UI responsiveness. Using grayscale layouts helped us iterate quickly without being distracted by visual styling, making it easier to test interaction flows and gather early feedback from both users and developers.
At the heart of Bio Arcade is a DNA reconstruction puzzle. The wireframes were designed to support intuitive tap Interactions along a winding DNA strand. Players interact with individual gene nodes, tapping to reposition or activate them within a time constraint. I ensured key interactive zones were thumb-friendly, accommodating single-handed play and ergonomic reach for various screen sizes. Visual feedback such as progress markers, level indicators, and state changes (e.g., success/failure overlays) were placed intentionally to maintain a clear focus during fast-paced gameplay.
Loading Screen: Introduces the game with a branded loading screen and sets the tone for a science-based puzzle game.
Home Screen: Presents two clear options—Play and Achievements—streamlining navigation and reducing decision fatigue.
Level Selection: Allows players to scroll through available levels, select one, and begin gameplay or exit if needed.
Gameplay Screen: Displays a vertical DNA path where players interact using touch gestures. Interactive elements are positioned for optimal accessibility during fast-paced puzzle solving.
Win & Lose States: These screens provide instant feedback with options to retry or progress, encouraging continued engagement. Buttons are spaced for easy mobile tapping.
Achievements: Shows collected and locked achievements in a grid layout. Players can scroll horizontally to view more and return to the main menu.
Before finalizing the UI kit, I collaborated closely with the development team to prototype key interaction flows and validate gameplay mechanics in a working environment. The sprint 3 video demonstrates an early functional build that incorporated placeholder assets, basic DNA interaction logic, and level transitions. This allowed us to test gesture responsiveness, check component behavior in real-time, and assess technical feasibility across screens.
By syncing design decisions with engineering constraints early in the process, we were able to identify potential UI challenges—such as tap precision, mutation animation triggers, and screen transitions—and address them before high-fidelity visuals were introduced. This iterative workflow ensured the game remained technically sound and user-centered from the start, reducing downstream rework and promoting a smoother design-to-code pipeline.
After validating the game structure through wireframes, I created a comprehensive UI kit to establish a cohesive, scalable design system for Bio Arcade. The UI kit served as a central source of truth for the visual language of the game, supporting consistent design decisions across all screens and components while streamlining collaboration with developers. The main goal of this UI kit was to ensure visual clarity, usability, and brand consistency throughout the game. Designed with mobile accessibility and playful science themes in mind, each element was optimized for touchscreen interactions and high engagement. The UI kit also allowed developers to work more efficiently by reusing standardized components and behaviors.
Loading Animation & Iconography: A custom loading animation with a bubbling test tube immediately reinforces the game’s scientific theme.
Button System: Color-coded buttons (green for actions like Play/Start, blue for navigation, red for critical functions) ensure quick recognition and intuitive use. All buttons are optimized for tap-friendly dimensions.
Basic Icons: Includes UI essentials like alerts, settings, and navigation cues. Designed using a flat, clean style to maintain readability at smaller sizes.
Dropper & Drops (Game Mechanic): Core interaction elements representing the DNA base pairs (T, G, C, A) as draggable liquid drops. These reinforce the tactile feel of assembling DNA.
DNA Alphabet & States: Base indicators with both active and inactive visual states to support in-game feedback, helping players understand which elements are in play.
Gameplay Elements: Components like the funnel, mutation indicators, and evolutionary stages communicate biological transformation while staying visually simple for quick comprehension.
Samples (Levels): Each sample icon represents a distinct game level within Bio Arcade, visually coded through lab-inspired containers such as test tubes, beakers, and flasks. The progression in glassware shapes and fluid contents reflects increasing complexity across levels, from basic genetic experiments to more advanced mutation sequences.
Achievement Collection Cards: A card-based system for tracking unlocked, locked, and unlockable mutations, supporting player motivation and completion goals.
Background & Message Board: Thematic visuals such as the DNA strand background and a clipboard-style message board anchor the interface in a lab environment, enhancing immersion.
Mutations (Character Assets): A library of visually distinct creatures evolving through multiple stages, designed to represent successful DNA synthesis and mutation progression.
All UI components were designed with mobile-first principles, prioritizing high contrast, legibility, and tap-friendly spacing for optimal finger-based interaction. Each element was built as a reusable asset to support flexible implementation, rapid iteration, and pixel-perfect consistency across the game interface. The UI kit was developed in close collaboration with the engineering team, with components exported in implementation-ready formats, complete with naming conventions and usage guidelines. This ensured a smooth handoff and minimized friction during the development process.
The final stage of the design process involved translating the approved UI kit and gameplay structure into high-fidelity wireframes. These polished mockups brought together visual identity, interaction patterns, and feedback elements into a complete, screen-ready interface that reflected the full game experience. The goal of this stage was to simulate the final user experience with production-ready visuals, allowing stakeholders, developers, and testers to interact with the fully designed interface. Every screen was crafted with close attention to clarity, visual hierarchy, and usability on mobile devices. This phase also served as the visual source for animation specs, game transitions, and implementation handoff.
Branded Entry & Navigation: The home screen prominently features the Bio Arcade logo, background DNA visual, and primary actions (Play and Collection) using color-coded buttons for fast orientation.
Sample Selection Screen: A clipboard UI reinforces the lab theme, with clean navigation to scroll through sample/level types and a clear call-to-action with Start and Back buttons.
Gameplay Interface: The core game screen displays the DNA helix in full vertical layout for swipe/tap gameplay. Key interactive elements like DNA bases, mutation dropper, progress bar, and level indicators are positioned ergonomically for thumb access.
Result States (Win/Lose): Success and failure states use visual metaphors like petri dishes and mutation indicators to reinforce feedback. Action buttons guide players to retry, progress, or return without friction.
Mutation Collection View: A card-based gallery allows players to view unlocked and locked creatures. Visual consistency with earlier UI components creates a seamless experience between gameplay and reward collection.
Color, typography, and motion-ready elements were chosen to maximize contrast and readability, ensuring accessibility and responsiveness on a range of mobile devices. Each interface reinforces the game’s core themes—science, discovery, and urgency—while maintaining a fun and visually cohesive look.Working closely with developers, these high-fidelity wireframes were also used to guide animation timing, interaction feedback, and overall gameplay polish, ensuring a consistent and engaging final product.
