Case Study 3:
Medicine Tracking App & Responsive Website
Project overview
The product:
MedMind is an organization focused on creating a better user experience for patients. It needs a tool that reminds patients of taking medicine on time. MedMind’s target users include patients who need to take medicines in the long run, who take multiple medicines, and who have busy schedules and need to have an app/website to remind them.
Project duration:
August 2022 to January 2023
The problem:
Patients who are taking multiple medicines may be confused about when to take which one. Patients who lead a busy life need to keep track of what they take.
The goal:
Design an app that will help patients keep track of what medicines they need to take and send timely reminders to them, if needed.
My role:
UX designer leading the app and responsive website design from conception to delivery
Understanding the user
Target audience:
Adults and the elderly who are busy or need to take multiple medicines or vitamins.
Key challenges or constraints:
Busy life: Some people don't have time to keep track of the medicines they are taking because of their busy and irregular schedule.
Multiple medications: Some people need to take several medications.
Research study details:
I developed some interview questions based on some online research, and then used them to conduct user interviews. Most interview participants reported that they need to keep track of the medicine they are taking and want a reminder for some basic instructions about when to take medicines. The feedback received through research made it clear that users would need an app to remind them to keep track of the medicine they need to take.
Starting the design
Initial design concepts:
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a simple design with key information listed to help users save time and avoid distraction.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes:
After user research and initial ideation, I created the initial designs for the Med Mind, focusing on keeping essential information about what, when, and how to take medicines.
Low-fidelity prototype:
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of adding a new medicine to the medicine to take.
User testing results:
“+ Time” Button: The ”+Time” button does not stand out enough for user to notice
“+” Button: The plus button is on the top and is not easy to reach.
Typography: The font size for each medication info needs more highlight, otherwise it may appear similar.
Refining the design
Mockups:
Based on the insights from the usability studies, I applied design changes like moving “+” icon from top to the bottom left, highlighting different types of information.
Additional design changes included highlighting the “+ Time” buttons, and grouping similar types of information in proximity.
High-fidelity prototype:
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study. Side menus are also added to the high-fidelity prototype.
Accessibility considerations:
Texts are placed with different emphasis and headings and in high contrast with the background color.
Used icons to help make navigation easier.
Clear labels for interactive elements that can be read by screen readers.
Responsive design
Sitemap
With the app designs finished, I started working on the design of the responsive website. I used the MedMind sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Going forward
Impact:
Users reported that the app helped them with managing medicines and keeping track of the medicines they are taking. One quote from peer feedback was that “with the MedMind app, I no longer need to worry about what and when to take my medicines. Everything is in one place.”
What I learned:
I learned that designing an app is a user-oriented process. We always need to put users in priority. Designers need to consider every aspects, including from different platforms users use to the feedback from the user-based research.
Next steps:
Conduct another user research on how successful the app is in reaching the goal to help users track medicine use.
Add more information about the medicines users are taking.
Show charts of medicine history.