Medical monitoring app - UI/UX design

Overview

About the project

Katarina Medical Monitoring app provides doctors on site with quick and easy access to the patients directory and patients’ health record. This app also serves for data collection for a research of efficiency of non-traditional treatment.

The first version of the app was designed and developed in 2020. The app looked a bit outdated, it was not convenient to use and it needed a lot of UI and UX improvements. So the client decided to develop the newer version of the app with updated visual style and improved UX.

The client decided to start from the MVP version, so some functionalities from the previous version were cut.

The challenge

Make the app for doctors working on site with a large flow of patients. Provide users with quick access to their patients, easy management of their health records and ability to follow their recovery progress.

The visual style of the app should be consistent with the parent company’s product.

My role

I was the only designer working on this project.

My responsibilities included: communicating with the client, conducting UX research, providing UI/UX design.

Old app design

Process

Design process

Project discussion

Competitor analysis

Information architecture

UI/UX design

User flow

Project discussion

I learned about the business and its audience, defined its goals, problems and needs, clarified all the needed details about the project.

Competitor analysis

I analysed our direct and indirect competitors, studied their successful and unsuccessful solutions, common patterns, flow, functionality and design. I collected all this information in a document with screenshots and comments. I figured out which successful solutions we could apply and which mistakes we should avoid, how we can make the product familiar and clear for users based on products and patterns they are currently using.

Information architecture

I started the product development from the information architecture. I organised and structured the content of the app into a diagram. It helped me to see the full amount of information, find out the best way to structure it and identify pages that will be needed to design.

User flow

I created a user flow with all the steps that the user takes from entering the product to achieving his goal. It helped me to consider different cases and ensure that the flow is convenient and understandable and users have a way out of possible error and dead-end cases.

Solution

Medical monitoring app

The app allows users to quickly access their patients, easily manage their health records and follow their recovery progress.

I updated the UI and used the screen space in a more efficient way. I improved the app flow and overall UX, used common mobile design patterns and guidelines to make the app more convenient and efficient.

Main page

The main page of the app is the patients directory where users can search for patients and create new ones. I removed cards and put the list on a white background to save space and make the page look cleaner. I used FAB in the bottom right corner for the new patient creation as it is a common and convenient approach. Also as doctors on site might often work with poor internet connection, I added a badge to the top bar to show if they are online or offline. But the app works in both cases.

Patient profile

On the patient profile page doctors can view and edit patient’s administrative data as well as have a convenient overview over their patient’s health and recovery progress. Patient’s administrative data is not often needed so I hid it under the “More” button to remove unnecessary elements from the screen. I redesigned cards to more efficiently use space and make them look cleaner.

Clinical syndrome

Doctors can select the main clinical syndrome from the list and then add comments, attachments or accompanying health conditions. Following common mobile design patterns and guidelines I designed flows of adding or updating data using full screen pop-ups instead of doing it in a small card. It provided better visibility, layout and overall UX.

Doctors can also update the clinical syndrome and follow the recovery progress through their clinical appreciations.

Updating clinical appreciation and view history

Vital signs

Doctors can keep track of a patient's vital signs, easily update them and follow their changes. I made the updating process faster by allowing users to update multiple vital signs at once instead of doing it one by one as in the previous version.

Graphs provide a clear overview over the patient’s progress and dynamic while lists provide a detailed history of the patient’s health.

Graph and list of blood pressure history

Symptoms

Doctors can select symptoms from the list or add custom ones. Evaluation of symptoms severity is easy and clear thanks to the use of the common scale. For the symptoms evaluation I used chips instead of a slider as it is more convenient and allows users to enter data faster.

Doctors can easily reevaluate existing symptoms and add new ones if they appear.

Doctors can monitor a particular symptom using the graph and the list and monitor overall patient’s health using history of symptoms evaluations.

Symptom history graph and list and evaluation history list

Treatment

Doctors can prescribe treatment right in the app and keep track of its updates.

App development using Adalo

Adalo - is a multi-platform apps builder to create custom web & mobile applications without code.

Our team decided to check if we can develop this app using Adalo. So to try out the builder I developed the “Create a patient” flow.

* Some things look and work not exactly like in the design due to the restricted capabilities of Adalo.

Outcomes

Thanks to the redesign the app became more convenient to use for doctors on site. With updated UI the app looks easier and clearer. More efficient space management gave users a better overview over their patient’s health records. Added graphs and results lists allowed users to easily monitor their patient’s condition changes and recovery progress. Applied common mobile design patterns and guidelines improved app flows and overall UX, which made the app more convenient and efficient and allowed users to complete their tasks easier and faster. The redesigned app better addresses users’ needs and takes into account their environment.

Other projects

Medical establishment management software

Resonances app

Calendars widget for Mac

Crypto betting platform