Humayon Kabir

All work

XYZ Hospital: a practice site for a seamless hospital visit

A fictional hospital website I designed in Figma and built with AI, to practise turning UX knowledge into a working product.

Type
Personal practice project, no client
Year
2026
Role
UX designer and builder, directing AI for the code
Data
All fictional. XYZ Hospital is not a real institution.

What it does

The site covers the things a patient or family member comes to a hospital website to do: find a department or doctor, book an appointment, look up a report, and reach emergency and ambulance numbers without searching for them.

  • Booking in three steps. Choose a doctor, pick a date and time from the available slots, then get a booking reference. Payment is at the hospital reception, and the site says so before the parent or patient commits, so no money is taken online.
  • Find a doctor. Browse by department or search by name. The results announce how many doctors were found, and active filters can be cleared in one tap.
  • Report lookup. A patient enters a report number and sees results with reference ranges, with out-of-range values flagged. The patient's name is masked on screen.
  • Emergency numbers up front. A 24-hour emergency hotline sits in the top bar of every page, with ambulance dispatch, ICU ambulance, newborn transport, outside-Dhaka transfers and the national 999 line listed together.
  • Bangla and English. The whole interface switches language and remembers the choice.
  • Light and dark themes. The site follows the device setting and remembers a manual choice.
  • A design system page. The site documents its own components.

How I built it

I designed the screens first, in high fidelity in Figma, then built them as a working website with AI, the same way I work on my other projects: I decide the structure and the content, and AI writes the markup. The site is a single HTML file that runs without a server.

I made this to test one question: can I take what I know about UX and produce a hospital experience that works end to end, not only a set of screens?

What it is not

It is a practice project. There is no real hospital behind it, no live booking system and no real reports. The doctors, report numbers and phone numbers are made up so the flows can be tried. It has not been tested with real patients.

Image credits

The photographs in the demo site come from Freepik and are used under its free license.