MOON Team ~ CASE STUDY

MKSS India Website Project

An exhaustive architectural migration and digital branding overhaul for Mazdoor Kisan Shakti Sangathan. Executed by MOON, this project represents the pinnacle of premium, high-performance NGO web presence.

https://mkssindia.org/
VISIT LIVE WEBSITE

1. Client Overview & Deep Analysis

Mazdoor Kisan Shakti Sangathan (MKSS) is not merely an organization; it is a historic pillar of the Indian RTI movement. Their work involves massive amounts of historical data, policy documentation, and community-led campaign reports.

During our discovery phase at Moon, we analyzed over 20 years of content. We realized that the client didn't just need a "site"—they needed a Digital Archive that remains fast even when loaded with hundreds of PDF resources and high-resolution protest photography.

Target Audience

Policy makers, global researchers, rural workers, and students. The UI had to be accessible to a laborer using a basic smartphone while remaining professional for a UN researcher.

Brand Essence

Transparency, Strength, Resistance, and Truth. The visual language needed to scream "Revolutionary yet Disciplined."

2. Problem Statement & Strategic Shift

The "WordPress Trap"

The legacy WordPress site suffered from "Plugin Bloat." Loading speeds exceeded 6 seconds on mobile, causing high bounce rates among rural users with weak internet connections. Security vulnerabilities and the "generic" look of templates were diluting the brand’s authority.

The Moon Solution: We decided to strip away all heavy frameworks. By shifting to a custom HTML/CSS/JS architecture, we reduced the page weight by 75% while increasing the visual "Premium" factor significantly.

3. Comprehensive Project Scope

The agreement between MOON and MKSS India covered the following critical deliverables:

Requirement Strategy Implementation
Visual Theme Custom "Sangria Red" palette with gold accents for a premium NGO feel.
Data Portability Converting 100+ pages of WordPress content into clean, semantic HTML.
Performance Zero-dependency coding to ensure sub-2-second loading times.
Scalability Modular code structure allowing new campaigns to be added as "blocks."

4. Advanced UI/UX & Figma Workflow

Our design phase in Figma involved creating a "Living Style Guide." We didn't just design pages; we designed an ecosystem of patterns.

Pattern Repetition

Using a consistent grid system ensures that as the user navigates from "History" to "Contact," the mental load is reduced. The site feels "smooth" because it is predictable and logically arranged.

The Red Narrative

Red is a difficult color for web accessibility. We solved this by using high-contrast white text and specific HEX shades that prevent "eye strain" during long reading sessions.

5. Engineering Excellence

The technical implementation focused on "Adaptive Performance." The website detects the user's viewport and serves optimized layouts instantly.

Front-End Engineering

  • BEM Methodology: For scalable and maintainable CSS.
  • Flexbox/Grid: Complex layouts without using heavy libraries like Bootstrap.
  • Vanilla JS: High-performance interactivity for the gallery and navigation menus.

Content Management

  • Decoupled architecture for high security.
  • Structured folders for Campaigns, Releases, and Books.
  • Search Engine Optimized (SEO) meta-structures on every page.

6. Feature Breakdown (Deep-Dive)

Every feature was built from scratch to meet the specific "Premium" demands of the client:

7. The Three-Phase Evolution

Version 1.0: The Skeleton

Focused on content migration. Getting the data out of WordPress and into clean code without losing a single document.

Version 2.0: The Aesthetic Polish

The Figma design was applied. This version introduced the Red-Themed UI and initial responsiveness testing across 15 different devices.

Version 3.0: Performance & Launch

The "Perfect Version." We optimized every line of code, minified assets, and added the final layer of smooth animations. This is the version currently serving the public at mksseindia.org.

8. Formal Scope of Work & Professional Agreement

The partnership between Moon Startup and MKSS India was built on a contract of total transparency:

9. Conclusion & Business Impact

98/100

Google PageSpeed Insight Score – proving that pure code beats WordPress in every performance metric.

100% Responsive

Verified functionality across all modern browsers (Chrome, Safari, Firefox, Edge) and mobile OS.

Zero Dependency

The site is future-proof. It will work exactly the same in 10 years because it relies on the core standards of the web.