HotDoc Booking Re-design

HotDoc Booking Re-design

In this project, I decided to redesign the medical booking interface that was originally powered by the HotDoc platform. HotDoc provides a ready-to-use booking system for medical websites, eliminating the need for custom development.

I first encountered this platform in one of my previous projects, when we reached the booking section. Based on the client's instructions, there was no need to design this part from scratch, as HotDoc was already being used to handle the booking functionality.

In this project, I decided to redesign the medical booking interface that was originally powered by the HotDoc platform. HotDoc provides a ready-to-use booking system for medical websites, eliminating the need for custom development.

I first encountered this platform in one of my previous projects, when we reached the booking section. Based on the client's instructions, there was no need to design this part from scratch, as HotDoc was already being used to handle the booking functionality.

Eddy Makarem

Contact Me

Eddy Makarem

Eddy Makarem

Contact Me

Client

Client

No one

No one

Industries

Industries

Booking

Booking

Duration

Duration

3 weeks

3 weeks

Date

Date

May 2025

May 2025

Challenged and problem statements

Challenged and problem statements

User struggled to find available time slots

● User struggled to find available time slots

No option for users to search for doctors within a specific clinic

● No option for users to search for doctors within a specific clinic

The UI lacked visual appeal and didn’t engage users

● The UI lacked visual appeal and didn’t engage users

Doctor information wasn’t clearly structured for user understanding

● Doctor information wasn’t clearly structured for user understanding

The booking table was visually dense, leading to a poor user experience

● The booking table was visually dense, leading to a poor user experience

The Design Process

The Design Process

At first, I wanted to brainstorm by sketching wireframes myself, which had its pros and cons.

This method helped me better understand and deeply engage with user needs, but it also took a lot of time and wasn’t very efficient.

So, I decided to write down all user needs on paper and organize them by stage and priority.

This totally cleared the path for me, I realized how to design, in what order, and what accessibility considerations to keep in mind.

Although this method is quite common among designers, I wanted to find my own unique approach rather than just copying others.

At first, I wanted to brainstorm by sketching wireframes myself, which had its pros and cons.

This method helped me better understand and deeply engage with user needs, but it also took a lot of time and wasn’t very efficient.

So, I decided to write down all user needs on paper and organize them by stage and priority.

This totally cleared the path for me, I realized how to design, in what order, and what accessibility considerations to keep in mind.

Although this method is quite common among designers, I wanted to find my own unique approach rather than just copying others.

Identify the problems

Identify the problems

During the design process, I encountered a significant personal mistake. For example, on Mondays, I only considered whether a doctor was available or not, without taking into account the specific hours of availability.

Realizing this issue created a pain point for me: should I completely redesign that part of the interface, or could I somehow improve the existing design?

In the end, I chose to redesign the interface from scratch. Attempting to patch the previous version would have compromised the overall consistency of the design, both visually and functionally.

During the design process, I encountered a significant personal mistake. For example, on Mondays, I only considered whether a doctor was available or not, without taking into account the specific hours of availability.

Realizing this issue created a pain point for me: should I completely redesign that part of the interface, or could I somehow improve the existing design?

In the end, I chose to redesign the interface from scratch. Attempting to patch the previous version would have compromised the overall consistency of the design, both visually and functionally.

Identify the problems

Identify the problems

The best solution I found for addressing this issue was to list all user needs in order of priority, and then gather feedback from developers with hands-on experience.

This approach gave me a clearer perspective on layout decisions and element placement, and helped me align my design more effectively with both user needs and technical feasibility.

The best solution I found for addressing this issue was to list all user needs in order of priority, and then gather feedback from developers with hands-on experience.

This approach gave me a clearer perspective on layout decisions and element placement, and helped me align my design more effectively with both user needs and technical feasibility.

What did I learn?

What did I learn?

The most important lesson I learned from this project was developing a deeper understanding of users when booking an appointment.

I began to approach the user as someone who may have minimal knowledge of how the system works or perhaps it’s their first time using it.

This mindset shifted my design focus toward simplicity, reducing any unnecessary complexity, and enhancing accessibility throughout the experience.
Additionally, the effective and timely use of wireframes and flowcharts helped me implement the process faster and with greater accuracy.

The most important lesson I learned from this project was developing a deeper understanding of users when booking an appointment.

I began to approach the user as someone who may have minimal knowledge of how the system works or perhaps it’s their first time using it.

This mindset shifted my design focus toward simplicity, reducing any unnecessary complexity, and enhancing accessibility throughout the experience.
Additionally, the effective and timely use of wireframes and flowcharts helped me implement the process faster and with greater accuracy.

Watch more in Behance

Watch more in Behance