MedPro 

Class project Mentored by healthcare professionals

MedPro is a mobile app that informs, confirms, and guides patients through a medical procedure. The app aims to aid patients in making an informed decision by explaining the procedure in a simple walkthrough. Once MedPro confirms the patient’s understanding of the procedure, it will guide them step-by-step until the day of surgery. This project focuses on the surgical removal of gallbladder (Laparoscopic Cholecystectomy).

︎︎︎ View the prototype on Adobe XD

Background

Currently, the way patients are informed about their medical procedures (via consent forms, pamphlets) can be time-consuming and confusing. There is no way to confirm the patient’s understanding and guide them from start to finish.

Objective

MedPro aims to give patients a peace of mind by explaining the procedure in a simple walkthrough, conforming their understanding in an interactive review, and guiding them until the day of surgery. 

Background research informed sitemap then user flow

I began by conducting background research on the medical procedure. This involved interviewing a medical professional and reviewing medical online resources. The research allowed me to understand the different stages of the procedure and to create relevant and accurate content for the app.

Based on the background research, I created a sitemap for the app, which outlined the different sections and features that would be included in the app. The sitemap provided a clear overview of the app's structure and helped me to plan out the user flow.

Background research

Sitemap

Using the sitemap and the information gathered from the background research, I created a diagram that mapped out the user flow from the moment a patient learns about the procedure, to the day of the surgery. The user flow diagram helped me visualize the different steps and stages of the user's journey and to identify potential areas of confusion or difficulty.

Thumb zone study revealed flaw in illustration

To test the user flow and see how it would work in practice, I created a low-fidelity paper prototype of the app and conducted a thumb zone study. This involved me navigating through the app using my thumbs, in order to simulate the way people use mobile apps on their phones.

The thumb zone study revealed that the illustration of the procedure needed to be larger in order to be easily pressable with a thumb. Based on this discovery, I made adjustments to the prototype and created two mid-fidelity prototypes that showcased different flows through the app.

A/B testing for key screens

To make final decisions about key screens and features in the app, I conducted A/B testing, which involved showing different versions of the app to 19 college students in their 20s and comparing their responses and engagement. This allowed me to identify the most effective and user-friendly designs.

Here are some noteable results that made it to the final design:


Slideshow of A/B testing results


Finally, I revised the mockups and created a fully-functioning prototype of the app on Adobe XD ︎︎︎. I referenced the Apple’s interface guidlines and utilized online UI kits to create the looks of the app. 

Reflection

• I learned the importance of conducting thorough background research and understanding the needs and motivations of the app's users. This helped me to create a sitemap and user flow that accurately reflected the user's journey through the app.
  
• The thumb zone study and A/B testing allowed me to identify areas for improvement and to make changes quickly for key screens. 
• To improve upon the project in the future, I would like to test with real users to gather actual data that would inform the design. This would give me a more accurate picture of how the app is used in the real world and help me to make further improvements.
• If resources were available, I plan to measure the success of the product by doing a screen recording of users testing the app. 
  

︎︎︎ View the prototype on Adobe XD