Surgeries can be an extremely nerve wracking time in a person’s life. Often times they are left wondering how to prepare for them and what to do afterwards. Doctors are able to answer these questions but they are extremely preoccupied with other patients to be able to have sit down consultations with every patient.
Our goal with the Surgery Care Path webpages was to be a tool that doctors could reference. This tool would give them a resource to send their patients to which would allow them to adequately prepare for their upcoming surgery and know what to expect on the day of and afterwards.
Discovery and research
During our discovery phase, we interviewed patients who were recently involved in a surgery to get their feedback on their experience. We also consulted with doctors on what sort of issues they face when it comes to conveying information to patients. We learned that often times patients aren’t prepared fully for surgery. Doctors wish they had a resource that they could point patients to in order to get them ready for their upcoming care. The doctors also informed us about the large magnitude of content that they had to share with their patients.
Defining the problem
The problems were noticed affected both the doctors and the patients. Patients felt unprepared for their upcoming surgeries which led to apprehension and a lack of confidence. Doctors had a wealth of information to share with their patients but, aside from consulting with their patients one-on-one, they had no avenue to convey it. How could we bridge the gap between making sure the patient is prepared for all time frames of the surgery life cycle and the physician doing their due diligence in getting them ready.
Designing the product
The biggest issue we had with this design was that it had a lot of content! We had to make sure we designed a page that made the “complex and heavy” content, “easy to digest and lightweight”. Our design would become the template for future surgery care paths so we also had to have it be general enough that it could be applied elsewhere.
I was tasked with designing the mobile web page. The content we had would have been far too long and a person likely would have needed surgery on their thumb if they had to scroll through all of it! How could I take this book-like amount of content and display it into a mobile screen?
I did research into best practices around presenting long segments of content and came across a potential solution. Since the content the doctors had was similar to the structure of a book (table of contents, chapters, etc.) I used that metaphor to design a component for a mobile phone. I found a potential solution during my research which also lessened the amount of development time and expedited the process.
Implementing the tabbed drawer
The solution I found came to be known as the “tabbed drawer”: A book-like experience within the mobile web. A user could tap on the different icons to read more about the pertinent information and flip through each section similar to the way one flips through a book.
It also worked well for our needs because it introduced the idea of “progressive disclosure” into our product. Users got the information they needed at that time and did not have to sift through unnecessary content. We tested the usability of this new component with people on various floors in the Kaiser building and they found it to be easy and fun to interact with.
Delivering the product
The template we created have since been adopting for over 6 different surgery types with more down the pipeline. It has been a key driver for patients to get information they need to prepare for their surgery before, the day of, and afterwards.
The tabbed drawer which I utilized on mobile has also become a crowd-favorite amongst the doctors and stakeholders within TTG.