Insaniquarium Deluxe Redesign

A UI redesign of the chaotic feeding fish intergalactic action game.

Insaniquarium Titlescreen

Info

Time Frame: Approx. 2 weeks

Tools

(p.s. the Figma prototype is recommended to be view on desktop)
Insaniquarium Screen Comparison

Summary

Dive into the chaotic underwater world of Insaniquarium Deluxe, a captivating and quirky strategy game. As a fish-tank tycoon, you'll nurture and protect a collection of eccentric aquatic creatures, battling alien invaders and feeding your colorful companions to help them grow and fend off ever-increasing challenges. With its blend of resource management, pet simulation, and arcade action, Insaniquarium Deluxe offers an addictive and delightful gaming experience that keeps you hooked as you strive to create a thriving and wacky aquatic ecosystem.
Release Date in the US: September 1, 2004
My Redesign: August 2023

Context

Insaniquarium holds a special place in my heart as an integral part of my childhood gaming experiences, alongside other timeless classics from PopCap games. Emerging from the early 2000s, this game combined the soothing aspects of nurturing aquatic companions with sudden rushes of panic when extraterrestrial invaders threatened my beloved fish friends. As I matured and studied user interface design, my affection for the game remained steadfast. Upon revisiting it, I noticed that a few subtle enhancements could be integrated to offer a more welcoming entry for newcomers, subtly alleviating the initial anxieties while preserving the nostalgic charm that has captivated players for years.

Goals

This case study will explore the game's user interface (UI) enhancements for ADVENTURE MODE. The primary goal is to revamp the visual experience, making it slightly more visually accessible. A crucial step in achieving this is transitioning from the original 4:3 aspect ratio to the now-standard 16:9, aligning the game's visuals with modern screen dimensions. By embracing the 16:9 format, the user interface will seamlessly integrate with the prevalent screen sizes of today, ensuring a visually pleasing and immersive gameplay experience.

One focal point of these UI improvements is the refinement of the alien warning system. The updated design will feature a more prominent presentation to enhance its legibility and noticeability. Notably, as players advance in the game and acquire the assistance of the pet "Blip,” Blip aids in identifying impending alien spawns and fish hunger status, a task made challenging when multiple enemies surface simultaneously. Addressing this, the updated UI will employ subtle icons to provide precise indications of the emerging alien types, bolstering players' strategic planning and decision-making.

The in-game economy, allowing players to purchase additional fish and essential upgrades, is crucial in advancing gameplay. A minor predicament arises with the ambiguity surrounding upgrade counts within categories like food and weapons, causing player uncertainty. This issue will be addressed by incorporating a subtle and contrasted indicator system that prominently displays each slot's current and maximum upgrades, streamlining decision-making processes. Furthermore, the shop's upgrade organization will undergo a small rehaul to improve accessibility and user-friendliness. This comprehensive approach to UI enhancements in ADVENTURE MODE aims to provide a seamless and engaging experience, drawing players into an immersive world of aquatic challenges and interstellar conflicts.

Process

Wireframes

I began my UI update process by identifying the key areas that required enhancement, focusing solely on the user interface elements. The primary changes targeted the Main Menu, Shop Upgrade Icons, and the Alien Warning system.

I divided the tasks into distinct steps to systematically approach these updates, acknowledging the transition from the original 4:3 aspect ratio to the more contemporary 16:9 format. Additionally, I considered the game's potential for mobile platforms, aiming to maintain consistent design and functionality across desktop and mobile devices.

In addressing the UI components, I outlined the following essential tasks:

  • Main Menu: Reorganize and adapt the layout to fit the new 16:9 aspect ratio, ensuring a balanced visual experience regardless of the screen dimensions.
  • Pause Menu: Restructure and modernize the pause menu's style while introducing an option to position the upgrade menu on either the left or right side, catering to players' preferences.
  • Shop Menu: Revise the shop menu's orientation to a vertical, off-to-the-side layout—group related items together for improved coherence and user-friendliness.

Redesign Wireframe

The Shop Menu redesign involved meticulous planning to cater to the distinct in-game items:

  • Egg Pieces: Given their relevance to level completion, these items were placed at the top of the shop, closer to the currency indicator at the very top. This positioning enables players to gauge their progress toward the next piece.
  • Guppies and Laser Guns: These crucial items followed, as guppies are essential tank inhabitants, and laser guns offer effective alien combat. Placing them in prominent positions reflects their significance to gameplay strategy.
  • Food Quality and Quantity: These interdependent items were positioned next, offering improved guppy feeding and assistance against specific alien adversaries that succumb to food attacks.
  • Variable Items: The last two spots were reserved for items that vary across tanks or levels. These items, such as guppy conversions or unique fish purchases, complete the shop layout, accommodating diverse gameplay scenarios.

The updated ADVENTURE MODE interface aims to provide players with a seamless and intuitive experience across desktop and mobile platforms by methodically addressing these UI components and incorporating thoughtful placement and organization.

Background Extension

Main Menu Background Extension

Most of my modifications primarily involve adjustments to layout and sizing, reflecting my focus on enhancing the user experience. Nevertheless, the broader scope of the updated version presented a unique challenge: the original design featured an embedded menu integrated into the background. This compelled me to manually recreate the background, extending from the mermaid's hand toward the right side. This process demanded careful attention to detail and precision to seamlessly blend the visual elements, ensuring that the menu integration felt organic and harmonious within the game's overall aesthetic.

