Your personal guide to medical procedures
1 UX Designer,  2 Healthcare Professionals

Patients often feel lost and confused before surgery. MedPro, a mobile app, empowers patients undergoing Laparoscopic Cholecystectomy (the surgical removal of gallbladder) by simplifying information, confirming understanding, and providing personalized guidance every step of the way.


Surgery processes can be confusing and overwhelming

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.

︎︎︎ A consent form for the Cholecystectomy procedure


Empowering patients through knowledge and guidance

MedPro is a mobile app that aims to give patients a peace of mind by:
  • Explaining the procedure in a simple walkthrough.
  • Confirming their understanding in an interactive learning experience.
  • Guiding them until the day of surgery.


Building knowledge through background research

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.
  • Create relevant and accurate content for the app.
︎︎︎ Notes from background research

Mapping the patient journey: From informing to surgery

I 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 stages of the user's journey and to identify potential areas of difficulty.

︎︎︎ User flow diagram

Sitemap shapes MedPro's app architecture

Based on the background research and user flow, I created a sitemap for the app, which outlined the different sections and features that would be included in the app.

︎︎︎ Sitemap

Thumb zone study revealed flaw in illustration

I created a low-fidelity paper prototype of the app and conducted a thumb zone study to test out user flows.

The thumb zone study revealed that key buttons within the illustration needed to be enlarged by 30% to improve tap accuracy by users.

︎︎︎ Thumb zone study

Testing out different layouts

To explore alternative approaches to learning the procedure, I created two mid-fidelity prototypes with differing information layouts.

Based on mentor feedback, the second prototype (right) was chosen for its clear step-by-step visuals and intuitive information flow, leading to a smoother user experience.

︎︎︎ Mid-fidelity prototypes

A/B testing for key screens

To make final decisions about key screens in the app, I conducted A/B testing. I showed different layouts of the design to 19 college students in their 20s

Here are some noteable results:

The final design

View the prototype on Adobe XD ︎︎︎ 

I referenced the Apple’s interface guidlines and utilized online UI kits to create the looks of the app. 


  • Sitemap and user flows need multiple revisions.
  • Thumb zone study and A/B testing allowed identifying areas for improvement quickly with key screens.

Next Steps

  • Test with real users to gather actual data that would inform the design revision.  
  • Measure the success of the product by doing a screen recording of users testing the app.

Other Projects ︎︎︎