An app designed to help patients through the surgical process from diagnosis to recovery.


peri • op • er • a • tive


Relating to, occurring in, or being the period around the time of a surgical operation.

My Role

I was responsible for everything related to the user experience design of this project. I used the design thinking methodology by starting out with user research and analysis, which I then developed into user stories and task flows. I used a persona and journey map to help synthesis my findings and keep my user's needs in mind throughout the development of my design.

This led to the creation of wireframes representing the pain points I discovered during my research phase. Throughout my process, I focused on putting my users needs at the center of my work each step of the way.


Conceptual |  AUG-MAY 2021


Figma, Invision, Whimsical, Miro


UX Research, Feature Development, UI Design, Usability Testing


8 weeks

The Problem

The focus of this study is on the patient’s experience throughout the perioperative process: the period around the time of a surgical operation. From 2018 to 2019, there were over 100,000 caesarean section delivery surgeries and around 75,000 knee replacement surgeries conducted in Canada ( 

A study by Goldsmith, L.J., Suryaprakash, N., Randall, E. et al. found that patients who didn’t receive adequate informational, clinical or personal support reported having a more negative perioperative experience than other surgical patients. Although surgeons were perceived as important sources of information, many patients felt that their surgeon did not provide the type of information that they actually wanted to know.

UX Research

Secondary Research

Ridder, Else F. de et al. conducted research to analyse that patient's experience while undergoing surgery. They found a number of themes based on the patient's journeys.

Research Themes


Patients reported feeling a lack of control associated with the power imbalance between doctors and patients and the overall unfamiliar environment of being in the hospital.


Feelings of insecurity were rooted in the unfamiliar environment of the hospital and not having the right amount of information about their upcoming procedure.


Patients reported feeling lonely throughout the perioperative experience due to lack of interaction with others during their hospital stay.


Patients reported a desire for more practical communication and emotional support from hospital staff.


Patients were not able to recall all of the information they received prior to surgery and felt they didn’t have adequate information about recovery after surgery.


Patients reported feelings of acceptance once surgery was about to take place. After surgery, patients felt relieved because the day had gone better than they had hoped.

Design Question

How might we better communicate choices and information to patients undergoing a perioperative procedure and thereby reduce feelings of anxiety throughout this process?

Primary Research

In order to answer this question I conducted research through interviews with those who have gone through a perioperative experience in order to learn the user's pain points that should be addressed in this design intervention.

I started with a list of assumptions that I needed to test throughout the interview process. Then I created an interview guide with a list of relevant questions that would help test these assumptions and discover pain points. Finally I interviewed 5 participants and analysed the findings.


I created a list of assumptions developed from secondary research and evaluated how risky it is to assume each is true, and whether they can be validated.


I believe my patients want to have a better understanding of the surgery process and their possible options


These needs can be solved by increased access to information organized by where the patient is in the process.


My initial users will be individuals who have been referred to specialists with the possibility of undergoing surgery.


These needs can be solved by increased access to information organized by where the patient is in the process.


The user can also benefit from being able to see where they are in the process and get answers to frequently asked questions.


My greatest risk is the differences between surgical processes based on the patient’s geographic location.


The greatest value a person wants to get from my service is to be able to feel more in control during the surgical process.


I believe that if we increase both the quality of information and the access of information to patients undergoing surgery, they will feel more assured and in control during this process.



I will know that this product is successful if patients report lower feelings of anxiety before surgery, convey accurate knowledge about the process when asked and follow rehabilitation instructions more accurately than those without access to this proposed service.


The participant has experienced what it is like to undergo a surgical procedure, is able to recollect the events surrounding their surgical procedure and finally is willing to share their experiences and thoughts surrounding their procedure.


My more notable findings were synthesized into themes and insights. Unfamiliarity was one of the most prominent pain points. These findings informed the creation of my persona and experience map.


Unfamiliarity was a major pain point among participants. Patients reported feelings of fear and anxiety before surgery which was triggered and worsened by not knowing what to expect. When requests or actions were taken that the patient deemed strange or novel on the day of surgery the patient became more anxious and worried.

For example, a patient started to panic when she was asked to simply put a hair net on before going into surgery. It was the last straw for her although it was a simple and non-invasive request.

She had reached a certain threshold of unfamiliarity that she could handle.

Patient's were concerned when small things happened that they didn't expect sometimes causing them to wonder if what was happening standard procedure or due to a lack of expertise on the surgeon's part. Participants reported that simply knowing what was going to happen on the day of surgery would of helped them get through the situation better.

Other Themes


Patient’s don’t realize the vulnerability and physical exposure involved in the perioperative process often making them neglect the importance of having social support.


The quality of patient care greatly decreases during post-op and recovery. Patient's reported feeling like they were a nuisance to medical staff and felt they didn't receive enough information during post-op.


Patients often feel a loss of agency and control while going through the surgical process. They are not sure which questions to ask and feel unprepared for the experience.


Medical staff overload the patient with information that isn't meaningful to them and don't provide the types of information that would make the process less emotionally difficult.


Patients are not aware of how serious surgery really is and the impact it will have on them both physically and mentally.


During surgery day, patients experience novel medical actions they didn't know to expect causing distress, fear and anxiety.




I developed a persona to relfect the behaviors, motivations and pain points discovered through primary research. Meet Stacy, the Inexperienced Patient. This is her first time undergoing surgery and she has some anxiety about what the process will entail. She is handling all the medical appointments on her own since her parents work full time and are quite busy.


Stacy's Journey

I also created an experience map to understand which pain points correspond to certain moments in the surgical process so that I could structure my solution with these in mind. This showed which information was relevant to the user at certain points in the process. I used this information to create a tailored timeline of information that would be relevant to a user going through a Myomectomy Procedure.

User Stories

After absorbing the findings surfaced from research, I started writing out user stories: short sentences that convey desired functionality of the app from the perspective of the user. I started off by writing them all down and then organizing them into categories that could possibly represent features. Then I refined them by adding more stories to certain categories and refining other sections until I felt that I had met the major pain points identified in my research.

Reminders | Calendar

As a patient, I want to keep track of all of my ultrasounds and MRI appointments so that I never miss an appointment and delay receiving important test results.

As a patient, I want to track how many pain pills I’ve taken that day so that I don’t take more than prescribed during my recovery.

As a patient, I want to keep track of the different pills that I need to take based on my post-op instructions.

Recovery Information | Post-Op

As a patient, I want to be aware of the complications that could occur if I don’t follow my post-op instructions so that I am more motived to follow my rehabilitation instructions.

As a patient, I want specific and easy to follow post-op instructions so that it is more likely I will be able to follow them and recover from surgery more quickly.

As a patient, I want a way to check that I am following the post-op instructions so that I don’t have to try and remember what the doctor said while I am leaving the hospital.

Information Access | Timeline

As a New patient I want to see what the process looks like visually so that I can better understand what to expect the day of surgery

As a patient, I want to track my progress through the perioperative process so that I can know what’s coming up next in the process.

As a new patient I want to know the average amount of time it takes for my surgeon to perform the surgery that I will be undergoing so that I can more well-informed choice based on patient outcomes

As a patient, I want to understand the handouts and material provided to me on the surgical process so that I can fully understand what the process entails.

As a patient, I want to be ways to alleviate my fear and anxiety before going into the OR so that I can avoid having an emotional break down or panic attack before surgery.

Feature Creation

My next step was to start ideating by creating user stories, statements which convey the functionality of my app from the perspective of my target user. I organized and grouped these user stories into epics and then started creating task flows. Each task flow is a representation of a specific user goal paired with a few supporting user stories.


Choose a Procedure


Find your procedure in order to view timeline resources.


Choose a surgical procedure

User Stories

 As a new patient, I want to view filter options in order to help me find my surgical procedure quickly.

As a new patient, I want to see an overview of the precedure in order to confirm that I have selected the correct option.

As a new patient, I want to view my timeline after finding the correct procedure in order to learn more about my surgical process.




Create a space where users can voice their own experiences and view others' experiences related to the same type of surgical process.


Select the social home button and view a social feed specific to my surgical procedure.

User Stories

 As a new patient, I want to view other people's experiences that relate to the surgical process I am going through in order to get a more emotional account of this information.

As a new patient, I want to filter social posts of people's experiences so that I am able to see only those that are related to where I am in the surgical process. Ie: pre-op, day of surgery, and post-op

As a new patient, I want to view icons that will allow me to favorite my favorite social posts and save them to a separate folder to reference whenever I need to.




I want to add new appointments and view the questions I would like to ask my surgeon.


View calendar appointments and questions.

User Stories

As a new patient, I want to view all the questions I have for each physician in the same place as where my appointment information is so that I remember to ask these questions.

As a new patient, I want to be able to view instructions that may be relevant to the current appointment so that I don’t have to reschedule my appointment.

As a new patient, I want to view a calendar showing all of my appointments so that I don't miss any of my medical appointments.


Personal Questions


Add a personal question to my appointment.


Click fabricated icon button and add a personal question.

User Stories

As a new patient, I want to be able to add my own personal question to my appointment from anywhere in my mobile app so that I can learn more about my upcoming procedure.

As a new patient, I want to connect my question to a specific physician so that when I enter an appointment with this physician, my list of questions will appear in the details section.

Market Research

Based on the current landscape, there were a number of applications on the market that have been recently designed to deal with the global pandemic crisis with more virtual appointments being conducted to reduce the spread of the virus.

There are some applications that explain medical jargon as well as applications that are meant to educate medical students or perform risk estimations. One direct competitor focused on cancer patient support as well as providing appointment tracking and informational resources.


Concept Sketching

Based on my task flows, I started sketching out the potential look and layout of the screens. I started out with fast and quick concept sketches and then developed more detailed concepts to represent the flow of screens. I also created possible hierarchies of content before developing wireframes. I repeated this process for each task flow and major feature of the design.


An app designed to help patients through the surgical process from diagnosis to recovery.



In order to address users' pain points of unfamiliarity and a lack of control, I created a timeline that outlines events the patient can expect to experience during a specific surgical process. The timeline is categorized by pre-op, day of surgery and post-op phases. Patients can view articles and common questions associated with each event. Timeline events will have images or illustrations making the information more easily scannable and digestable for the patient.

By clicking a floating action button, the patient can add questions that they would like to ask their physician at their upcoming appointment. When adding questions, the patient is asked to choose which doctor the question is meant for. This allows the question to be attached to the appropriate upcoming appointment.



While adding an appointment to their calendar, users will be prompted to choose which physician they are visiting. This will allow the questions saved for that specific physician to appear in the details section attached to that appointment. This addresses the pain point users like Stacy experience where new patients are not sure which questions to ask during appointments with their surgeon. Appointments will also have information about instructions the patient must follow prior to attending the appointment as well as necessary contact information.

Articles and Experiences

Not only can users view articles based on which phase they are in the surgical process, but they can also view experiences in a social feed where users who have gone through similar operations can offer their experiences and insights creating a social community.

Articles swipe forward and backwards to create easy viewing for related topics. Content is formatted so that the user can view digesteable amounts of information instead of long scrolling articles. Users can view how long it will take to read each article with the estimated reading time accessible for each article.

Users can filter through these experiences using keywords or by simply clicking on which phase of the process they are interested in reading about to view experiences relevant to either pre-op, surgery day or post-op.



During both pre-op and post-op, users may be required to take medication to manage pain and symptoms of their condition. Users can view their medication timeline by calendar date and view the quantity and time they should be taking their medications.

Users will have notifications sent to their phone when their medications are due presenting them with the option to confirm that they have taken their medication or to delay the reminder by 10 minutes.

This is important for patients who are on strong pain killers after surgery and may have difficulty keeping track of their post-op medication treatment plan.


It is important to note that the content in this design does not provide a substitute for medical advice or diagnosis by medical practioner. Patients should always consult a medical professional before making medical decisions.

It is also important to note that the form that allows users to set medication reminders should have clear and easy to understand language. Mistakes with medication reminders could lead to disasterous results and is important to consider before creating a hi-fidelity concept.

Next Steps

This project is still in the stages of user testing. After two rounds of testing have been conducted, I paln to create a list of changes based on severity that will be addressed in the following iterations.

After testing is complete, I will develop a visual identity for the proposed design intervention in order to develop branding elements and develop a hi-fidelity prototype.

I think it would be useful to provide surgeons access to this mobile application as the perioperative process differs not only based on procedure, but by doctor and hospital. This would provide greater customization, but may not fit into the time constraints of this project.

This service should be available to all patients who are going through a surgical procedure, but surgical procedures vary depending on the health care system in that region. This design has been created based on the information provided by patients within the Canadian health care system. Content would be managed by those with the appropriate medical knowledge to ensure the quality of the content.

Let's work together.

Feel free to reach and out and connect with me if you also love talking about design and the potential it has to bring about positive change in the world.  I am always interested in refining my craft and continuing to grow as a designer and I welcome collaboration and new opportunities to tackle intriguing problems.

Ways to connect

© Jacqueline Williams 2021 | UX Designer

Website built with Semplice