{"id":7360,"date":"2020-06-29T15:34:00","date_gmt":"2020-06-29T15:34:00","guid":{"rendered":"https:\/\/www.intexsoft.com\/?post_type=blog&p=7360"},"modified":"2022-07-19T12:07:37","modified_gmt":"2022-07-19T12:07:37","slug":"web-app-for-patients-case-study","status":"publish","type":"blog","link":"https:\/\/intexsoft.com\/blog\/web-app-for-patients-case-study\/","title":{"rendered":"Web App for Patients: Case Study"},"content":{"rendered":"
\n\t
\n\t\t\t\t\t
<\/div>\n\t\t\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t\t
June 29, 2020 \u2022 by \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAlexandra &\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAndrew\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t

Web App for Patients: Case Study<\/h1>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\tBusiness\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\"image\"\n\t\t\t\t<\/picture>\n\t\t\t<\/div>\n\t\t\t<\/div>\n<\/section>\n\t\t\t\t\t\t\t\n\t\t\n\n\n
\n
\n\t\t
\n\n\n\n\t\t\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t<\/div>\n\t\t\t\t\t\t

Since the healthcare topic is quite popular now, I decided to share with you our exciting experience in developing a web app for patients. That was a large and serious project that our team (and not only) was working on for several years.<\/span><\/p>\n

 <\/p>\n

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.<\/span><\/p>\n

 <\/p>\n

Background<\/span><\/h2>\n

 <\/p>\n

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.<\/span><\/p>\n

 <\/p>\n

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.<\/span><\/p>\n

 <\/p>\n

Our team worked only on a part of the functionality, and particularly this features we will discuss in this article.<\/span><\/p>\n

 <\/p>\n

Key tasks and solution<\/span><\/h2>\n

 <\/p>\n

Below I will describe the main tasks that were set for our team and the way we solved them.<\/span><\/p>\n

 <\/p>\n

1. Facilitate the process of posting video content for content manager<\/span><\/h3>\n

 <\/p>\n

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 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.<\/span><\/p>\n

 <\/p>\n

2. Customize the search for the needed specialist by location<\/span><\/h3>\n

 <\/p>\n

The web app for patients 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.<\/span><\/p>\n

 <\/p>\n

3. Develop a COVID-19 info block<\/span>
\n<\/strong><\/span><\/h3>\n

 <\/p>\n

The client requested to create a section, which contains all\u00a0the most relevant information about the virus\u00a0and the epidemiological situation. By following the link from the pop-up banner, the patient can\u00a0make an appointment, or request an\u00a0online consultation.<\/span><\/p>\n

 <\/p>\n

4. Make the app accessible for people with disabilities<\/span>
\n<\/strong><\/span><\/h3>\n

 <\/p>\n

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.<\/span><\/p>\n

 <\/p>\n

By the way, if you are interested in the topic of Accessibility, then you might also like<\/span>\u00a0the interview<\/a> with our Accessibility testing specialist.<\/span><\/p>\n

 <\/p>\n

5. Simplify content management for admins<\/span><\/h3>\n

 <\/p>\n

The application contains a section of diseases that are studied and treated at the medical center. This section contains detailed information about the diseases and real cases.<\/span><\/p>\n

 <\/p>\n

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.<\/span><\/p>\n

 <\/p>\n

For the block of diseases, we also developed a plugin that allows content managers to add videos from another services to CKEditor.<\/span><\/p>\n

 <\/p>\n

6. Set up localization<\/span><\/h3>\n

 <\/p>\n

To configure localization, we developed a separate component on React, which allows users to switch between different languages (10 languages).<\/span><\/p>\n

\u00a0<\/strong><\/p>\n

7. Speed up page loading time<\/span>
\n<\/strong><\/span><\/h3>\n


\n<\/strong>This web app for patients has a complex menu, which could slow down the loading of pages. Based on client\u2019s requirements, we created HTML documents with a menu item title and the necessary data, and then documents were added to the project. When you first enter the website, the menu is loaded and cached, which speeds up the work of application.<\/span><\/p>\n

 <\/p>\n

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.<\/span><\/p>\n

\u00a0<\/strong><\/p>\n

8. Make the app responsive<\/span>
\n<\/span><\/h3>\n

 <\/p>\n

Our team faced the task of\u00a0adapting the application interface to the main types of modern devices\u00a0– computers, tablets and smartphones. In this regard, client\u2019s designers created a separate design for each type of device. To implement this, we used a\u00a0grid-based layout system. Thus, depending on the device screen parameters, the application interface is displayed in the relevant size.<\/span><\/p>\n

 <\/p>\n

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.<\/span><\/p>\n

 <\/p>\n

Final functionality of the web app for patients<\/span><\/h2>\n

\u00a0<\/strong><\/p>\n\"\"\n

 <\/p>\n

For users:<\/u><\/span><\/p>\n

 <\/p>\n