Tuberculosis (TB) is a potentially serious infectious disease that mainly affects the lungs. The bacteria that cause tuberculosis are spread from one person to another through tiny droplets released into the air via coughs and sneezes. TB is fully curable, but treatment is intensive, requires long-term quarantine, and comes with significant side effects.

This project focused on creating a tool that would allow providers in rural countries to better treat vulnerable TB patients and improve treatment outcomes. Prior to me joining the team, a beta application had been developed but still needed significant iteration and testing.

As the sole UX researcher on the team, I was tasked with conducting all of the research for this study. I chose to use both qualitative and quantitate methods to investigate the problem space. I sought to understand the barriers to TB treatment, typical experiences of TB patients and providers, and opinions of the pilot app.

A thorough analysis of the extensive dataset revealed significant design opportunities for the application redesign. I presented the findings in a comprehensive research report for the design team; the following are the most compelling results of the human-centered UX research process,

The next step in the UX process, ideation, involves the development of design artifacts that would streamline the prototyping process of the redesign. The ideate stage of the UX process is all about exploring as many options and solutions as possible. The end artifacts presented here represent multiple cycles of discussion, thus ensuring robust planning guides.

User Journey Maps and User Flows are important in UX because they help explain and visualize how users will interact with the product, including decision and pain points. They also allow rapid interaction design (IxD) prototyping by exploring ideal pathways without designing a full UI. The following user flow focuses on what we called the “Daily Report.” This would be the primary way that patients sent in information to their providers. It needed to include everything that a provider would typically check/record with a patient during a visit.

An Information Architecture (IA) can help organize a complex system into logical sections based on the kind of information that needs to be accessed and displayed to the user. This particularly useful for planning the number of wireframe components needed in a prototype. Our IA organized the application into 5 sections, which were displayed in 4 key tabs. Each tab serves a primary function and is dependent on a specific form of information, e.g., “History,” which holds a user’s full history of submitted results.

We created a Design System to establish a visual language that could be applied throughout the application to ensure a cohesive user experience throughout the application. This unite in design is achieved through the consistent use of established iconography, typography, and UI elements.

After the planning stage, we began the active design/prototyping phase, during which we developed Low Fidelity (Lo-Fi) and High Fidelity (Hi-Fi) wireframes. We designed empathically, always considering the emotional burden that a TB patient would be going through, by reducing the user’s cognitive load through minimal use of text and a prioritization of clear, simplistic, and logical visual hierarchy.

The home page is organized into “cards” that all work together to cohesively give the user a comprehensive dashboard that empowers them to take control of their treatment. Action buttons, with clear and concise call-to-actions, are used to inform the user of things they can do from the home page.

The "My Progress" card was designed with 2 research findings in mind: (1), users sought more information regarding what to expect, this lead to the Treatment Timeline, (2) users needed motivation to continue through their treatment, so "Streaks" were created. Another research finding showed that patients needed and desired medication reminders, so they were incorporated into this page.

The Daily Report was designed as the vehicle through which the patient submitted information about their progress to their provider. As such, we focused on ensuring that this process was easy to navigate. Our research found that users were confused about the order of steps, so we reduced confusion by limiting the direction a user could travel through the flow.

We sought to include as many motivational elements as possible, so we decided to introduce the concept of “Reporting Streaks.” The user would be encouraged to report everyday so as not to break their streak (a streak indicator is also present on the Home page). A calendar view presented an optimal UI for displaying long-term streaks. Another reason for designing a calendar was to allow users to clearly see which days of the week they struggled to report for, thus presenting an opportunity for improvement.

We, however, wanted to prevent a situation where users would be discouraged from using the application if they were to break a streak. To aid in maintaining streaks, and thus preserving user engagement, the team decided to allow users to retroactively report for up to 7-day prior. This feature was central to the Calendar’s design.

Overwhelmingly, our research showed that 96% of participants felt that accessible messaging between providers and patients would be critical to treatment success. Following that important finding, the messaging tab’s primary function is to connect patients directly with members of their support team, like nurses and doctors, to discuss information they submitted via their report.

Additionally, we saw an opportunity for community building through the use of anonymous chat rooms where patients could share their experiences and offer each other support.

Through our research, we identified a design opportunity: TB patients require information about what to anticipate during their treatment. We also recognized that this page could also house information about the application. Whenever possible, we opted to include videos rather than long text responses. Sections are collapsable to ease navigation.

After the design process, which involved significant stakeholder involvement and feedback, the application was ready to be handed off to the software developer team to finalize into a working product. From there, the application was launched in Argentina and Indonesia. Here are some results:

Designing this application was an incredible experience. It was the first time that I led a team of designers and researchers in an end-to-end development process, so it was an learning opportunity for me; I learned a lot! Here are some key take-aways!