One Minute Summary
Explore this case study where UX Designer, Vivian, pieces together an enterprise level design system and workshops multiple user flows for a B2B B2C SaaS for healthcare providers and patients.
This project focuses on seven interconnected main pages. Starting from the moment a patient creates their appointments, the redesigned system facilitates a seamless administrative workflows, including the submission of test requests for specimen extraction and the subsequent delivery of test results to both the healthcare provider and the patient. The aim was to establish an end-to-end digital experience that streamlines the entire process, benefiting all users and stakeholders involved.
This project focuses on seven interconnected main pages. Starting from the moment a patient creates their appointments, the redesigned system facilitates a seamless administrative workflows, including the submission of test requests for specimen extraction and the subsequent delivery of test results to both the healthcare provider and the patient. The aim was to establish an end-to-end digital experience that streamlines the entire process, benefiting all users and stakeholders involved.
Image Description: Laptop mockup of an Appointment Table - search bar, filters, export, pagination, main button, six column headers, status variants, and click overlay action menus
NDA
NDA protected case studies focuses on the overall process, methodologies, and designer’s contributions to the project while avoiding any specific details, confidential information, or proprietary knowledge.
Foreword
Provider Portal is one of the largest and longest project I have worked on to date - May 2023.
The proprietary SaaS features 7 main pages and a substrate of sub-flows each containing unique features and policies to better assist medical professionals in their day to day admin workflow.Â
The software houses hundreds of thousands of patient's HIPAA protected data and at the peak of the pandemic yielded an estimate of a million Molecular PCR test results to provide companies, schools, and long term care facilities digestible data to meet their COVID compliance mandates.
This project is special to me because it sparked my interest in what UX Design can do for the future of Healthcare Softwares.
The proprietary SaaS features 7 main pages and a substrate of sub-flows each containing unique features and policies to better assist medical professionals in their day to day admin workflow.Â
The software houses hundreds of thousands of patient's HIPAA protected data and at the peak of the pandemic yielded an estimate of a million Molecular PCR test results to provide companies, schools, and long term care facilities digestible data to meet their COVID compliance mandates.
This project is special to me because it sparked my interest in what UX Design can do for the future of Healthcare Softwares.
Quick Read
•  Largest & longest project to date
•  7 main pages & substrates of sub-flows
•  100,000+ HIPAA protected patient data
• Est. 1 million+ Molecular PCR test results
•  For companies, schools, long term care facilities
•  7 main pages & substrates of sub-flows
•  100,000+ HIPAA protected patient data
• Est. 1 million+ Molecular PCR test results
•  For companies, schools, long term care facilities
Glossary
Healthcare Provider
An individual or organization that delivers medical services, treatments, and care to patients.
This can include a range of professionals, such as doctors, nurses, dentists, therapists, pharmacists, and other licensed healthcare practitioners.​​​​​​​
This can include a range of professionals, such as doctors, nurses, dentists, therapists, pharmacists, and other licensed healthcare practitioners.​​​​​​​
Admin Portal
A web-based or software interface for authorized users to manage and monitor administrative tasks in a system, application, or organization.Â
The admin portal offers user management, content control, data analytics, configuration settings, access controls, reporting, and other administrative tools.
The admin portal offers user management, content control, data analytics, configuration settings, access controls, reporting, and other administrative tools.
About Provider Portal
An Admin Portal for Healthcare Providers, Companies, Schools and Long Term Care Facilities in the United States. Provider Portal enables frequent testing by providing intuitive instructions for test scheduling, test locations, and wait times. The application will rapidly deliver results from our lab partners while maintaining HIPPA compliance.
Problem Statement
Provider Portal is based off of Nucleus’s legacy software Aura Admin; which was mainly a dev built product that was created while working against the clock to meet the COVID testing demands at the peak of the pandemic.
This meant Aura Admin did not have a legacy design file containing a scalable design system, user flows for complex features, annotated wireframes, prototypes or critique documentation should the product begin to scale and reiterate for future implementations.
This meant Aura Admin did not have a legacy design file containing a scalable design system, user flows for complex features, annotated wireframes, prototypes or critique documentation should the product begin to scale and reiterate for future implementations.
Deliverables
•  Create new features and flows 🌱
•  Enhance existing user flows 🏔️
•  Create an enterprise level design system 🧩
•  Enhance existing user flows 🏔️
•  Create an enterprise level design system 🧩
Image Description: Appointment Table Row Component Set
Properties include 2 States, 6 Status Types, 2 Default Fills - Default & Hover connected prototype node
Image Description - Hi-fi user flow of Date Picker for Appointment Scheduler
Migrating to Local Variables
I was able to migrate our Color Styles to Local Variables through a custom plugin recommended by Figma which saved a lot of time in not having to 1. Manually re-enter the hex codes into a Collection then group 2. Reattach components with new local variables.
This meant for every design file with the Aura Design System turned on;Â each hex code attached to the original Color Style would automatically become updated with the newly migrated local variables.
This meant for every design file with the Aura Design System turned on;Â each hex code attached to the original Color Style would automatically become updated with the newly migrated local variables.
Local Variables Palettes for Light - Dark - Wireframe Mode
Requirement Foraging​​​​​​​
Understanding medical providers pain points and needs in their day to day operation was imperative if the product is to become a viable asset that can assist healthcare workers accomplish their tasks.
Requirement foraging was necessary as there were no existing SRS and all of it was achieved through a series of -
•  Daily UX Stand-Ups
•  Weekly UX Workshops
•  1-1 Critiques and Q&A with the Creative Director
•  Feedback from DevOps
•  ​​​​​​​Provider Portal Team review of high-fidelity prototype screencasts
•  Weekly UX Workshops
•  1-1 Critiques and Q&A with the Creative Director
•  Feedback from DevOps
•  ​​​​​​​Provider Portal Team review of high-fidelity prototype screencasts
UX Workshop with consulting Medtech & Validation Director on Appointment Scheduler
Understanding the Provider's Operation
Through Key Questions -
Through Key Questions -
• What are the primary goals and objectives of the Provider's operation?
• Can you describe the typical workflow or process followed by the Providers?
• What are the main challenges or pain points faced by the Providers in their day-to-day operations?
• How do Providers currently interact with the existing systems or tools they use?
• Are there any specific tasks or activities that Providers find particularly time-consuming or complex?
• What are the key metrics or indicators used to measure the success or effectiveness of the Provider's operation?
• Are there any regulatory or compliance requirements that impact the operation of the Providers?
• Are there any known patterns or variations in the way Providers approach their work?
• How do Providers handle exceptions or edge cases in their operation?
• Can you describe the typical workflow or process followed by the Providers?
• What are the main challenges or pain points faced by the Providers in their day-to-day operations?
• How do Providers currently interact with the existing systems or tools they use?
• Are there any specific tasks or activities that Providers find particularly time-consuming or complex?
• What are the key metrics or indicators used to measure the success or effectiveness of the Provider's operation?
• Are there any regulatory or compliance requirements that impact the operation of the Providers?
• Are there any known patterns or variations in the way Providers approach their work?
• How do Providers handle exceptions or edge cases in their operation?
Understanding the Patient's Operation
Through Key Questions -
Through Key Questions -
• What are the primary goals and objectives of patients when interacting with healthcare services?
• Can you describe the typical journey or process that patients go through when seeking healthcare
• What are the main challenges or pain points experienced by patients during their healthcare journey?
• How do patients currently access and interact with healthcare systems or platforms?
• Are there any specific tasks or activities that patients find particularly confusing or difficult?
• What are the key factors that influence a patient's decision-making process when choosing healthcare providers or services?
• Are there any privacy or security concerns that patients have when sharing their personal information?
• How do patients communicate with healthcare providers or access support and information?
• Are there any common patterns or variations in the way patients approach their healthcare needs
• How do patients manage their healthcare records and track their medical history?
• What information or features do patients find most crucial when using the software?
• What level of control and transparency do patients desire when it comes to their health data?
• What are the main challenges or pain points experienced by patients during their healthcare journey?
• How do patients currently access and interact with healthcare systems or platforms?
• Are there any specific tasks or activities that patients find particularly confusing or difficult?
• What are the key factors that influence a patient's decision-making process when choosing healthcare providers or services?
• Are there any privacy or security concerns that patients have when sharing their personal information?
• How do patients communicate with healthcare providers or access support and information?
• Are there any common patterns or variations in the way patients approach their healthcare needs
• How do patients manage their healthcare records and track their medical history?
• What information or features do patients find most crucial when using the software?
• What level of control and transparency do patients desire when it comes to their health data?
Image Description: Mobile Mockup of Patient App
Image Description: Mobile Mockup of Phlebotomist App
Impact
Client User Testing Report
Client User Testing Report
The UX Team strived to achieve timely sign offs and final approval by our client GENETWORx through user needs based research, user testing including edge cases, and A/B testing feedback analysis with wireframe prototypes to maximize design decisions. Aura Provider Portal for Admin healthcare workers is now live and available through our client's websiteÂ
Vivian checks in with the team's Associate Creative Director of UX/UI once in a blue moon to make sure the design system and software is working seamlessly. 💡