ABOUT THE PROJECT
One.Check is a company whose aim is to boost healthcare digitalization. It strives to provide an outstanding innovative customer service that is sustainable long-term.
06.2022 – now
- innovative doctor appointments availabilities to get more bookings from the website
- vast selection of doctor appointments digitized real-time availabilities to make a full-time load for the doctors
- wide choice of availabilities filtering, sorting options and views to show all services
- wide range of authentication flows to suit users’ needs and increasing conversion rate
- easy selection of patients associated to make a reservation
- a broad variety of appointment payment options to suit users’ needs and as a result, get payment from different type of systems
- immediate booking confirmation that eliminates duplicate issues
- personal account with a list of bookings made, personal information and patients linked to form own clinics database
- used Create React App tool to create a SPA
- implemented UI part, based on provided Figma files for B2B & B2C sections
- used GraphQL to make this app faster to get only necessary data
- added Apollo Client, to consume a graph with asynchronous operations state management and a caching option
- used Redux Toolkit to work with Redux logic with reduced boilerplate and such great utilities under the hood as thunks, memorized selectors, etc
- used Material UI a library that provides a wide selection of prebuilt components ready to use out of the box and help cut time for the development process
- developed a tool to create PDF docs on the client side
- to simplify the authentication process used Google OAuth2
New features adding for B2C part of the project
- innovative doctor appointments availabilities search options
- fast selection of doctor appointments digitized real-time availabilities
- wide choice of availabilities filtering, sorting options and views
- wide range of authentication flows to suit users’ needs
New features adding for B2B part of the project
- wide range of authentication flows to suit users’ needs
- easy selection of patients associated to make a reservation for
- broad variety of appointment payment options to suit users’ needs
- immediate reservation confirmation
- Google APIs (Maps, OAuth2, Calendar) integrated
- personal area with a list of reservations made, personal information and patients associated
HANDY DOCTOR APPOINTMENTS AVAILABILITIES SEARCH OPTIONS
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.
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.
VAST AVAILABILITIES SELECTION, WIDE CHOICE OF FILTERING, SORTING OPTIONS
In the screenshot 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.
In both screenshots we may see a wide choice of filters offered. Filters criteria are timeframes, clinics and reservation confirmation type (Toggle component with label “Conferma immediata”). We may also notice customized datepicker with custom day intervals. In this case 5 business days are always shown. User’s able to browse weeks and launch a query with the date changed from this page.
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.
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.
WIDE RANGE OF AUTHENTICATION FLOWS
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. Application’s authentication logic relies on OTP. User’s also able to resend OTP to pre-filled email by clicking “Reinviami il codice”.
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.
BROAD VARIETY OF APPOINTMENT PAYMENT OPTIONS
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.
There is also a feature to change dynamically logo of credit card issuer according to the first digits of credit card number entered. Form has Luhn validation enabled if submitting with “Pay by credit card” option.
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.