Medicine Reminder App with a Twist— a UI/UX Case Study
An app that remind users to take medicines on time. Scan prescriptions, save medicines, set reminders. Its Easy.
Contents
Overview
The problem
People usually forget to take their medicines on time and face problems tracking their intake habit. They sometimes take incorrect medicines due to lack of information or misjudgment. Neither do they have a proper listing of the medicines they are taking and when to consume them.
The solution
The solution to these problems was to design an Easy to use app that will suit users behavior and needs. The app basically is a reminder application to alert users to take their medicines.
One idea I came across was to let users save their medicines prescribed by their doctors by simply scanning the prescription. The app automatically sets default reminders based on the prescription while also allowing users to edit the same. Users can add instructions or images for each medicine that will help reduce the chances of consuming wrong medicine.
Handwriting recognition technology is being used vastly and developing fast. I wanted to leverage its benefits and reduce work for the users.
Dive directly into the final design solution here:
Easy Onboarding : Many users who will use this app will be above 40 years of age under medical supervision who don’t really want to be bothered with technology. In order to decrease acceptance barrier I tried to design an easy onboarding, I went with simply an OTP verification or just a direct app entrance.
Day wise medicine reminder timeline: Most Medicines are arranged day wise with timelines showing when to take a particular medicine. Each day is divided into three parts — Morning, Mid-day and Night for an easy grasp of information. Each medicine can have a picture, dose, instruction mentioned to provide enough information for the user to take the correct medicine.
Scanning prescription: Doctors prescriptions can be scanned by the user using the scanner build in the application. Using Machine learning the scanner finds the prescription boundary in the photo which can be readjusted by the user. Once the user is satisfied, he can confirm and let machine learning algorithms grab the medicines from the prescription.
Editing Scanned Medicines: Once the medicines are captured from the prescription they can be edited by the user. Reminder can be set for individual medicine or all the medicines at once. User can set pictures or instruction for each medicine by clicking on the edit icon. Once everything is done, the results can be saved which will be reflected on the timelines.
Reminder Notification Screen: Users are prompted to take medicine using a pop up notification outside of the app. Also a full notification screen is shown to prompt user as per convenience. The way notifications gets prompted can be set by users in the settings page.
Medications Tab: To solve the problem of not having a complete list of medicines user is taking and the medicine they have stopped consuming, a separate tab seemed necessary.
It will be helpful for the users by:
- Providing them an overview of the medications history
- The information can be used by doctors while treating the patient
Research
Main purpose of research is to gain clarity on the problem and how to develop potential solution to the problem. It allowed me to think deep into what I really want to accomplish in this project.
Domain Research
I looked into the market for similar products and tried three of the top listed ones in Play store.
Here is the detailed analysis-
The key take-aways from analyzing above applications are:
- None of the applications allowed users to take medicine pictures.
- Considering detailed report of habit trend, only My therapy showed it properly but that too seemed a bit complicated to grasp at first.
- As per my users, they usually discuss about medicines based on morning, mid-day and night instead of specific times. Dividing each day as such makes sense which isn’t present in any of the above products.
- None of the apps solved problem of users not able to understand prescription. This lead me to think of the Machine learning handwriting recognition technology used in my application.
Online Survey
Due to time constraint and limitations to reach out to people, I decided to get my insights by sending out a simple google form to my friends and family members which fell under the category of my user base.
The survey was taken by users aged 24 through 75 years.
I also received an additional advice which I thought can be used in further development of the app.
Interviews and Personas
I reached out to my grandmother to understand her needs mostly in an informal conversation as she is always willing to share her thoughts with me. We talked on google meet so I can grasp more of her response as I could not be with her in person.
My questions were mostly about her habits and what she would want in an app like I am going to design. I also send her few prototypes to see how she is interacting with them.
Using all the research and insights gained I created two user personas to guide my design decisions. I always thought about these personas as I was making iterations in my designs.
Design
Ideation
Based on what I have learned I finalized three most important ideas the app must serve, they may also be called higher level goals.
Sketches and Wireframes
Once I have the ideas clear with all the understanding from the research, I jumped into sketching my ideas on paper.
High Fidelity Designs
User Onboarding
User Onboarding is crucial aspect of app design as it introduces the application to the user.
I wanted the onboarding experience to accomplish the following goals:
- It should tell the user precisely what they can do with the application
- It should require minimum effort from user to register or dive straight into the application
- It should be able to cater to both the personas I created
Design ideas to accomplish the goals:
It should tell the user precisely what they can do with the application: To tell the user what the application does and how they can use it, I designed three visually appealing screens.
It should require minimum effort from user to register: Since major user base falls around 40+ years of age with many of them not having enough experience of using new applications I tried to make the registration process as easy as possible.
To accomplish this, I made two decisions:
- It should not be compulsory for users to register (login/signup): Many of users simply wanted to use the application without going through login or signup process, neither do they know how to enter OTP or have an email ID to signup being older. To facilitate this, I created a Get Started button that allowed users to simply start using the application.
- Register using OTP: While thinking about the ways user registration can be designed, two options came up: Register using OTP and Register using an email ID.
I made the decision of using OTP mainly because of two reasons:
- Most users don’t have an Email Id or simply don’t know how to use them.
- Most users preferred using an OTP when asked in surveys or online interviews.
Scanning Prescription
Using Machine Learning to read doctor’s handwriting is technologically feasible. I agree it may not be precise as handwriting recognition technology is not very accurate given that doctors handwriting is more difficult to read then a normal persons handwriting but its something that can be achieved in years to come.
In research phase I understood that scanning is new to many users especially of older ages but all of them agreed to have used their smart phone camera. So I decided to design the scanner such that its easy to use and feels as if the users is simple taking a photo. Letting the machine learning algorithm do its magic in the backend.
We have all used scanners that are highly accurate to determine the boundary of documents even when the photo is casually taken.
Prescriptions can be of multiple pages. To make it easy for users to scan multiple pages at once before saving for processing, I decided to bring them back to the scanner once they have scanned one page. This will save time while scanning multiple pages as they don’t have to manually open the scanner every time.
They can simply click on the Green tick (Done) button to complete the process of scanning.
Listing Scanned Medicines
When capturing the medicines from the scanned prescription there were certain points that needed additional care:
How the time of consumption of each medicine will be captured?
Most of the time doctors don’t write precise timing to take a medicine. Rather they write morning, night or evening. Or simply they depict it using dots next the medicine.
For eg: Three dots represent Morning, Mid-day and Night.
Since time is not mentioned in the prescription most of the time, the ML algorithm can be trained to capture the dots and understand they represent different phases of a day. Default timings such as 8:00 for morning can be set beforehand which can be modified by the user in the settings page.
Capturing duration of treatment or medicine consumption: Mostly doctors write 15 days or 30 days next to the prescribed medicine to tell the patient for how many days they might need to take the medicine. This can easily be captured by ML model and shown to the user. Users can of course edit this information as per requirement.
Set Reminders for individual or All Medicines: Its important to understand that users may not set reminder for every medicine captured. To provide them with choices I added a toggle button in every card, that can be switched on or off to set reminders for individual medicines.
It may also happen that the number of medicines captured is more and user want to set reminders for all of them. To avoid repetitive work of turning on the toggle of all the medicines user can simply turn on Set Reminder For All on top, that would set reminder for all the medicines.
Editing Captured Medicine
Users can simply click on the edit icon to edit information of a particular medicine.
Adding Medicine Picture
I observed with the analysis of other similar applications that: None of them had the feature that allowed users to click photos of their medicine.
I believe it be a crucial feature in this application because-
- Most user complained of taking wrong medicine as they did not recognize the correct medicine while consuming.
- Most user remember their medicine from its appearance rather than the name of the medicine.
Adding Instructions
While designing the instructions UI component I went through some iterations. Its because Instruction is important when one is taking medicine. Sometimes the ML model might capture the instruction written by the doctor on the prescription but mostly its not the case.
Doctors usually convey the instruction to the patient verbally therefore giving the user the capacity to manually add instruction for each medicine seems appropriate.
I went through some rough ideas for this feature. Finally I selected two iterations to choose my final design from by weighting pro and con of both designs.
Of the two iterations, I finally went with the 2nd iteration because-
- When selecting multiple options checkboxes seemed more appropriate to some potential users I discussed the designs casually with.
- If I want to add upto 8 options too, the checkbox UI won’t seem very cluttered as it would in the one with tags.
Day-wise medicine reminder UI
Once the user has saved the scanned medicines, the medicines gets listed day wise in the Home Tab.
Designing the medicine card:
One key insight I learned in my research was-
Most apps did not clearly show what medicine to take and how what dose needs to be taken.
In order to solve this problem, I started creating ideas of how I want to design the card for each medicine. The card need to accommodate data like medicine name, Dose to be taken, Picture of the medicine(or placeholder if a picture is not taken), Instructions if any.
To show these data points in an easy manner I went through some iterations-
I went with the third iteration due to reasons mentioned above. I also asked some users if they found the images small, most of them said its good and will be better if it can be enlarged. The solution simply can be that if the user clicks on the image, it can be shown in full size as a popup.
Designing the calendar for selecting dates:
Designing a calendar might seem like an easy task and in most cases it is. But in this case it came a bit of a challenge.
My aim was to show the medicines users need to take today along with a simple UI so they can move to another date and see what medicines they need to take that day.
Why was it crucial to design such a UI?
Consider a case, you have to travel next Thursday for a day and you were packing up your things. Now as you are keeping your medicines, you might only want to pack the medicines you need to take on that day.
Another case may be, a father might need to show his son that he has taken all his medicines last Monday, so he can simply select the date and see the data in the app.
In order to achieve my aim, I went through two approaches.
Approach 1:
Approach 2:
By testing with users and casually talking to them I finally decided to go with Approach 2 for the following reasons:
- When I casually tested the two approaches with some users above 50 years of age, I got one common opinion- Clicking on the screen and opening the calendar was easier for them then swiping on a narrow part of the screen.
- Most users said they like the familiarity of the calendar in approach 2.
- My personal opinion is that in approach 1 moving to dates far around 2–3 weeks from now will be difficult as compared to approach 2. Also in terms of simple UI, approach 2 looks more clean with more focus on today and next few dates rather than always showing the week dates.
Reminder Notification Screen
The purpose of this screen is to prompt the user what medicine they need to take currently. The screen need to grab users attention and motivate him to take action.
In order for this screen to grab users attention:
- Clearly stated the task at hand- “eg: 2 Medicines to take”
- Designed each medicine card with large pictures and bold visual hierarchy to represent the dose.
To make the reminder screen a bit different I went through a lot of UI design ideas. And finally confirmed on the one I found fit.
Each UI element in the reminder screen serves a purpose helping user to take their medicine on time while being motivated to do so. Its depicted in the image below:
When user will click on Skip or Snooze the app will ask for reason in doing so. This will help the user to keep track of the decisions they are making. The UI for this feature is in progress and I will add it here once its done.
Medications Tab
Medications tab is where the user can see all the medicines he has saved and is active(reminder turned on) along with the medicines he stopped setting the reminder for. The UI of the screen is simple with a list of medicines in narrow cards to accommodate more number of medicines on screen at once. More detailed can be shown when clicking on the card.
The screen is divided into two sections- Active medicines and In active medicines.
Showing the total active medicines(eg- Total:6) is important so the users know their overall count of medications they are taking.
Evaluations and Iterations
Iteration is an important part of design process. I personally iterate through my designs as I am creating them not just in one phase of the process. From the time I am sketching to when designing a high-fidelity mockup.
Once I have completed the application, I did some more evaluations. Most important of all I send out mockups to my friends and potential users for their opinions. Doing user testing and listening to them, helped me in iterating my designs for the better.
Overall, all users liked the application. But I was looking for some loop holes and their suggestions that would enhance the experience.
Here is what I gathered as major suggestions or concerns from users-
Finding solutions for the above statements:
In the Reminder Notification UI, clicking Complete for each medicine seems very tiring. It would better if it could be a one time thing.
When I thought about this statement, I understood that the user should be given an option to take a combined action for all the medicines at once. It would reduce the effort and solve the problem.
I came around two ways in which it can be designed:
- Providing checkboxes next to each medicine and a check all option- This way users can select any number of medicines they want and Complete them all at once. But this solution caused a few problems-
- Providing checkboxes was making the UI seem cluttered as there are already so many buttons on the screen.
- To provide users with the ability to select all checkboxes at once and take action, I anyway need to add a Select All button. So if the user have to take action for each medicine they have to mark all, and then click on Complete All to take action. This idea led me to think of another solution, which can be more easy to execute for the users.
2. Providing a Drawer at the bottom of the screen- which can be expanded to show option of Complete All, Snooze All or Skip All. The user can take action for individual medicines or simply expand the drawer and take combined action.
There are two benefits to this idea compared to the previous one-
- It isn’t making the UI seem cluttered as no additional UI element is being added to medicine cards.
- The drawer is always available and easily accessible by the user once they know what it does.
In the Medications Tab, what if there are many medicines which can happen after sometime. How will I be able to find one medicine, I mean it would take sometime.
Some ways to find a particular medicine out of long lists are-
- Sorting the list in some way
- Searching through the list
I thought of combining these two ideas to design a suitable solution.
As the medicines are already sorted in Active and Inactive categories additionally I thought of adding a search bar on top. Users can search any medicine by typing its name in the search box.
Previous design-
After adding search box-
Final Prototype
Finally, We are in a stage to make the final prototype of the application.
Find the prototype here.
Scope and Future Improvements
Scope of this application is huge as vast majority of people face this problem of taking medications on time or keeping track of it. Of course the function of the app can be broadened in the future incorporating other features.
Progress Tab UI is in progress. Once I will complete it, will surely add here.
THANK YOU FOR READING.
If you have any suggestions, they are most welcome. And I am always ready for some casual chat. Connect me with on:
Follow for design inspiration DezignDent
We never clap one time in real life then why here? Try clapping multiple times if you liked the case study :)
