OneCheck

To search for doctor appointment availabilities user has to fill in the form and provide desired specialty, location and date.

Specialties list has trending options unless user starts typing the name of desired specialty. As a means of optimization trending options are pre-fetched on initial page load and cached. Specialties suggestions are generated based not only on match of input value with a name of a specialty but also on match of input value with tags each specialty has to show related options possibly suitable for user.

Input to provide a desired location also has trending options and a button “Cerca vicino a me”. Its click triggers JavaScript Navigator utility function to get users’ geolocation previously having asked user’s permission.

The aforesaid input also has Places Autocomplete API integrated. Its suggestions in the case are restricted to Italian cities and addresses. The value chosen’s used to search for availabilities in its 50km radius.

And the last but not least is the input to fill in desired date. It has customized React Datepicker integrated with dynamic locales. In the screenshot we may see Italian localization but when the language of entire application is switched to English, the locale of Datepicker is automatically changed to English as well. Here there is also a button “Mostra la prima disponibilita” to search for soonest doctor appointment availabilities.

In the screenshot below see the list of doctor appointment availabilities found. On the top there is a clickable component with query details. Its click redirects user to the homepage with the form with pre-chosen initial values enabling user to alter the query easily. Interface of the page below differs according to the type of date chosen. In the screenshot below we see the example of the page when “Mostra la prima disponibilita” option is chosen. The boxes on the right show the soonest available date.

Here is the example of the same page when a specific date is chosen when searching for availabilities. The aforementioned box is divided into three box here: “Mattina”, “Pomeriggio” and “Sera” that stand for “Morning”, “Afternoon” and “Evening” accordingly. If there are availbilities within the timeframe the box’s colored green and is clickable.

When one of the boxes on the right of card or “Vedi disponibilita” button is clicked, such a modal opens with time-specified availabilities. Information here covers time, staff and price. Here we also have a Datepicker component to launch a query for another date in this specific clinic. For better UX avails are divided by timeframe.

When “Ordina” button is clicked the modal with sorting options is opened. We may notice the following sorting options: by price (both ascending / descending orders), by distance (ascending order) and default option. If default option is chosen avails are compared by dates first and if the date is the same by distance in ascending order then.

Let’s pay attention to an alternative availabilities view. It is the map view. Here Google Maps API is integrated. Each clinic has an associated marker on the map based on its coordinates. The card of the availability associated to the focused marker (the black one) has a black border for better UX. Map is draggable. Each marker is clickable. On its click the availability associated “climbs” to the first position in the list. This view also has all filters, sorting options mentioned above as well as the datepicker to launch the query for another date.

After choosing a doctor appointment user wants to book and checking recap of appointment chosen, user arrives at checkout page. User’s able to sign up or sign in with Google (Google One Tap is also integrated), with a standard application’s authentication logics or proceed as a guest.

Having signed in successfully user proceeds to the second step. It is the form with information about patient. It is pre-filled in case user already provided prsonal information. Let’s pay attention to the select component in the screenshot below. It has options “Per me stresso”, “Per un’altra persona” that stand for “For myself” and “For another person” accordingly. If the second one is chosen the form’s empty. In the list of options there will be also patients associated user added in his personal area. If the patient is chosen form’s values are automatically changed to the information about the patient user provided in his personal area.This feature speeds up the whole process of making a reservation, makes it easier.

At the moment three payment options are available: “Carta di credito”, “Paga in struttura” and “PayPal” that stand for “Pay by credit card” and “Pay in clinic” accordingly.

Credit card creds inputs have masks set, a dynamic one for card number (it changes according to the first digits entered that determines the issuer such as Visa, MasterCard or American Express), **/** for expiraton date and password-type *** for cvv.

The majority of availabilities can be confirmed immediately. If such availability’s booked the user gets such a notification. Also an email with booking recap is sent to user’s email.

Page with booking details have such buttons as “Ottieni indicazioni” to open Google Maps with the clinics coordinates in a new tab and “Salva a calendario” to create an event in Google Calendar.

If this button is clicked and authorization to Google Account is successful user will have such an event in the calendar.

Reservation recap can be also downloaded as a PDF by clicking “Scarica la prenotazione”.

User has the list of reservations made. They are divided into oncoming and past ones (the past ones also include cancelled ones). By clicking on “Vedi dettagli” button user can check the details of a specific booking.

User is also able to modify personal information ,see the list of patients associated, add them, modify pesonal information of patients or delete them.