Medical monitoring app
The app for doctors working on site to monitor their patients’ health and recovery progress.
Jul 2022 - Oct 2022
UI/UX Designer
App screens
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
Screens of the old app design
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.
Information architecture and user flow
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.
Main page and create patient page
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.
Patient profile
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.
Adding a clinical syndrome
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.
Adding vital signs
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
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.
Adding symptoms
Doctors can easily reevaluate existing symptoms and add new ones if they appear.
Reevaluating symptoms
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
Doctors can prescribe treatment right in the app and keep track of its updates.
Adding treatment
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.
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.