Since the healthcare topic is quite popular now, I decided to share with you our exciting experience in developing a web application for patients. It was a large and severe project which IntexSoft’s (the company I work in) team was working on for several years.

I have to omit all names and some details for certain reasons: the screenshots in the article also serve a demonstration purpose only - the real application looks a little different, but I hope you will still enjoy this article.

Background

The client urgently needed to extend the team to develop the application. And since we already had a positive experience of cooperation, they turned to us.

The product itself is a large-scale, multifunctional web application that allows you to quickly find a doctor of any specialization, make an appointment, or receive an online consultation.

Our team worked only on a part of the functionality, and particularly these features we will discuss in this article.

Key tasks and solution

Below I will describe the main tasks that were set for our team and the way we solved them.

1. Facilitate the process of posting video content for content managers

The application has a partner information section that contains a lot of video files. To accomplish the task, we used the Brightcove service, which allowed us to compress video files to the necessary parameters and assign a specific ID to each video. This speeds up the loading of video content and makes the process of placing files easier.

2. Customize the search for the needed specialist by location

The application has a separate unit allowing to quickly find the doctor you need: the user can go to the page, chose a specific state/district and see the locations of partner doctors on the map with all the necessary additional information, and make an appointment, or contact a specialist for online consultations. To implement this feature, we used Google Maps.

We also developed a special React component, which allows to filter locations and display only those regions where partner doctors are available

3. Develop a COVID-19 info block

The client requested to create a section, which contains all the most relevant information about the virus and the epidemiological situation. By following the link from the pop-up banner, the patient can make an appointment, or request an online consultation.

4. Make the app accessible for people with disabilities

One of the most important tasks of the project was to adapt the application for people with visual impairments. For this task, on all pages, we used HTML Accessibility, which allows users to listen and navigate the content of the app. Voicing is carried out via screen readers — VoiceOver for macOS and iOS, TalkBack for Android, and NV Access for Windows.

By the way, if you are interested in the topic of Accessibility, then you might also like the interview with our Accessibility testing specialist.

5. Simplify content management for admins

The application contains a section of diseases that are studied and treated at the medical center. This section contains detailed information about diseases and real cases.

When creating this section, we used CKEditor to facilitate the work of content managers. For the detailed display of specific objects — blocks with quotes, galleries, blocks with relevant stories, etc. — we developed additional plugins. When creating an object, a content manager can select a ready-made template for a certain block, then insert a text and everything will be displayed on the screen in the required format.

For the block of diseases, we also developed a plugin that allows content managers to add videos from other services to CKEditor.

6. Set up localization

To configure localization, we developed a separate component on React, which allows users to switch between different languages (10 languages).

7. Speed up page loading time

The application has a complex menu, which could slow down the loading of pages. Based on the client’s requirements, we created HTML documents with a menu item title and the necessary data, and then these documents were added to the project. When you first enter the website, the menu is loaded and cached, which speeds up the work of the application.

The app also contains many other static elements. Not to overload the servers, different levels of caching are used there. The first level is performed via Symfony, which acts as a link for the frontend and Drupal, and when the page is fully formed, everything is cached via Varnish.

8. Make the app responsive

Our team faced the task of adapting the application interface to the main types of modern devices — computers, tablets, and smartphones. In this regard, the client’s designers created a separate design for each type of device. To implement this, we used a grid-based layout system. Thus, depending on the device screen parameters, the application interface is displayed in the relevant size.

Since the app has a lot of graphic content, it also had to be adapted so that the images uploaded in the original size would not slow down the page loading on mobile devices. For this, our experts developed a special module for Drupal. Now, when adding the content, it is necessary to upload only one picture of the original size, and the module creates 3 copies of different quality for certain devices and loads what is needed.

Final functionality of the application

For users:

• search for a doctor by region/competency;
• making an appointment or an online consultation;
• multilingualism (10 languages);
• accessibility for people with visual impairments;
• blocks with useful information for patients and doctors;
• adaptability for the main types of modern devices.ready-made templates for certain types of content;
• simplified management of text, graphic, and video content

For admins:

• ready-made templates for certain types of content;
• simplified management of text, graphic and video content.

Technologies used

• Frontend: HTML5, scss, React, Lodash, jQuery, Babel
• Backend: PHP, Symfony, Nginx
• CMS: Drupal
• Database: MySQL
• VCS: Jenkins
• Other: Varnish, CKEditor, BrightcoveSusy

Summarizing

As a result, the client received a multifunctional web application that greatly simplifies the process of finding the necessary medical specialist for end users, as well as simplifies the content management process for site administrators

Previously published at https://intexsoft.com/