UX Case Study: Pillbox

UI concept for a medication reminder app for the elderly.

Leo
Leonard Bejosano Portfolio
6 min readOct 9, 2017

--

Brief

This was a project for my User Interface Software Project course, underlined by the overarching theme of Helping the Greater Good. Together with a team of 3 other HCI students, we pitched our idea: Pillbox.

Pillbox is a medication reminder app for the elderly packaged as a mobile website. Cursory research prior to development revealed that noncompliance to medication regimens in the elderly population range between 40% to 75% (Journal of Clinical Psychiatry), and that smartphone usage among the elderly population (65+ years old) has increased from 18% to 27% between 2014 and 2015 (Aging in Place Technology Watch). Coupled with the increasing ubiquity of smartphones in modern society (The Economist), these two figures enabled our team to decide that a medication compliance utility accessible from smartphones provides a feasible solution to both problems.

Understanding the Users

Research

With our target userbase — comprised of elderly citizens 65 years and older — there were two problem vectors: first was the still-low acceptance of mobile technology among the elderly (though usage is steadily increasing, 27% is still miniscule), an already-small subgroup of the total population at 13% (U.S. Census Bureau); second was their low compliance to medication regimens. The first problem vector indicates a niche group, thus making special consideration for specific needs imperative. We felt no need to dive into further research on this concern and determined from internal discussion as well as consultation with a former occupational therapist that the most important special needs to account for will be poor eyesight and impaired motor ability (e.g., shaky hands).

Personas and Scenarios

We devised two proto-personas and scenarios — with different motivations for compliance and contrasting medicinal regimens — to better illustrate how specific needs may come about based on users on opposite sides of the compliance spectrum.

Ophelia:

Ophelia’s daughter and son-in-law are away on vacation for the weekend, so she has her grandchildren for two days. She has planned a weekend full of activities: on Saturday, she plans on taking the children on a trip to the local museum and to fly kites at the adjacent park after. Once home, she plans on cooking them her renowned mac and cheese dinner, followed by her equally delicious peach cobbler for dessert; on Sunday, a whole day at church spending the morning at worship and the afternoon at the subsequent potluck. Given the need for her attention by three children, comprised of two days’ worth of cooking, dressing, driving, mingling, and stories, Ophelia is worried primarily about her arthritis and hypertension holding her back. Ophelia’s prescriptions require only once-a-day oral intake, but her arthritis and poor eyesight sometimes limit her ability to use her smartphone due to either small text, or pain from holding her phone for prolonged periods.

Carlos:

Carlos takes several medications: Cortisone for arthritis, Metformin and Insulin Detemir (a form of insulin shot) for his diabetes, and aspirin for both. At his most recent check up with his physician, Carlos expressed his desire to gain more independence, referring to how his son calls him to ask if he took his medication. The doctor noticed Carlos has a smartphone and suggested he try Pillbox. His regimen is as follows: cortisone, aspirin, metformin, and an insulin shot in the morning; aspirin at lunch; and aspirin, cortisone, and another insulin shot in evening. Due to this short term memory loss combined with a multitude of medications, it is imperative for Carlos to take everything and on time.

Design

We proposed our design using Balsamiq wireframes.

The scope of the application was intended to be narrow, centered around a main dashboard. Outside of logging in, all functionality was accessible from the dashboard, such as adding or editing a medication, or modifying the Notification settings. In order to observe our users’ possible handicaps, we made liberal use of large and high-contrast elements (text, icons, containers) in order to allow for easy reading and better distinguishing of different parts of the interface at all times. We also made sure all calls-to-action were close to the edge of the phone screen in order to minimize the need for high hand dexterity when navigating the app.

Dashboard

Dashboard to Medication Detail flow.

Being the root of the app’s navigation, the dashboard lists the day’s medicine intake, with check icons denoting if medication was taken on schedule. Outside of logging in, the user can navigate to every other possible place inside the application here: add or edit medication, and edit the notification settings. A floating action button on the bottom right corner allows the user to add a new medicine to their regimen.

Add/Edit Medication

Add Medication is accessed through the floating action button while Edit Medication is accessed from Medication Detail. The user can can enter of modify a medication regimen from these pages with relevant parameters such as regimen details and scheduling parameters. Though largely the same, there are distinct differences between the purpose these pages serve that our team decided to make two distinct pages from each other.

Settings

The settings page was the simplest of all. Apart from requiring a PIN at start up, the only settings to toggle concerned notifications.

Login (optional)

The user had a choice for adding a simple layer of security, a PIN screen at start up was a choice that could be toggled in the Settings page. We decided to stick with a simple PIN and omitted the notion of a comprehensive account system in order to avoid scope creep, to keep the app as simple as possible. If the user elected to use a PIN, this is the first screen upon start up, otherwise, the dashboard is.

Evolution of the Project and Final Thoughts

Our idea originally called for a native mobile app, to be developed using React Native, with Twilio integration for SMS notifications. Being confined to a 10-week quarter where we had dedicated two-thirds of total project time time to UX-related tasks, we ended up creating an MVP, but a web application using Bootstrap and PHP instead. Features included Twilio integration (with a few bugs) and an autocomplete feature (for the Medication name when adding, for example) connected to a fully functioning database with a healthy list of medications and their relevant information.

We planned for future iterations of Pillbox to be native mobile applications with options to notify the users through system notifications or SMS (we even threw around the idea of email!).

In the interest of time, we only created wireframes for the major screens, and though we did consider the interaction flows, omitted their documentation in order to jump as soon as possible to the development of a ready-to-submit MVP. We instead focused our energy on the accessibility of our solutions for users with physical ailments that limited their ability to use their device and, consequently, our product. In conclusion, this project proved to be a good exercise in UCD.

--

--

Leo
Leonard Bejosano Portfolio

Product Management enthusiast | Runs on premium unleaded