Digital Surgical Journey
Research-based, data-driven mobile experience guiding patients through outpatient surgery for a leading U.S. healthcare provider.
UX/UI designer, UX researcher.
My Role
8 months
Timeline
Tools
The Problem
In day-to-day practice, our client faces a high rate of cancellations and rescheduling for outpatient surgeries, primarily due to patients feeling nervous, unprepared, and not following pre-surgery instructions.
The current mobile app lacks features specifically designed for outpatient surgery, contributing to increased patient anxiety and poor preparation, causing significant financial losses and operational inefficiencies for the organization.
The Goal
Our goal is to create a brand-new and seamless digital mobile experience for outpatient surgery which offers comprehensive resources and continuous support. We aim to empower patients, reduce anxiety, and ultimately decrease the financial losses associated with cancellations and rescheduling, enhancing both patient satisfaction and operational efficiency.
What Makes This Project Unique?
Designing for Millions of Active Users
Our client serves over 4 million active members, making scale a key consideration in every design decision.
Extensive Cross-Team Collaboration
Due to the large scale of the product, I not only worked closely within my squad alongside PMs and engineers, I also collaborated across a larger product team of over 80 designers and 10+ squads, aligning solutions and co-working on overlapped areas.
Deep Commitment to Accessibility
Accessibility wasn’t an afterthought—it was at the core of our design process. I partnered closely with the ADA team and accessibility experts to craft an inclusive, WCAG-compliant experience.
Design Sprint
In order to better understand how our digital experience can facilitate the outpatient surgical journey, we started with a Design Sprint 5-day Design Sprint involving designers, product managers, engineers, researchers, and stakeholders to answer critical questions and requirements through design, prototyping and testing ideas.
Understand & Gain Alignment
On day 1, we collaborated through exercises to identify detailed journey maps related to the outpatient surgical experience, synthesized learnings we got from previous user studies around procedures, listed out hopes and fears to eventually translate to clear How Might We statements.
Day 1
Diverge on Solutions
On day 2, we focused on bringing in various design ideas and examples to spark inspiration and maximize creativity. We did Lightening Demo and Crazy 8 exercises to allow all participants sketch out their ideal surgical experience. We believed that designers should not be the only team working on defining the perfect experiences. It’s critically important to include opinions from all user groups of the experience and make sure needs and issues are taken from all perspectives. The results really gave us a more comprehensive picture of how different people are envisioning this experience for them.
Day 2
Converge on Solutions
We reviewed all concepts together and let everyone vote on ideas to move forward with. All participants have the equal opportunities to raise questions, bring up concerns to generate concious discussion.
Day 3
Prototype Storyboard
After defining the design direction through collaboration, we started building the storyboard together. It’s also the time to take back the journey map we worked on day 1 and align it with the story board to imagine the new user experience.
Day 4
Prototype Review & Research Plan
On day 5, we built out the draft prototype and bring to review with the whole group in the workshop. It’s fully aligned with what we have discovered, defined and aligned on the solution in the past few days. Also we initiated the research plan to test out with users the initial solution.
Day 5
Post-Sprint Concept Testing
Following the design sprint, I conducted user testing to evaluate design affordances, understand user engagement in their preparation journey, and refine information presentation. The insights gathered significantly shaped our design approach.
-
Curtis
Retired Attorney, Age 65
-
Teddy
Business Owner, Age 64
-
Cecilia
Stay at Home Mom, Age 46
-
Sarah
PR Marketing, Age 49
-
Eugene
Police Officer, Age 56
Testing Findings
Our testing participants provided valuable feedback on screens such as the orientation screen, surgery appointment screen, surgery preparation screen, and additional support screen. While we received positive feedback that highlighted the effectiveness of our approach in reducing patient anxiety and improving overall satisfaction, we also identified areas where our initial concept designs fell short.
Orientation Screen
Users responded positively to the intro screen.
The concise task list was well received, providing a clear starting point before navigating detailed appointment information.
Users expressed the need to confirm basic appointment details upfront to reaffirm their care objective and begin planning.
Appointment Details Page
Users appreciated a chronological list for procedure preparation at this stage.
Some expected a stronger call-to-action directing them to the next task or set of tasks for the day.
Many found the distinction between appointment-related actions and procedure preparation tasks unclear.
Insights from user feedback indicated that section order adjustments might improve clarity and navigation.
Procedure Preparation
Users responded positively to a dedicated preparation section.
Feedback revealed the need for greater flexibility and more robust features.
Many users requested options to print, add tasks to a calendar, and receive notifications.
Additional Support
Users preferred contextualized support over a centralized learning section.
Many sought helpful content within the procedure preparation list.
Findings indicated the need to integrate support resources more seamlessly into the preparation journey.
Design Phase
After consolidating the test finding, I moved into the visual design phase for creating high-fidelity prototypes, adhering closely to the client's established design system. This phase was also highly iterative. I integrated user testing in the process before finalizing the prototype for delivery, making sure I can collect real-time feedback and make necessary adjustments.
Testing on Initial Prototype
I conducted another round of user testings after the initial prototype in place with a specific focus on the pre-surgery tasks section. We aimed to assess how intuitively users could navigate the interface and complete pre-surgery preparations using the app, and document any challenges they may encounter during interaction.
Initial prototype
Objective
Evaluate the overall usability.
Evaluate discoverability of Pre-Surgery Tasks card and Guides & Support card.
Methodology and Participants
Online 1 on 1 interview via Zoom where members is presented with the Figma prototype.
A total of 6 members from various regions. 4 out of 6 have had out-patient surgery before.
Key Research Questions
Is the overall experience easy to understand and easy to follow?
Are pre-surgery tasks (e-consent, request doctor’s note) helpful and easy to complete?
Are documents and instructions helpful?
Is the PVI experience relevant and helpful?
Key Findings
Overall surgical experience is easy to understand and easy to follow.
All participants responded positively about the overall usability and intuitiveness of the surgical prototype, saying that it’s very easy to understand and follow, adequate, comprehensive, self-explanatory and helpful.
Status tags on Pre-Surgery Tasks screen are understandable, but often perceived as buttons.
Status tags with various status are well received. 4 out of 6 participants misunderstood the status tags as buttons to click, though they figured out to click the text links soon after.
Next step:
Update visual style of the tags to avoid confusion.
Still keep visual emphasis on important status
Entry point of Documents and Instructions on surgery details screen are often missed.
Next step:
Update visual style of Documents and Instructions.
Combine Pre-Surgery Tasks and Documents and Instructions into one card.
Half of participants missed Documents and Instructions section on surgery details screen. Some feel pre-op instructions are missing which are very critical. Most noticed Documents and Instructions when asked again or hints are given.
All members valued the PDFs for providing helpful preparation information. Some members find the content and categories are too generic and hard to know what to expect.
Surgery guides PDFs are found very helpful, but content is too generic.
Next step:
Improve copy of the headings.
Clearer PDF titles.
Participants get confused to see Documents and Instructions link in PVI, thinking they are new documents different from pre-op. Participant get confused between Notes and Doctor’s notes.
Content on PVI screen cause confusions.
Next step:
Improve copy to be more clear.
Delivered prototype
We made adjustments based on user feedback from the testing, focusing on enhancing the intuitiveness of the navigation and the clarity of information, particularly in the pre-surgery tasks section. After implementing these refinements, the optimized prototype was finalized and delivered for development.
Everything in One Place
The surgery module consolidates all essential information into one accessible place, providing patients with core details, various resources, difference support channels and many more.
Guided Surgery Preparation
Central to our guided experience is the surgery preparation timeline we designed, structured to follow the critical timeline leading up to the surgery. This timeline includes all necessary tasks and guidelines, allowing users to easily understand and follow the steps required for successful surgery preparation.
Comprehensive Post-Surgery Care Guidance
Our experience also extends to comprehensive post-surgery care guidance, ensuring that patients receive continuous support digitally even after their procedure. The intuitive design of this feature aims to enhance patient confidence and promote faster, smoother recoveries, ultimately contributing to improved patient outcomes and satisfaction.
Accessibility Highlights
The final design solutions prioritize inclusivity and usability for all users by adhering to best practices and accessibility standards.
Initial Success and Continuous Improvement
Following the release of the MVP version of our new outpatient surgery experience, we saw an impressive adoption the first three weeks on the mobile app. We are closely monitoring the clicks and visits on each specific feature, gathering valuable data on user interactions and behaviors. This ongoing analysis will help us identify areas for improvement and ensure that our solutions continue to meet patient needs effectively.
59,411
clicks on surgery banner on home
14,427
visits surgery module
9,808
visits on surgery time
Empathy-driven design and iterative testing are essential for creating solutions that resonate with users and achieve measurable impact.
My Takeaway #1
Cross-functional collaboration and clear communication significantly enhance project efficiency and outcome quality.
My Takeaway #2
Next project