UI/UX First Phase

[imran110219]

1. 🏠 Home Page

Route: /

Sections:

• Hero Section:

  • Search input: placeholder="Search doctors, hospitals, institutions"

• Suggested Categories (Optional): Icons or cards for Doctor, Hospital, Institution

• Recent Highlights (Optional): Latest doctors/hospitals/institutions as a horizontal scroll or grid

Data Structure:

{
  "keyword": "cardiologist"
}

UX Notes:

• Pressing Enter/search navigates to /search?query=...
• Search bar is centered and full-width on mobile

---

2. 👨‍⚕️ Doctor List Page

Route: /doctors

Sections:

• Filter/Search Panel (Top or Sidebar):

  • Fields: Keyword, specialization, location, institution

• List of Doctor Cards:

  • Layout: Grid or vertical list
  • Card fields: Name, specialization, image, institution, location, verified badge

• Pagination

Data Structure:

{
  "id": "doc-001",
  "name": "Dr. Fatima Noor",
  "specialization": "Dermatologist",
  "institution": "OpenCare Clinic",
  "location": "Chattogram",
  "profileImageUrl": "/images/docs/fatima.jpg",
  "isVerified": true
}

UX Notes:

• Clicking a card navigates to /doctors/:id
• Pagination supports page numbers or infinite scroll

---

3. 👤 Doctor Details Page

Route: /doctors/:id

Sections:

1. Doctor Header Section

   • Profile Image (profile.photo) — show default avatar if null
   • Full Name (profile.name)
   • Gender (profile.gender)
   • BMDC Number (bmdcNo)
   • Verified Badge (isVerified)
   • Contact Info (if profile.email or profile.phone available)

2. About / Description Section

   • Field: description (optional long-form bio or intro)
   • If null, display “No description provided.”

3. Degrees & Specializations

   • List of Degrees from doctorDegrees (if available)
   • List of Specializations from specializations (if available)
   • Each item as a chip or bullet

4. Workplace Information

   • Section Title: “Practicing At”
   • Display workplaces from doctorWorkplaces (hospital/institution name, address)
   • If null, show "No workplaces available"

5. Location

   • Show profile.district, profile.upazila, profile.union, and profile.address if available
   • Optional: Embed map if address is specific

---

Expected Data Structure:

{
  "id": 1,
  "bmdcNo": "A-52508",
  "description": "Specialist in internal medicine with 15 years of experience.",
  "isVerified": true,
  "profile": {
    "name": "Dr. Md Sidur Rahman",
    "gender": "FEMALE",
    "photo": "/images/doctors/sidur.jpg",
    "email": "dr.sidur@example.com",
    "phone": "017xxxxxxxx",
    "district": "Dhaka",
    "upazila": "Dhanmondi",
    "union": null,
    "address": "House 12, Road 8, Dhanmondi"
  },
  "doctorDegrees": [
    { "degree": "MBBS", "institute": "Dhaka Medical College", "year": "2008" }
  ],
  "specializations": [
    { "name": "Cardiology" }
  ],
  "doctorWorkplaces": [
    {
      "name": "OpenCare Hospital",
      "address": "Gulshan, Dhaka"
    }
  ]
}

---

UX Notes:

• Use a clean vertical layout on mobile, split column view on desktop
• Sections should collapse or hide if corresponding data is missing
• “Contact” button can initiate email or phone call (if info is present)
• Scrollspy or anchor nav for sections if page is long

---

4. 🏥 Hospital List Page

Route: /hospitals

Sections:

1. Search & Filter Panel

   • Filters:

     • name (text search)
     • district (dropdown from district list)
     • division (optional, for hierarchical filtering)
     • hospitalType.englishName (e.g., College, Clinic)
     • organizationType.name (e.g., Government, Private)

2. Hospital Card List (grid or vertical list)

   • Card Elements:

     • name (English) and optionally bnName (Bangla)
     • hospitalType.englishName or banglaName
     • organizationType.name or banglaName
     • district.name or bnName
     • numberOfBed (if available)
     • websiteUrl as an external link (open in new tab)
     • Optional: Static map preview or location icon using lat and lon

3. Pagination

   • Based on totalItems (if present)
   • Support for page navigation or infinite scroll

---

Expected Data Structure:

{
  "id": 1,
  "name": "Dhaka Medical College Hospital",
  "bnName": "ঢাকা মেডিকেল কলেজ হাসপাতাল",
  "numberOfBed": 1700,
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা"
  },
  "hospitalType": {
    "englishName": "College",
    "banglaName": "কলেজ"
  },
  "organizationType": {
    "name": "Government",
    "banglaName": "সরকারি"
  },
  "lat": "23.72611495235723",
  "lon": "90.39758820237896",
  "websiteUrl": "https://dmch.gov.bd/"
}

---

UX Notes:

• Clicking a hospital card opens /hospitals/:id
• Show badge-style labels for type and organization (e.g., "College", "Government")
• If no beds or map info, hide gracefully
• Use link icon or "Visit Website" button for websiteUrl
• Search and filters should debounce and update result list without full page reload
• Responsive card layout: 1 column on mobile, 2–3 on tablet/desktop

---

5. 🏥 Hospital Details Page

Route: /hospitals/:id

Sections:

1. Header Section

   • Hospital Name: name (English), optionally bnName (Bangla)

   • Type & Ownership:

     • hospitalType.englishName (e.g., "College")
     • organizationType.name (e.g., "Government")

   • Verified Badge (optional if policy applies)

   • Website Link: websiteUrl with button “Visit Website”

