Case Study: Space Explorer Prioritizing Inclusive UXProject Overview

Project Description

Project Name: Space Explorer (Retro Tap-Shooter)

Core Technologies: HTML, CSS, Vanilla JavaScript

Project Goal: To demonstrate advanced front-end skills by rebuilding a complex, high-motion game concept to be fully accessible for users with vestibular disorders.

My Experience with Vestibular disorders

I live with Meniere’s Disease, a chronic inner ear disorder confirmed after experiencing lopsided hearing loss, persistent tinnitus, and severe vertigo. This condition causes episodes of intense vertigo (feeling like I’m spinning for hours or days, causing nausea and imbalance), tinnitus (a non-stop rushing sound), and a feeling of fullness and pressure in the ear alongside hearing loss.

These symptoms mean I am highly sensitive to motion, flashing lights, and visual overwhelm, making high-motion digital experiences often inaccessible.

This personal understanding directly drives my development philosophy. My work on Space Explorer demonstrates my commitment to proactively building the solutions and user controls that a frequently overlooked demographic requires, ensuring inclusive participation in the digital world.

The Challenge: Balancing Engagement with Inclusion

The Space Explorer project was initiated to tackle a critical front-end challenge: how to build a highly interactive, dynamic game while eliminating the common visual triggers that cause dizziness, nausea, or disorientation for users with vestibular disorders.

Traditional retro shooter games inherently rely on elements that conflict with inclusive design: Rapid parallax scrolling and high-frequency movement. Sudden, unexpected visual feedback (flashing, shaking). Demands for rapid, repetitive user input (button mashing).

The technical demand was to devise a robust, Vanilla JavaScript-driven solution that offered a complete suite of user controls, ensuring the experience remained fun, challenging, and most importantly, stable.

The Solution: Inclusive Mechanics Through Vanilla JavaScript

The solution was centered on providing granular, code-level control over every high-motion element, proving an ability to manage complex application state efficiently using foundational front-end technologies.

Motion and Visual Stability Control: Vestibular comfort was established by giving the user the power to eliminate the primary sources of visual noise.
Background Animation Toggle: The high-contrast, fast-moving starfield background animation can be completely disabled. This removes the primary source of distracting parallax motion, replacing it with a static, stable environment while preserving the core gameplay field.
Variable Gameplay Speed (Slow Mode): A global “Slow Mode” was implemented to uniformly reduce the speed of all game elements (enemies, projectiles, scores). This reduces visual complexity and cognitive load. Crucially, the player’s ship and enemy motion controls are simultaneously boosted in this mode, ensuring the game remains responsive and fair despite the reduced global speed.
Caption: Settings Menu: Clear, dedicated controls built in Vanilla JS allow users to instantly transform the game’s visual pace and stability.
Customizable Input and One-Handed Play: To address the repetitive input demands of the “tap shooter” genre, solutions focused on reducing fatigue and increasing input flexibility.
One-Handed Auto-Fire: A dedicated slider bar with an auto-fire mechanism was implemented. This removes the reliance on repetitive tapping, making the game fully controllable with one hand and significantly reducing fatigue.
Player-Controlled Input Dynamics: The player has granular control over their firing rate and movement speed, enabling them to customize the pace to their precise comfort level.Caption: The Auto-Fire Slider enables one-handed play, removing the need for repetitive action and reducing focus required for sustained input.
Low-Strain Visual Feedback: To provide clear feedback without causing visual distress, the design leveraged text and large shapes over high-frequency flashes.
Large Ball Projectiles: Projectile size was increased for enhanced visibility, making them easy to track without demanding excessive eye strain.
Text-Based Effects: Instead of high-frequency flashes for impact, various objects can be shot, resulting in large, non-flickering, easily discernible text like “Tap” and “Zap,” which provide unambiguous feedback without rapid, jarring light changes.

Results and Conclusion

Showcasing Inclusive Development: The Space Explorer project successfully demonstrates a commitment to foundational front-end mastery applied to complex, empathy-driven challenges.

Skill Demonstrated Impact Statement Technical Proficiency: Engineered a complex, stateful application using only Vanilla JavaScript, proving ability to manage core logic without framework reliance.

UX & Accessibility: Successfully delivered a solution that respects the prefers-reduced-motion principles and directly addresses the specific needs of a niche disability demographic.

Problem Solving Achieved: the dual goal of creating a dynamic game while maintaining a completely stable, controllable, and predictable user environment.

Project Conclusion: The successful implementation of these features shows my ability to think outside the box and make products accessible to a demographic that is often overlooked in mainstream development.

Space Explorer is a testament to the fact that high-quality, technically sophisticated front-end development can and should be a practice of inclusive design.