[C4GT Community] 🎨 Discharge Summary UI Redesign – Improve Layout, Typography & Visual Hierarchy

[drtechie]

📄 Description

The current Discharge Summary UI is visually cluttered and difficult to read. Spacing, typography, and layout hierarchy are inconsistent, making the document look unpolished and hard to scan for key clinical information. This ticket focuses on a full UI/UX cleanup of the Discharge Summary view to make it clean, modern, readable, and clinically effective.

---

🚨 Problem Statement

The existing Discharge Summary UI has the following issues:

• Margins and paddings are inconsistent and cramped
• Typography lacks hierarchy (headings, labels, values look similar)
• Poor visual grouping of sections
• Excessive white space in some areas and congestion in others
• Tables and sections feel misaligned and hard to scan
• The overall layout looks outdated and unaesthetic

This impacts:

• Clinical readability
• Doctor efficiency
• Print-friendliness
• Overall perception of product quality

---

🎯 Goal / Expected Outcome

• ✅ A clean, modern, and aesthetic discharge summary layout
• ✅ Clear information hierarchy for fast clinical scanning
• ✅ Proper spacing, alignment, and typography
• ✅ Optimized space usage (compact but readable)
• ✅ Better visual grouping of:
  • Patient details
  • Vitals
  • Complaints
  • Clinical observations
  • Findings
  • Investigations
  • History (past, family, comorbidities)
• ✅ Print-friendly design
• ✅ Consistent styling with the rest of the AMRIT UI

---

🛠️ Scope of Work

1️⃣ Visual & Layout Improvements

• Redesign overall grid layout
• Normalize margins and paddings
• Apply consistent section spacing
• Improve table alignment and density

2️⃣ Typography Cleanup

• Define hierarchy:
  • Page title
  • Section headers
  • Field labels
  • Values
• Improve readability for both screen and print
• Ensure emphasis on key clinical information

3️⃣ Information Hierarchy & Grouping

• Clearly group:
  • Patient & Visit Info
  • Vitals
  • Chief Complaints
  • Clinical Notes
  • Investigations
  • History & Comorbidities
• Use section cards or dividers for clarity

4️⃣ Clinical Readability Enhancements

• Highlight abnormal vitals visually
• Improve scan-ability for doctors
• Reduce cognitive load

5️⃣ Print Optimization

• Ensure the layout works well when exported to PDF and printed
• Avoid unnecessary large empty blocks
• Maintain consistent column widths and alignment

---

✅ Acceptance Criteria

• UI redesigned with clean spacing and alignment
• Clear typography hierarchy implemented
• Sections visually grouped and easy to scan
• Abnormal vitals highlighted clearly
• Print-friendly layout verified
• No data loss or functional regression
• Reviewed and approved by product + clinical stakeholders

---

🙌 Who Should Pick This Up?

• UI/UX Designer
• Frontend Developer (Angular / Web UI)

---

📎 Attachments / References

Screenshots of the current Discharge Summary UI are attached for reference.

[Rafiaminhaj]

Hi @drtechie 👋

I’m interested in working on this issue as part of Winter of Code (WoC).
I’ve carefully gone through the problem statement and expected outcomes, and I’d like to take ownership of improving the layout, typography, and overall visual hierarchy of the Discharge Summary UI.

I plan to:

• Improve spacing, alignment, and section grouping
• Establish a clear typography hierarchy for better clinical readability
• Ensure the design is clean, modern, and print-friendly

Please let me know if I can be assigned to this issue.
I’ll make sure to follow the contribution guidelines and share progress updates regularly.

Thank you for your time 🙂

[drtechie]

Hi @Rafiaminhaj thank you for your interest. Assigned.

[Rafiaminhaj]

Hi @drtechie 👋

I’ve cloned this repository and checked all directories.
Currently, this repo contains only documentation and community files, and I couldn’t find the Discharge Summary UI / frontend code here.

Could you please confirm:

• which repository contains the Discharge Summary UI code, or
• which folder I should work on for this issue?

Once clarified, I’ll start working on the UI layout, typography, and visual hierarchy improvements.

Thanks!

[drtechie]

Hi @Rafiaminhaj please go through the documentation of this repo.
This repo points to other repos and links to developer documentation on how to setup AMRIT platform.

The current ticket is primarily for HWC service line (refer to HWC-UI where the code is there). To run the application you can setup HWC-API, Common-API, Identity-API. Refer to platform setup and DB setup to set this up locally.

[drtechie]

@Rafiaminhaj It would be great if you can give feedback on platform setup.
If you face any challenges, please ask for help in this discussion thread.

[Rafiaminhaj]

Hi @drtechie, thank you for the clarification!

I’ll go through the repository documentation and follow the links to the relevant repos, especially HWC-UI where the Discharge Summary UI code exists.
I’ll also review the AMRIT platform setup docs and try setting up the required services (HWC-API, Common-API, Identity-API) locally.

I’ll share feedback on the platform setup and update this thread if I face any issues or need further guidance.

Thanks for the support!

[drtechie]

@Rafiaminhaj any updates?

[ChinmayeeWuriti08]

Hello! I’m a beginner and I’d like to work on this issue to learn more. If it’s suitable, could you please assign it to me?