Medical Bladder Diary
Project Summary
Details
Feb - May 2021
Design Lead
Responsive Web App
Figma, Zeplin, Whimsical
Distributed team
Background
An estimated 33 million people in the U.S. live with Overactive Bladder Syndrome (OAB), which causes symptoms such as frequent urination and involuntary leaks. OAB is fairly common for people assigned female at birth (AFAB), especially after giving birth. Despite how common the condition is, people often avoid talking about OAB due to shame and social stigma, which only serves to contribute to barriers in medical care.
Renalis is a digital healthcare startup that is determined to tackle the biggest challenges in pelvic health. They approached us with the task of building a bladder diary app for a medical study that would determine the efficacy of a digital tool with self-tracking and educational curriculum. Our goal was to make the bladder diary experience intuitive, easy-to-use, and hopefully even enjoyable.
Product Summary
CeCe is a bladder diary app and educational chat interface that helps people with overactive bladder syndrome track their activities and learn how to improve their symptoms.
Once people sign up to participate in the paid study, they create an account with CeCe and log their urination and drink activity over the course of 3 days. Afterward, the diary portion closes and they receive curriculum regarding OAB through the chat interface. After a few weeks, the diary portion opens back up for the participants to log additional activity. The purpose of this process was to compare the control (initial entries) to the experimental (entries after education) to assess the efficacy of the curriculum.
We customized Google Material Design to create a simple but powerful interface. Below, I explain the design decisions behind the interface.
Design Phase
Feature: Log a Drink or Urination
Study participants need to quickly and accurately log their drink and urination activity in order for the study to be successful.
Because we anticipated participants to be busy with life's demands, we wanted to reduce friction as much as possible when adding a diary entry. I used large touch targets, fun illustrations, and simple selection controls to make the bladder diary experience simple and hopefully more enjoyable.
For questions where the answer existed on a range of values, I designed a custom slider that accommodated both tap and slide interactions. A changing illustration helped explain the meaning of the selected value.
For questions that had a variety of options, I designed illustrated checkbox and radio button cards.
Feature: Day vs. Night Entries
The app needs to track which urinations occurred at night and which urination was the first one after waking up—without increasing the burden of data entry on participants.
It is critical to collect the timing of the urination entries because leaking and night-time urination is a key pain point of OAB. If the curriculum is effective, then theoretically the amount of night-time urinations would be reduced. However, asking the user, "Were you awake or asleep during this urination?" for every entry felt tedious and confusing. The client wanted to reduce the amount of questions and provide a better experience, so we were challenged with implementing a low-friction way to log day vs. night entries.
To help arrive at a solution, I facilitated a brainstorming session with engineers. By using whimsical to map out some different options for user flows, we were able to compare them for complexity, effort, and usability.
Ultimately, we arrived at asking users when they typically wake up and go to sleep during the sign up process. This created default wake and sleep times that appeared on the bladder diary feed, which users could edit if they happened to oversleep or stay up late. We used the wake and sleep times as bookmarks between the drink and urination entries, meaning we did not need to ask additional questions per entry.
Feature: Bladder Diary Feed
Study participants need to view and edit their diary entries in order to guarantee accurate data.
I designed the diary feed so that people could easily recognize the day vs. night entries at a glance and edit an entry in case they made a mistake. I included the following accessibility criteria into the design:
- Use of both color and iconography
- Unique link text (as opposed to all saying "edit this")
- Keyboard and screen reader focusable cards
Accessibility Process
Accessible Design Checklist
Part of my goal in working on this project was to embed accessibility into the design and development process so that our approach could influence other project teams. I documented compiled all my accessible design techniques into a checklist for the design team. While this list is by no means all-encompassing, and accessibility can't be solved through a checklist, this helped raise awareness and provide an approachable start for designers who were newer to accessibility.
Ticket-Based Testing
I was lucky to work with a product manager who also cared deeply about accessibility and knew we didn't need to ask permission for it. She added design and accessibility reviews to all the front-end tickets. For each ticket, I did the following:
- Conducted a screen reader test (Google TalkBack on my phone)
- Conducted a keyboard test
- Generated a report using the IBM accessibility assessment Chrome plugin
Including accessibility in the acceptance criteria was a great learning process for myself and the team. It improved ARIA labels and focus styles for the app and created backlog tickets for issues we found but didn't currently have the capacity for.
Inclusive Mindset
Our team discussed and raised a variety of issues not only related to technical accessibility, but inclusion in general. We made sure to include the following:
- Legal name not required and no gender question (great for queer and trans people)
- Simple password quality validator (to minimize cognitive overload)
- International phone numbers accepted
- No requirements for when wake and sleep times are accepted (great for night-shift workers and others with unpredictable schedules)
My Impact
After I joined the team, I transformed the designs in a way that the client and team felt more aligned on. According to Renalis, "participant feedback was strong on both their experience with the app as well as feelings of agency over their OAB symptoms." This put Renalis on track for submitting the app for FDA approval, so that in the future it may be prescribed by healthcare professionals for those in need of pelvic health support.
Reflection
Working with such a great product team made this such a rewarding experience. I learned:
- Intentional and respectful team communication is critical to success.
- I don't need to ask permission to make changes after a handoff, I can trust my intuition.
- Inclusive design improves the experience overall.
