Medical Online Booking

Project overview

The design ✨✨✨

1. UI guideline

To ensure the consistency between design and coding, i have to build a basic guideline for the dev team, providing all necessary specs for UI coding. To save time and enhance productivity, our team decided to use MUI – a UI framework supporting reactJS. MUI has all needed basic controls, and my job is to define the color guide, size and spacing… to make them fit with the branding.

In detail, there are 4 groups of specs: Typography, Colors, Control elements (such as input field, button, checkbox…) and Form (size and spacing parameters for card, group of fields…)

Following my guideline, the UI components look like below. Personally, i think it is not really shiny, but suitable for a dashboard interface. I give it enough white space and use the familiar form control elements to ensure users don’t feel hard to operate.

2. Bookings interface

This screen display the list of all appointment as a table. However, i made some changes here, the table row will be displayed as a card, an expandable card. When expanded, the card show more infomation and user can execute some tasks like send confirmation email, cancel booking or change some info.

Moreover, this screen also has the filter feature and supports selection with bulk action.

3. Make booking feature

This is the core function of the MOB system, operated by the FastMed administrators and staff form client companies.

The user flow:

Following that, the main form was separated into 3 blocks: Company information – Booking Details – Candidates. Data input from the previous block affects data in the next one. For example, changing Company and Subsidiary could change the Paperworks and Package data in the Booking Details block, and also decide the clinic, available time slot in the last step.

the custom package feature is placed in the hidden sidebar and only slide out when called in order to keep the layout clean.

The Candidate block has some different states due to data constraint and the peculiarity of online booking – real time data check up.

4. Scheduler

This screen displays all appointments in form of a timeline table. There are multiple columns of timeline, and each one belongs to a doctor. With this appearance, users can have a bird eye view over all appointments on a day. FastMed administrators can access all appointments of the clinic system, but the Company’s account is limited with their company’s appointment.

Scheduler comes with the Filter feature to empower users to find a specific person’s appointment or filter the timeline by doctor, site…

For the UX, to improve the accessibility, i asked for the drag to scroll feature, and also placing 2 buttons for scrolling left & right. This helps users to scroll easily in case they have dragging trouble, for example, with the office laptop’s trackpad.

At FastMed, some of their services allow multiple appointments with a maximum of 3 people at once. That lengthens the Schedule table, and my solution to keep it stay organized is using collapse/expand function for the multi-column timeline. Moreover, detailed information of the appointment will be placed on a popover panel which appears when hovered.

A demo worth a thousand words, luckily i have one! Made with pure html/css, available for trying out:

👉👉👉 Medical booking scheduler demo

5. Companies

Well, this is a common screen helping us manage the company information. Data are grouped and separated into tabs, and most of them are information and settings which will be used in the Make Booking feature. The differences between FastMed admin account and Company’s account is the list companies screen, only FastMed admin has the ability to access all company’s data in the MOB system.

You might have a question right here, that’s about the duplicate of information from the sidebar menu and the tab bar menu inside the Company screen.

Yeah, let me note something. All screens you have viewed in this entire showcase belong to FastMed admin view with the highest permission. Then, all menus of Companies, Package, Booking Accounts, Positions on the sidebar empower this user role to access all system data. The specific Company screen shows only data from that company. That’s the point!

A basic comparison, FastMed admin has more  menu items on the sidebar than the Company account’s. However, all their feature screens have the same functionality. So i just pick the FastMed admin’s screens to keep this show case as short as possible 😁

6. The responsive design

This is an important part of my work though. MOB is a widely used system. Users can access from many kinds of devices with many different screen sizes. Many companies use big 2.5K screens, others may give their staff the small laptop with just 1280px screen width.

Then, to enhance the operating experience, I separated them into 2 groups with 2 different sets of size & spacing. The breakpoint is 1600px:

Summarization

Well yeah, it’s a loooong scroll for you right!

But you have scrolled through my 4 months of hard working 😁 4 months may be such a long time for this workload, am i a snail? Not really at all, heheeh, because every single screen i made had to be reviewed. There were meetings, discussings; there were actual users giving feedback. There was heart attacks, and these screens are well-made 😂

To be honest, i feel disappointed several times when seeing my design not shiny like shots on Dribbble. However, this is a REAL product, actually working, having real users and currently serving a real life purpose. Then i sat down and relaxed, i think i did it well. I have balanced the visual appearance and the functionality of the MOB system.

Beside that, there were more things i balanced. That was the interface complexibility and the code-ability of devs, the number of user flow steps and the density of sending api requests…

All of this makes a good project, right? Let’s see them all once again!

Thank you 3000 for scrolling here 🥺

Project finished in 08.2021
Show case written in 05.2022