Every year, over 1.5 million new cancer cases are reported in India.
By 2025, this number is expected to cross 1.57 million annually.
India is now often referred to as the cancer capital of the world, with rising cases,
late diagnoses, and limited awareness contributing to the crisis.
(Source: ICMR & WHO reports)
Title: Conquest
Type: Web-based Awareness Game
Duration: 1–2 minutes per playthrough
Platform: Browser (HTML5/JavaScript)
My Role: UX/UI Design, Prototyping
Problem Statement
Everyday exposure to carcinogens often goes unnoticed. Need for an engaging, bite-sized experience to educate broad audiences.
Objectives
Increase awareness of common cancer risk factors (e.g., tobacco, alcohol, Teflon fumes, single-use plastics).Encourage healthy behaviors (exercise, sleep,
balanced diet). Deliver facts in an interactive, memorable way.
Young Adults (18–35)
Quick, web-savvy players who make independent lifestyle choices and share engaging content with peers.
Family & Community Health Advocates (30–60)
Caregivers and NGO workers looking for bite-sized educational tools to spark discussions and promote healthier habits.
Students (14–22)
Health-class or club members who use short games as learning aids and social media conversation starters
Research and Insipiration
Benchmarking
Quick-play awareness games (e.g., “Foldit,” “Cancer Crusade”).
Classic Snake mechanics: simplicity, instant feedback loop.
Literature Review
Key statistics on leading preventable cancer causes. Gamification principles in health communication.
Concepts and Mechanisms
Goal of the game
Survive as long as possible while balancing “good” vs “bad.”
Stages in the game To reinforce the educational metaphor, the snake game is divided into four color-coded stages that mirror the progression of cancer. Each stage not only changes the visual tone but also introduces new mechanics culminating in the appearance of “chemotherapy” in Stage 2.
Visual Notes
Progress Bar: A horizontal bar below the play area gradually
shifts from green → yellow → orange → red as the player’s “stage”
advances by collecting a set number of items
UI/UX Visual Design
Screen Flow & Wireframes
Start Screen
Big title -” Conquest”
Minimal “Press Any Key to Start” prompt
Subtle looping background animation snake growing
How to Play — Page 1 (Controls)
Header: “How to Play”
Short instruction: “Use ↑↓←→ (or WASD) to move the
snake”
Simple arrow-key graphic
How to Play — Page 2 (Goal & Items)
Header: “Collect Good, Avoid Bad”
Two-column layout:
Left: Icons of healthy items (+ benefits)
Right: Icons of carcinogens (– risks)
Footer “Next →” to proceed
Gameplay Screen
Top bar:
Stage Progress (green→yellow→orange→red meter)
Score counter
Left panel : Dynamic tip box that updates on collisions
Main arena: Pixel grid with snake and spawning items
Settings icon (gear) to pause or mute
Game Over / Summary Screen
Final score overlay
The cancer spead too far
“Play Again” prompt
Style Guide
Color Palette:
Green hues for positive states, red/orange for danger, neutral grey UI frames.
Typography:
Pixel-inspired display for headings; clean sans-serif for tooltips and facts.
Iconography:
Monoline pixel icons at ~24 × 24 px—clearly legible at
small scale
Pixel Art
Why pixel art?
We chose a retro, Gameboy-inspired aesthetic to evoke nostalgia and ensure
instant readability at small sizes. The limited resolution forces clarity: every pixel must communicate meaning.
Grid & Canvas Setup
Canvas size: 16 × 16 px
Grid overlay: Enabled in the adobe illustrator to align strokes precisely to
pixel boundaries.
Reference Imagery: Placed photos of real objects (e.g., a water bottle, dumbbell, cigarette) directly over the grid to map each contour and decide exactly where
pixels belong.
Color Limitation & Palette
Palette: Only black for the icons (#000000)
Sprite Design Workflow
Block-out: Draw each icon’s silhouette in pure black on the 16 × 16 px grid.
Outline & Cleanup: Refine outlines to maximize legibility at 100 % zoom; remove
stray pixels and adjust anti-aliasing to retain a crisp, pixel-perfect feel.
Validation: Preview in-engine at actual game resolution to confirm visibility;
iterate until each sprite reads clearly against the background.
User Interface
