# Medical Booking Interface Design: Check Doctor and Time

Source: https://www.jvds.cn/en/share/ui-design/serena-medical-booking-u085
Language: en
Published: 2026-10-17
Author: JVDS Design Studio

This medical booking interface organizes search with a blue area and white doctor cards, then places dates, slots, and booking actions in details. Personal information stays near conditions, while ratings separately name doctor, reception, and facilities instead of merging service objects into one score.

## Key takeaways

- Specialty icons have words, and doctor information and booking conditions follow a vertical sequence.
- Ratings separate doctor, reception, and facilities so one overall score does not conceal their different objects.

## Icons and specialty words narrow the search together

Bright blue fills the upper search page, with a white field below the heading and two rows of specialty cards. Heart, tooth, and other icons have labels for readers unfamiliar with the graphics. The lower white area begins another reading layer with Our Doctors and cards.

Portrait, name, specialty, and hospital stay close in each card, with rating and time below and black Book Appointment at the bottom. Shared fields support comparison, while heart saving stays separate from booking. JVDS values hospital and time labels, often more directly relevant to arrangements than an attractive portrait.

Time ranges need precise names. Readers should know before opening details whether a range means working hours or bookable availability. Ratings are sample information and cannot establish professional competence.

![Specialty categories and doctor booking cards](https://www.jvds.cn/upload/2026/1008/d187-tp/u085-i1.webp)

Blue categories and white cards | Find the service provider, then confirm actual available times.

## Dates and slots sit beneath one doctor’s information

Details retain doctor identity, then experience and other summaries before Select Date and Select Time. Month and day use two selectors, slots form two columns of pale-bordered buttons, and black booking sits independently below. Conditions follow one direction without repeated switching between information and time.

Some slots are much paler, but the image does not explain whether they are full, unavailable, or another state. State names should match control appearance. Month and day should form a complete date, with provider, location, service mode, and time repeated together before submission.

Booking can begin from either a doctor or a time constraint and end in the same summary. A [doctor-first route](https://www.jvds.cn/en/share/ui-design/medical-appointment-flow-design) selects a slot; a time-first route finds available providers. Both should retain service, place, and date, with starting conditions editable on return.

![Month, day, and time intervals within doctor detail](https://www.jvds.cn/upload/2026/1008/d187-tp/u085-i2.webp)

Two Select Date fields and pale Select Time items | Full dates and availability states need explicit meanings.

## Ratings separate reception from facilities

The rating page retains doctor portrait and name above separate stars for doctor, Hospital Reception, and Hospital Facilities. Reception explanations mention communication and waiting; facilities mention cleanliness and parking. Lines and whitespace divide objects.

These separate ratings are useful: parking and reception experiences do not naturally belong to the doctor. Explicit names assign feedback to appropriate objects. Empty stars should mean unfilled rather than automatically low ratings.

JVDS would check skippable items, [the corresponding appointment](https://www.jvds.cn/en/share/website-design/website-testimonials-trust), and treatment of blanks before submission. Black stars on white provide contrast, but feedback still needs a relationship to this arrangement rather than ending all explanation at Submit Review.

![Separate star ratings for doctor, reception, and facilities](https://www.jvds.cn/upload/2026/1008/d187-tp/u085-i3.webp)

Three headings and empty-star rows | Rating objects remain separate, and unfilled differs from low scoring.

## Frequently asked questions

### Do pale appointment slots need an explanation?

Yes. Unavailable, full, and unselected are different states, and users should not infer them solely from shade.

## Design review checklist

- Combine year, month, day, and slot into a complete booking summary.
- Explain empty stars and unavailable slots.

## Clarify booking conditions and service providers

If your booking product needs clearer provider filtering, time choices, and separate ratings, start with the information required for one complete arrangement.

JVDS Design Studio provides UI/UX design, website design, and development services to help organize page content, interface structure, and implementation needs.

[Contact JVDS to discuss your project](https://www.jvds.cn/contact)