preloader

About project

OneCheck is a pioneering company dedicated to catalyzing the advancement of healthcare digitalization. With a steadfast commitment to delivering exceptional and innovative customer service, OneCheck is at the forefront of revolutionizing the healthcare industry for sustainable, long-term impact.

Review

We were happy to be part of this journey, contributing to our frontend solutions that focus on elevating performance, optimizing SEO, and seamlessly implementing new features. The collaboration with Alessandro and the Onecheck team has been a success, and our work together is ongoing.

Duration

23.05.2022- Now

Technologies

Create React App, React Helmet, GraphQL, Apollo Client, Axios, Redux Toolkit, Redux Persist, Material UI, Classnames, React-pdf, Google OAuth2, Google Maps API, Places Autocomplete API, Google Calendar API, i18next, React Datepicker, Date-fns, Mixpanel Browser, React Final Form, React IMask, Validator, Swiper

Business solutions

  • innovative doctor appointments availabilities search options to cut booking time
  • fast selection of doctor appointments digitized real-time availabilities to provide full-time loading of the specialists
  • wide range of authentication flows to suit users’ needs and increase conversion rate
  • easy selection of patients associated to make a reservation and simplify the process
  • a broad variety of appointment payment options to suit users’ needs

develoPMENT PROCESS

  • implemented version of single page application
  • used Apollo Client to consume a graph with asynchronous operations state-management and a caching option
  • for the faster implementation of provided design used Material UI, because of prebuilt components that are ready to use out of the box
  • added React-pdf – a tool to create PDF docs on the client side
  • added Google OAuth2 – a tool to enable authentication with Google
  • for internationalization used i18next
  • added Places Autocomplete API – a tool to work with addresses empowering us to get unique Google place ID, its coordinates, description, etc.

Roadmap

Innovative doctor appointments availabilities search options

Jul 22 - Aug 22
  • search options include tests, location (Places Autocomplete integrated and a feature is implemented to let user use their geolocation), dates (an option is added to perform a search not for a specific date but find the earliest appointments)
  • doctor appointments include specialist visits, diagnostic procedures, laboratory tests and ambulatory procedures

Wide choice of availabilities filtering, sorting options, views and authentication flows

Sep 22 - Nov 22
  • filter criteria include time of day, clinic, staff and appointment confirmation type. Sorting criteria include distance, price, appointment confirmation type and date (if search for a doctor appointment for the earliest dates is performed). View options include list, carousel and map views
  • the following authorization options are available: OTP password-based authorization, authorization via Gmail. User’s also able to make a reservation as a guest.

Broad variety of appointment payment options and adding reservation functionality

Dec 22 - Jan 23
  • user’s able to pick an associated patient from the list to make a reservation for and all forms would be prefilled with the information about patient chosen
  • some appointments have a feature of immediate reservation confirmation. The confirmation’s sent via email. The email includes appointment details and a link to download a pdf with reservation details
  • payment options include card, pay pal and an option to pay later at clinic with cash.

Google APIs (Maps, OAuth2 and Calendar) integrated.

Jan 23 - Feb 23
  • APIs integrated to implement appointments map view, to enable authorization via Gmail and to let user add an appointment to their Google Calendar.

New flow implemented

Feb 23 - May 23
  • personal area includes the list of bookings made, personal information and patients associated. Here both personal and patients’ associated information can be updated
  • user’s able to search appointments with a receipt code
  • user’s able to select their insurance, availabilities would be pre-filtered with it and appointment price would differ according to insurance selected.

UI being reworked, Switching application from CRA to Next.js

Jul 23 - Aug 23
  • new UI components created
  • such a switch is intended to boost performance.

Main Functionality

Project Description Image

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.
Project Description Image
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.
Project Description Image
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.
Project Description Image
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.
Project Description Image
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.
Project Description Image

VAST AVAILABILITIES SELECTION, WIDE CHOICE OF FILTERING, SORTING OPTIONS

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.
Project Description Image
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.
Project Description Image
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.
Project Description Image
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.
Project Description Image
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.
Project Description Image

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.
Project Description Image
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.
Project Description Image

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.
Project Description Image
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.
Project Description Image

IMMEDIATE RESERVATION CONFIRMATION AND GOOGLE APIs INTEGRATION

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.
Project Description Image
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.
Project Description Image
If this button is clicked and authorization to Google Account is successful user will have such an event in the calendar.
Project Description Image
Reservation recap can be also downloaded as a PDF by clicking “Scarica la prenotazione”.
Project Description Image

PERSONAL AREA

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.
Project Description Image
User is also able to modify personal information ,see the list of patients associated, add them, modify pesonal information of patients or delete them.

Contact Us

Please contact us for any further information