Case Study

Reimagining a Lifeline:
M.K.C.G. Hospital Redesign

Role

Frontend UI Developer

Type

Civic Design Concept

Location

Berhampur, Odisha

Stack

HTML, Tailwind, JS

1. The Why: Curiosity Meets Necessity

M.K.C.G. Medical College & Hospital is a place many people in Southern Odisha depend on. It treats thousands, teaches hundreds, and supports families every single day.

But the moment I opened the official website, it felt outdated and overwhelming. Too many links, too much scrolling, and no clear direction. It reminded me of how government sites often grow over the years without a real design plan.

"If I feel lost on this website, what happens to a worried family member looking for emergency help?"

That thought was enough for me to start this redesign. My aim was simple: rebuild the landing page with clarity and empathy, and show that even government platforms can feel clean, modern and human.

2. The Problem: The Digital Maze

Information Overload

Important and unimportant things are mixed together. Notices for staff show up right beside patient details.

No Prioritization

A user in a medical emergency shouldn’t have to scroll past alumni information to find help.

Outdated Interface

The design feels old, which directly affects the trust users place in the institution.

The Current Experience

This is the existing interface. Notice the cluttered sidebar, the marquee scrolling text that distracts the eye, and the lack of a clear call-to-action for patients. It forces users to hunt for information rather than guiding them.

Visit Official Website

4. Visual Identity: Trust & Warmth

Most hospitals use a flat blue. I wanted something more relatable. I used Coolors to build a palette that feels reliable yet comforting.

#216869 Stormy Teal
#49a078 Seaweed Green
#1f2421 Carbon Black
#dce1de Alabaster

Typography

Merriweather

Headings - Gives a sense of heritage.

Inter

Body - Clean, simple, and readable.

Resources Used

3. The Solution: Design With Empathy

I started by separating users based on intent instead of treating everyone the same. I implemented the "Who Are You?" approach.

  • Patients → OPD Booking, Lab Reports
  • Students → Syllabus, Results, Hostel Info
  • Faculty → Tenders, Departments

Emergency First

In healthcare, fast access is everything. I added a clear "Emergency" button in the hero section and an always-visible footer area. This creates a quick path for Ambulance (108) or Help Desk contacts without searching.

Visual Highlights

Hero Section
Clean Hero Section
Emergency Modal
Emergency Quick Access
Footer Design
Organized Footer

The Redesign Concept

A cleaner, faster, and more accessible interface.

View Live Concept
Adaptability

Built for Every Device

In Berhampur, many users access the hospital site via mobile phones. I prioritized a responsive layout that stacks content logically, ensures touch targets are large enough, and keeps the emergency button accessible at thumb's reach.

Mobile
Tablet
Desktop

The Outcome

This redesign turns the website from a giant list of links into a portal that actually helps people. What started as a curiosity project reminded me that public services deserve simple and thoughtful design.

HTML5 Semantic Tailwind CSS JavaScript Responsive UI