Mid Fidelity

UI Components

To create a harmonious and engaging user interface, I focused on refining the visual elements while preserving the game's nostalgic essence:

  • Interactable Buttons: I embraced circular or pill-shaped buttons, ensuring a fully rounded appearance with a generous radius of 50 to 75px. These buttons, bearing different functions, provide an intuitive, user-friendly experience that aligns with the game's theme.
  • Borders for Shop and Menu: To establish a clear distinction, I introduced a 10px border for shop-related elements and a 5px border for options, enhancing the visual hierarchy and usability of the interface.
  • Info Bubble: Designed with a rounded rectangular shape featuring a 25px radius, the info bubble seamlessly integrates essential information within the interface, maintaining aesthetic coherence and functional clarity.
UI Components

The color palette conveys the intended atmosphere and interactions. Purple hues adorned most buttons, capturing attention and guiding users through the interface. Blue tones represented other interactables of shops and settings, offering a pleasant visual backdrop. Green was reserved for currency elements, while tans and browns were strategically used to evoke the vintage appeal of metal backgrounds and menu borders. Red accents contrasted existing elements tied to the alien warning, lending a sense of urgency and excitement.

These meticulous selections of fonts contribute to a cohesive and engaging user interface, aligning design aesthetics with functional communication:

  • MuseoModerno (Bold): Employed with a bold presence, MuseoModerno emphasizes areas like Settings, Interactable Buttons, and Mode Titles, instilling clarity and focus.
  • Chilanka: Mode Descriptions and Interactable Button sub-texts are elegantly presented in Chilanka, infusing a touch of grace and personality.
  • Chakra Petch: The versatile Chakra Petch font finds its place in other Informational text, Nickname Subtext, and Alien Warning elements, creating a distinctive identity across this interface.
  • Digital Numbers: Adding precision and readability, Digital Numbers adorn Currency-related sections, ensuring transparent communication of economic information.
UI Mid Fidelity

Preserving the nostalgic aura of the original design, I strived to evoke the feel of old scuba gear and submarine equipment within the menus and shops. After implementing the color scheme, I focused on maintaining a flat design in preparation for the final phase in Photoshop, where I would embellish the elements with stylistic flair.

In amalgamating these visual, color, and typographic elements, I aspired to craft an immersive user interface that pays homage to the game's retro charm while optimizing usability and player engagement.

High Fidelity

High Fidelity

My efforts culminated in the final version, an outcome shaped by deliberate choices spanning layouts, colors, and sizing. A fusion of painterly aesthetics and pixel art characterized the original Insaniquarium. Utilizing the wireframe and the designed mid-fidelity, I skillfully used photo bashing and painting techniques to achieve the desired depth and intricate detailing. This process breathed life into the interface, creating a more realistic vibe while maintaining an evocative nod to the original's charm.

My initial concept revolved around allowing the "shop menu" to be opened and closed. However, upon observing the comprehensive result, I decided against its implementation. This choice was rooted in the realization that preventing the hiding of the shop menu would mirror the behavior of the original game. Given the tendency for players to engage in rapid clicking for collection and feeding, I recognized that introducing an additional click, which could make or break a level, had the potential to disrupt the seamless interaction with the tank. This decision was essential to preserving the fluidity and enjoyment of the gameplay experience, aligning with the core principles of the original game. Alien Icon The revised design introduces an enhanced indicator to improve the legibility and visibility of Blip's role. With Blip's assistance in identifying upcoming alien spawns and monitoring fish hunger, the complexity of dealing with multiple enemy appearances simultaneously is tackled. To meet this, the updated UI incorporates distinct icons for each type of alien spawn associated with the "multiple alien" warning. This innovation offers precise cues about the impending alien varieties, effectively empowering players to strategize and make informed decisions. The UI seamlessly weaves this crucial information into its visual fabric, balancing subtlety and functionality.

Results

(p.s. the Figma prototype is recommended to be view on desktop)
Insaniquarium Screen Comparison

Takeaways

Engaging in the UI redesign of Insaniquarium was a fun endeavor and a valuable learning experience. Access to the original game files and art assets through my Steam library provided invaluable insights into the game's initial creation and visual assembly. Uncovering the assets and their embedded nature was fascinating, revealing the challenges posed to scalability and precise UI adjustments. This understanding shed light on the game's original design intricacies. Thanks to the capacity of modern game engines, dynamically resizing images based on window dimensions among other platform-accessible settings, scalability, and resolution is easier than ever. This innovation not only enhanced accessibility for players across various platforms but also future-proofed the experience.

Looking back on this journey, I find a sense of pride in what I've achieved within the constraints of a limited timeframe. If presented with the chance to delve back into this project, I commit myself to a more extensive exploration of tycoon games. This research would be centered on comprehending their strategies for addressing accessibility concerns tied to repetitive clicking and interactions, with a clear intention to alleviate physical limitations while elevating the game's immersive and captivating aspects. Additionally, I'm keen on delving deeper into animations and micro-interactions, seeking to amplify the visual dynamism of the interface. In the end, I hold a strong sense of accomplishment for what I've been able to create, taking pride in the results I achieved, given the scope and time I allocated to this endeavor.