miDOT centered



Leverage mobile health to improve tuberculosis treatment

emocha Mobile Health Inc.


Lead Product Designer (UX/UI Design)


Direct Observed Therapy (DOT) is currently the standard of care for tuberculosis (TB) treatment. A healthcare worker is required to watch and confirm that tuberculosis patients take their medication, either at the clinic or at the patient's home. This is to prevent the development of Multi-Drug Resistant TB strains, and to completely eradicate the disease while it is treatable.

The project has a simple solution: use the camera on mobile phones to record a video of patients taking medication, and upload to a secure server for the healthcare worker to watch on his/her own time. Dr. Maunank Shah, a leading infectious disease expert, provided the research and user-testing necessary to make miDOT a feasible reality. This project took miDOT from prototype to product.

miDOT is currently being used by various health departments in Maryland, Texas, and California with ongoing negotiations for international implementation.


Tuberculosis treatment requires Direct-Observed Therapy (DOT), but it is costly, inefficient, and cumbersome.

We conducted research interviews with Dr. Maunauk Shah and his team at Johns Hopkins Hospital. Their insight provided detailed information on the specific obstacles to treat tuberculosis.

  1. Time, effort, and expenses of healthcare workers and patients are strained due to DOT requirements.
  2. Tuberculosis patients have difficulty adhering to medication therapy that lasts a minimum of 6 months. Multi-drug resistant TB requires therapy that lasts approximately 2 years.

Research and definition

miDOT consisted of two main interactions-- one for the patient on mobile phone, and the other for the physicians on desktop computers. The tool was meant to be used as a way to build on the existing personal connection between patients and healthcare workers.

How to arrange big data on an interface that is easy to understand and easy to navigate?

White-board sessions with Dr. Shah and clinic visitations revealed what physicians needed to see on the desktop. Observations of patient/physician interactions and current DOT care procedures informed the flow of the interface.

We began by determining the most commonly used modules for individual patients and designing key interactions between the healthcare worker and the patient. This was then followed by the overall patient-listing and general interactions that the healthcare worker would experience on a day-to-day basis.

Wireframes - Prototypes

After working out initial wireframes and interaction flows on the whiteboard, we tested prototypes with users.


App workflow


Preliminary mockup before coding. (made in InDesign)

Desktop Interface

Wireframes - Prototypes - Mockups

Rough wireframes were generated in Keynote before refined mockups. These were used as lo-fi prototypes to gather feedback before building out accessory features.