2. Basic Information Block

   • Number of Beds: numberOfBed

   • Location Info:

     • district.name + division.name (in both English & Bangla if needed)
     • district.url and division.url as external links

   • Map Preview:

     • Use lat and lon to show hospital location on embedded or static map

3. Organization Description

   • organizationType.description as a paragraph or info box

4. Optional Location Hierarchy

   • district, upazila, union if available

---

Expected Data Structure:

{
  "id": 1,
  "name": "Dhaka Medical College Hospital",
  "bnName": "ঢাকা মেডিকেল কলেজ হাসপাতাল",
  "numberOfBed": 1700,
  "hospitalType": {
    "englishName": "College",
    "banglaName": "কলেজ"
  },
  "organizationType": {
    "name": "Government",
    "banglaName": "সরকারি",
    "description": "Government Description"
  },
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা",
    "url": "www.dhaka.gov.bd",
    "division": {
      "name": "Dhaka",
      "bnName": "ঢাকা",
      "url": "www.dhakadiv.gov.bd"
    }
  },
  "lat": "23.72611495235723",
  "lon": "90.39758820237896",
  "websiteUrl": "https://dmch.gov.bd/"
}

---

UX Notes:

• Use breadcrumb nav: Home > Hospitals > Hospital Name

• External links (websiteUrl, district/division URLs) open in a new tab

• If numberOfBed is null, hide the field

• Use a map component to visually show the hospital’s location

• Responsive layout:

  • Top info block + sidebar map on desktop
  • Stacked layout on mobile

---

6. 🏛 Institution List Page

Route: /institutions

Sections:

1. Search & Filter Panel

   • Filters:

     • name (text input)
     • district or division (dropdowns)
     • hospitalType.englishName (e.g., College, Clinic)
     • organizationType.name (e.g., Government, Private)
     • establishedYear (range or from/to year optional)

2. Institution Card List (grid or vertical list)

   • Card Elements:

     • acronym (e.g., DMC, SSMC)
     • name and bnName (both English & Bangla if available)
     • establishedYear
     • enroll (number of enrolled students)
     • district.name + division.name
     • hospitalType.englishName
     • organizationType.name
     • websiteUrl as an external link (optional)
     • Optional: Map preview if lat and lon are available

3. Pagination

   • Supports numbered navigation or infinite scroll

---

Expected Data Structure:

{
  "id": 1,
  "acronym": "DMC",
  "name": "Dhaka Medical College",
  "bnName": "ঢাকা মেডিকেল কলেজ",
  "establishedYear": 1946,
  "enroll": 230,
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা",
    "division": {
      "name": "Dhaka",
      "bnName": "ঢাকা"
    }
  },
  "hospitalType": {
    "englishName": "College"
  },
  "organizationType": {
    "name": "Government"
  },
  "lat": "23.725983288480617",
  "lon": "90.39573371854017",
  "websiteUrl": "http://dmc.edu.bd"
}

---

UX Notes:

• Clicking a card opens /institutions/:id
• Cards should be responsive, with 1–3 columns depending on screen width
• If lat and lon present, show map icon or preview
• “Visit Website” button for websiteUrl (open in new tab)
• If any field is missing (e.g., lat, enroll, websiteUrl), hide it gracefully
• Search and filters should dynamically update list (AJAX or debounce)

---

7. 🎓 Institution Details Page

Route: /institutions/:id

Sections:

1. Header Section

   • Institution Name: name (English) and optionally bnName (Bangla)

   • Acronym: Display acronym (e.g., DMC)

   • Ownership & Type:

     • organizationType.name (e.g., "Government")
     • hospitalType.englishName (e.g., "College") — use a better label like "Institution Type" if needed

   • Website Button: websiteUrl shown with a button “Visit Website” that opens in a new tab

2. Basic Information Block

   • Established Year: establishedYear

   • Enrolled Students: enroll

   • Location Info:

     • district.name + division.name (and optionally bnName for both)
     • district.url and division.url shown as external links

   • Map Preview:

     • Use lat and lon to show institution’s location via embedded or static map

3. Organization Description

   • organizationType.description shown in an info box or as a paragraph

4. Optional Hierarchy Info

   • Show district, optionally upazila, and union if future data includes them

---

Expected Data Structure:

{
  "id": 1,
  "acronym": "DMC",
  "name": "Dhaka Medical College",
  "bnName": "ঢাকা মেডিকেল কলেজ",
  "establishedYear": 1946,
  "enroll": 230,
  "hospitalType": {
    "englishName": "College",
    "banglaName": "কলেজ"
  },
  "organizationType": {
    "name": "Government",
    "banglaName": "সরকারি",
    "description": "Government Description"
  },
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা",
    "url": "www.dhaka.gov.bd",
    "division": {
      "name": "Dhaka",
      "bnName": "ঢাকা",
      "url": "www.dhakadiv.gov.bd"
    }
  },
  "lat": "23.725983288480617",
  "lon": "90.39573371854017",
  "websiteUrl": "http://dmc.edu.bd"
}

---

UX Notes:

• Use breadcrumb: Home > Institutions > Institution Name

• External links (e.g., website, district, division) open in a new tab

• Hide fields like enroll, establishedYear if null

• Responsive design:

  • Header + sidebar map on desktop
  • Stacked layout for mobile

• Make acronym stand out visually near the title

---

8. 📖 Our Story Page

Route: /our-story

As it is only content.

https://opencarebd.com/our-story

---