Fairmed India Project

Fairmed India

March 2025

Fairmed India is a social development organization dedicated to “health for the poorest” working to address health inequities, support marginalized communities, prevent disability due to neglected diseases, and rehabilitate people affected by leprosy across India.

Fairmed's work spans

  • prevention
  • treatment
  • rehabilitation
  • community empowerment
  • education
  • innovation in health and systems

The core goal of this project was to create a modern, accessible, scalable, responsive website built in React, to more effectively communicate Fairmed India's mission, impact, programs, and opportunities for support and engagement.

This case study outlines the design strategy, user research insights, visual and information architecture decisions, technical implementation in React, and the outcome and learnings from this project.

Pet sitter website image

Understanding the Organization & Goals

Fairmed India works at the confluence of healthcare, social justice, community empowerment, and grassroots engagement.Their existing online presence was functional but lacked:

  • A unified brand and visual identity reflecting the compassionate, human-centered mission
  • Clear, structured narratives about what they do and why it matters
  • Easy access to impact stories, programs, and opportunities for support/donation
  • A scalable web architecture for ongoing content growth
  • Intuitive navigation for diverse global stakeholders: donors, volunteers, beneficiaries, partners, researchers, and the public

The key goals for the new website were:

  • Communicate the mission clearly letting people understand why Fairmed exists and what it achieves
  • Highlight projects and impact program pages for health initiatives, rehabilitation, prevention, and empowerment
  • Encourage action support, donate, partner, volunteer
  • Deliver a scalable, maintainable web platform using React to allow future enhancements

Initial Mental Model

Image of sketch

To achieve the goals outlined above, the initial approach was to create a mind map of the deliverable. The most challenging yet interesting aspect was positioning the key elements in a way that allowed viewers to grasp the objectives at a glance.

In other words, making the interface highly informative while keeping the information clear and easy to digest was my top priority, in line with the client's requirements.

Although the sketches appeared simple, they required considerable time and iteration. I explored multiple variations, and this particular sketch proved to be pivotal, effectively addressing nearly 50% of the overall challenge.

About Us → Our Work/Projects → Our Impact → How Your Donation Makes a Difference

Discovery & Research

Stakeholder Interviews & Content Audit

To kick off, we conducted structured content and stakeholder research:

  • Reviewed Fairmed India's existing site content: home, about, projects, team, partner networks, history, transparency docs, and legal content.
  • Interviewed internal stakeholders (leadership, program managers, communications team) to understand the most valuable messages, audiences, and action pathways.
  • Audited existing analytics (where available) to identify user pain points: difficulty finding program details, confusing navigation, absence of clear donate/support paths, and mixed content structure.

Persona & Use Cases

Based on this research, we synthesized primary user personas:

  • Donor / Supporter wants quick clarity on impact, urgent causes, and how to donate
  • Partner / NGO Network needs detailed project info, transparency, and accountability
  • Community Beneficiary or Advocate seeks resources, health info, and local support contacts
  • Volunteer / Student wants to understand programs and opportunities for engagement
These personas guided site architecture, content grouping, and calls to action.

Content & Structure Strategy

We mapped out a detailed site architecture to serve each persona:

Core Navigation

  • Home strong mission lead, visual impact metrics, quick links
  • Challenges segmented definitions of neglected diseases, disability prevention, community health barriers
  • Our Projects segmented by projects in India and ongoing projects for easier discovery
  • About Us mission, vision, mandate, history, transparency
  • Team face and structure of the organization
  • Contact / Donate critical action pathways
  • Legal & Reports access to terms, privacy, annual reports

These personas guided site architecture, content grouping, and calls to action.

Visual & UI Design

We chose a clean, mission-focused visual aesthetic to reflect Fairmed India's values:

  • Color palette: Trust-oriented blues and human warmth neutrals to evoke health, compassion, and reliability
  • Typography: Readable, accessible fonts with clear hierarchy
  • Imagery: Real visuals of communities, health workers, and impact (where permitted) to strengthen emotional connection
  • Iconography: Simple, thematic icons to represent neglected diseases, disability prevention, social empowerment, etc.

Responsive Layout & Accessibility

The layout was designed to be fully responsive across devices. Pages were structured so that:

  • Text content scales fluidly
  • Images adapt using responsive techniques
  • Navigation remains sticky on scroll for ease of use

Technical Implementation (React)

Given the need for future-ready structure and dynamic content growth, the site was built with React

Why React?

  • Component-based architecture for scalable development
  • Easy reuse of UI components across pages (e.g., hero section, project cards, team lists)
  • Dynamic, interactive experiences without page reloads
  • Integration with content management APIs or CMS connectors in the futu

Component Architecture

  • Layout Components Header, Footer, Navigation
  • Modules Hero Banner, Info Sections, Project Cards, Donation CTA, Team Profiles
  • Utilities Responsive image loader, accessibility utilities, state management for nav and modals

Routing & State

The site uses react-router for clean URL navigation. Each major page is a component with its own sub-routing (e.g., Projects › Project Detail). Global state for navigation and UI interactions is managed through React Context.

Responsive Images & Performance

We implemented best practices for responsive images and code splitting to improve load times ensuring an optimal experience on both desktop and mobile.

Launch & Outcomes

The new Fairmed India website delivers:

Improved Clarity

Users can now rapidly understand Fairmed's mission, scope, and impact.

Enhanced Navigation & UX

Detailed navigation, clear labels, and sectional links make information easier to discover.

Scalable React Architecture

Built with reusable components so the organization can extend, optimize, and integrate future features.

Conclusion

This project transformed Fairmed India's web presence into a purposeful, user-centric, scalable, and visually coherent digital platform. Built using React, with a research-led design process and structured content strategy, the new Fairmed India website better serves its mission, community, and global stakeholders.