MedPro 


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





Example of a consent form

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 learning experience, 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.


User flow diagram



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.


Thumb zone study



Tested out different ideas using mid-fidelity prototypes


Based on the discovery from the thumb zone study, I created two variations of the mid-fidelity prototypes. These prototypes allowed me to test out different design elements and see which ones worked best quickly. 

The screens for learning the procedure from the second prototype (on the right) received a much better feedback.




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






Other Projects︎︎︎