Dr. Care
Figma | August 2020 | Web App
About
Dr. Care was inspired in the after COVID word and the new context that it brought to doctors and patients. Instead of examining patients face to face, doctors had to attend virtual appointments and quickly get used to it.
So, I did user interviews with doctors about their experiences with virtual appointments and what got my attention was the fact that they had to have five different screens opened for each appointment. This experience could definitely be improved, so I used this as an initial problem for this case study.
Then, considering the doctor’s perspective as users, I designed Dr. Care, a telemedicine web app specially built for this after COVID-19 world. It has everything doctors need in just one place letting them work seamlessly focusing on what really matters: treating their patients.
Goals
To design an interface that works functionally during a virtual appointment and that includes all the essential medical tools
To create an app that would attend all doctors specialties
To design a user-friendly interface
To design through user empathy
Side note: This is a personal project designed for this portfolio. No agencies or companies were involved.
My design thinking process
Research
Since this business was completely out of my comfort zone, the first step was to do good research to understand how virtual appointments work and what was currently available on the market. This research was very useful later in the design process giving me inspiration for the app. It also helped me planning my questions for the interviews getting to know the most used terms and languages in the medical environment.
Main players in the market and where I got most inspired by:
Interesting features found in the main players:
Patient record, video appointment or audio-only appointments, live chat with body images, doctors protected signature, patient queue, status of check-in, referral, exams, invoices, and payments.
Constraints found during research:
Most of the telemedicine companies on this research showcase just the patient’s experience and not the doctor's making it hard to find examples to understand the user-flow from the doctor’s perspective.
User interview
Based on my research I elaborated questions and interviewed two doctors. I chose open-ended questions in order to let the doctors elaborate more on their answers. The goal of this interview was to understand better users’ procedures, pains, and what is important to them.
Questions asked in the interview:
How are your procedures during a video appointment?
How do you do to write and send a prescription to a patient in a video appointment?
What do you consider the most important things in a video appointment?
What are your pains in a video appointment?
Do you have time in between patients? What do you do?
Important findings during the interviews:
Working with 5 different screens simultaneously
For attending a telemedicine appointment doctors had to work with several screens simultaneously opened from different platforms or software. Each screen serves for different purpose during the appointment. One is the doctor's calendar with appointment info. Another screen usually is a zoom call with the patient's video. Another is a platform with the patient's history and also where the doctor inputs new records of that appointment. Another is a text software for writing the prescription. Last is an email for sending the prescription to the patient.
Different doctors’ specialty, different needs
Depending on the doctor's specialty the procedures and questions asked during an appointment are different.
Doctors would like to give the same attention and treatment to virtual patients
Doctors would like to give the same attention and treatment to their patients as if they were face to face. This was considered the most important thing by the doctors. Sometimes doctors lose track of their patient video by swapping too many windows which was considered a pain.
Prescriptions are written manually from scratch or by copy and paste
Prescriptions are usually written manually from scratch, however, some doctors save text copies of frequently prescribed medicines and copy and paste them for saving time.
Gaps in the schedule, idle doctors
Doctors always save some time in the day for urgent appointments which sometimes are not filled up. Also, doctors usually have gaps in their schedule that are not filled up with any patient. In both situations, doctors are idle and could’ve been attending to other patients in need.
Personas
I created two personas of potentials Dr. Care users. This helps me avoid generalisation keeping my focus on designing for the target users’ needs.
Identifying user needs & generating ideas
With all the information collected until this point I defined main user needs and problems, so I could brainstorm ideas.
Prototyping
Wireframes were thoroughly tested and validated with the users from the interviews, so I could get quick feedback on sizes, functionality, and technical issues.
For colours, logo, and visual aspects I took inspiration from the main players on this market.
Video screen / Manual Prescription
Video screen / Medical Record
Video screen / Auto Fill Prescription
Home screen / Dashboard
Challenge
One of the challenges here was to design the auto-fill flow creating a place for doctors to quickly add medications, exams, or referrals into the prescription. This was the experience that needed more iterations.
In the beginning, adding medication, exams or referrals were separated actions creating three different reports along the length of the page which was taken unnecessary space and scrolling to fill them up. In the end, these three options became buttons on the top saving space, scrolling, and facilitating access. Also, the reports were unified into one that organises the information while it is filled up.
Colors & Logo
Blue tones were the most used colours in the main players’ brands. Blue represents trust and serenity which relates really well with a medical app.
I also added some yellow to warm it up relating to the word ‘care’ and giving personality to the brand.
I decided to make this step simple and focus more on the app functionality.
Brand's Colors:
Logo text font:
Logo options:
Dr. Care dashboard
The dashboard of Dr. Care has all the basic information doctors need to go through a day of work. It has scheduled appointments for the day, waiting room for patients without appointments, and notifications for lab exam results.
Doctors are notified 5 minutes before the next appointment, so they can get ready and review the patient's history before initiating the video call.
Video appointment screen: Focusing on a seamless working experience
I considered this the main screen in the app and put most of the effort into designing it. This is the screen where the doctors will have their work done by attending patients in a video call, documenting the appointment, and prescribing what is needed. All must be completed in the time frame of an appointment which is usually between 20 to 30 minutes. Because of that, the information on this screen must be organised and easy to access letting their work-flow fluid and seamlessly from beginning to end.
Video and message features
On the left side of the screen, doctors can find the patient’s video with all the features related to it and some relevant information about the patient and the appointment. On the bottom doctors can message their patients or use live body images to better understand their pains.
Medical documentation
The right side is where doctors will check patients’ details, medical history, document the appointment, and write prescriptions. Everything is placed in the sequence most doctors need during an appointment.
Prescriptions
Prescriptions can be created in two different ways: By manually writing them or by using the auto-fill option making it quick and easy to add medications, exams, or referrals.
There is also an option for saving a prescription and reusing it later. It works well as a shortcut for commonly prescribed medications or exams.
In order to prevent fraud, a password is required every time a doctor electronically signs a prescription.
Customisable Medical records
Doctors can customise the content in the Medical Record to better suit their needs. This way, the app works for doctors with different specialties letting them offer a personalised practice to their patients.
Feedback & improvements
After finished, I asked for feedback to three different potential users in order to get the most honest opinion. Different from the interviews, this time I aim for simple and closed questions with only an open-ended one for suggestions. This way is more considerate to the doctors who have busy lives and also it helps me to get quantitative feedback for analysis in this stage. So, with this strategy, I presented to them the features of the hi-fi web app and asked the following 5 questions as feedback.
Following up with the feedback suggestion, I implemented a new customisation option for readjusting sizes. It allows the user to enlarge the video by almost 20% keeping all the other information still working functionally on the same screen. This way, doctors are able to customise their layout choosing from a larger video or a larger writing area. The change is made to be easy enough so they could do it quickly and whenever is more convenient during an appointment.
