a redesign of a SaaS platform to facilitate the medical tourism industry - supporting doctors, patients, and patient coordinators
Platform: Mobile Responsive Website
Team: 1 UX/UI Intern, CEO, CTO, Front-end Developer, Head of Customer Experience
Role: User Experience Design and Visual Design Intern
BACKGROUND
WHAT PULSE DOES?
PulseProtocol provides technology solutions to facilitate patient, doctor, and patient coordinator interactions across the world. Pulse makes medical tourism attainable and easy while providing quality care from some of the world's best providers and patient-care coordinators. The majority of patients include a demographic of 50 years old and above. Common procedures include dental surgery and plastic surgery.
HOW DOES IT WORK?
Initially, PulseProtocol's onboarding process heavily relied on coordinators following up with new patients each step of the way. I created a data sheet for coordinators to track dates/times of onboarding steps.
Onboarding Steps
1. Submission of contact form
2. Initial coordinator message
3. First coordinator meeting
4. Patient information forms sent
5. Patient information forms completed
After completion of those 5 steps the patient is considered converted. The entire onboarding process took an average of 3 weeks and resulted in 60% patient loss from the initial step. The process was inefficient and took too long.
I worked closely with the Head of Patient Success to make the entire process more efficient and autonomous. Revised lead patient engagement included automated reminders and follow-ups with patients to remind them of incomplete tasks they must complete in order to complete onboarding.
Lead Form
completed
Coordinator automatically assigned based on lead metrics
includes: account activation link, typeform for procedure details, patient cooridinator calendly
Onboarding email automatically sent
Coordinator Meeting
Follow-up email sent out
includes: medical history forms, preoperation forms to be completed
Revised Lead Patient Engagement
WHY DOES THIS MATTER?
Patients have numerous life-threatening procedures coordinated through this platform. If they do not feel confident in the ability and working nature of the platform, how will that convince them to risk their life for a Pulse procedure?
Ensuring that each step that the patient takes is acknowledged by Pulse with email confirmations or text messages, provides the confidence that our users should feel for them to convert to a Pulse patient. This new process is expected to improve patient turnover by ~30%.
Why does mobile responsive matter?
RATIONALE
CONTEXT
The PulseProtocol SaaS platform has 3 main customer viewpoints: doctor, patient, and patient coordinator. An admin view also exists but is not relevant to the mobile view (only on desktop). Over 40% of patients and doctors utilize their mobile devices to access the platform.
PROBLEM
The previous mobile responsive site was barely functional with many instances of organization errors through incorrect translation from the desktop version. Major problems include text alignment and hierarchy as well as un-visible sections.
Using Lucky Orange, a conversion optimization suite that records our users on the platform, and Google Analytics we could understand that a huge percentage of patient engagement loss and drop-off can be attributed to the dysfunctional and broken mobile responsive platform. Patients sign off from the mobile view at least two times more than on the desktop. Customers also stated they were "frustrated" "confused" and felt "incompetent" on the mobile platform. If users are not able to understand the platform, how will they feel confident in risking their lives for health procedures through Pulse?
How might we improve the experience of the PulseProtocol mobile responsive platform to ensure a quality medical experience while remaining consistent with the desktop responsive capabilities?
CURRENT MOBILE VIEW
The current mobile application encompasses all functionalities of the desktop platform.
I used Google Analytics to understand the most used features for each user group and noted key instances of rendering errors in creating an intuitive and easy-to-use mobile-responsive platform.
CUSTOMER VALUES
MOBILE USAGE vs. DESKTOP USAGE
DESIGN HIERARCHY & LAYOUT
POSSIBLE CHANGES
40% of all users access the platform through their mobile devices. In interviewing all user groups, I noted specific features that users are more likely to utilize from their phones. Google Analytics also provided data on this. For example, the message feature is heavily used by coordinators. In breaking down what specific actions users are taking on their mobile devices, we may be able to provide a more directed and intuitive mobile responsive design.
Current mobile designs lack visual hierarchy throughout different text types (heading, body, etc.). The majority of data visualization is inappropriately visualized on the mobile perspective and unable to be treated or understood the same way due to dimension differences.
Taking into account different feature usages, it was apparent to simplify the features on the mobile view to allow a better experience for all users. This would also help development and ease the process of fixing the mobile responsive state. I had to keep in mind that creating a usable mobile responsive was the priority and then later we could focus on adding additional elements that could be developed from the start.
BUILD + DESIGN
Heading 1: SF Pro Display Bold Pt. 24
Heading 2: SF Pro Display Bold Pt. 18
Body 1: SF Pro Display Medium Pt. 14
Body 2: SF Pro Display Regular Pt. 12
#333333
Text hierarchy was important to focus on as the rendering from the desktop view was not appropriate for mobile view.
I also proposed a dark gray to allow a more accessible read.
Most Design System
10 px. radius
18% #000000, Blur = 9
I discussed UI updates with the CTO and CEO including some button additions as well as rounded corner designs on the tile designs. These updates allow for a more updated and current look. The buttons provided easier access to features for our 50+ demographic.
Coordinator
Doctor (before)
Patient
Doctor (after)
These are the simplified menulists for each user. I included updated icons from the Most design library.
Based on shadowing the CEO, Head Patient Coordinator, and speaking to doctors, I was able streamline mobile menu features without impeding functionality.
Accounting Dashboard - Doctor
Clickable Prototype - Patient
FINAL SCREENS
A lot of the data tables and features were not practical to include. For example, the accounting table encompasses almost 7 different columns which I felt were all not necessary to be viewed on the mobile responsive view for the timeframe. I spoke with doctors and coordinators to ensure my understanding of the features' usages.
Desktop Performance Overview
Mobile Performance Overview
Conversations (before)
Conversations (after)
Conversations (after)
Conversations (before)
Dashboard (before)
Dashboard (after)
KEY TAKEAWAYS +
NEXT STEPS
I reworked the current unusable mobile responsive side of the platform working closely with the CTO and engineers to come up with solutions that not only updated UI elements but also kept within current engineering structures - allowing straightforward updates.
I interviewed key user groups to understand areas for improvement as well as key feature usages throughout the platform.
As this was a 3-month internship project, I would have loved to A/B test my redesigned screens with original screens to collect data on their impact. I estimate that it impacts the efficiency by 60% in testing the designs myself and a few users.
There is also going to be a mobile application developed solely for doctors and due to that, I would want to do some cross-referential analysis on the mobile application and responsive purpose. Being able to leverage both their purposes will allow for a more streamlined usage of the mobile application and mobile responsive for doctors.
OTHER WORK
ORGANIZE DESIGN FLOW
I personally organized all Figma design pages into one comprehensive location to facilitate a streamlined design process. This document serves over 7 designers, 4 engineers, and over 5 other executives.
I redesigned various aspects of the SaaS Platform to solve issues of inaccessibility and lack of intuitive use from customers. I designed a payment flow on the patient side, updated the chat feature to include additional document uploading abilities, and a potential Help Center.
I lead the clarification and redesign of the onboarding flow. I introduced other platforms such as Typeform and VideoAsk to facilitate patient, doctor, and coordinator leads for the platform.
Designed PulseProtocol Landing Page through Figma and implemented through Webflow. Focused on creating an intuitive and informational site to serve doctors, patients, patient coordinators, and investors. see it here
PLATFORM REWORKS
HIGH LEVEL PLATFORM DECISIONS
LANDING PAGE