A person recording a video with a smartphone mounted on a tripod, featuring a built-in light, capturing a smiling individual. The overlay text invites users to submit a video about their TRT experience.
Insight

Building a Decoupled Video Submission Tool: Simplifying Patient Engagement

A man with a beard and mustache stands in a blue button up shirt smiling at the camera
Neel Vora Product Developer

Overview

Our clients, Power to Decide and Missouri Family Health Council and their initiative The Right Time (TRT) Health Clinics envisioned a platform that would enable patients to share their personal experiences effortlessly. The goal was to create a user-friendly solution for capturing and uploading short videos directly from patients’ devices, fostering deeper engagement and connection. However, building this functionality on a decoupled Drupal site introduced several challenges, including managing large video files, ensuring accessibility for non-technical users, and maintaining seamless backend integration. By leveraging advanced technologies like the MediaRecorder API and prioritizing user-focused design, we delivered a streamlined and universal video submission platform that reflects TRT’s patient-centric mission while working seamlessly on any device without requiring app downloads, account registration, or social media integration.

The Challenge 


Developing a decoupled video submission solution required addressing multiple technical and usability challenges. Traditional methods, such as using Dropbox or linking to AWS S3, added unnecessary complexity for users and didn’t provide the tight integration needed with Drupal’s backend workflows. We needed a seamless solution that felt native to the platform while balancing performance, security, and scalability.

Additionally, large video files presented technical hurdles, including ensuring consistent upload reliability across varying network speeds and devices. Enforcing a 90-second recording cap added another layer of complexity.

Equally important was the user experience. Many patients accessing the platform were unfamiliar with browser-based workflows, so we needed to create a solution that was intuitive, clear, and responsive. Users had to feel comfortable granting camera and microphone permissions, and the interface needed to work flawlessly on both desktop and mobile devices.

 

Screenshot of the TRT video submission interface, displaying instructions for recording a video testimonial. The interface includes guidance on lighting, positioning, and background noise, along with a consent checkbox and email input field. Buttons for ‘Start Recording,’ ‘Play,’ and ‘Upload’ are located at the bottom, with a browser prompt to allow camera and microphone access.

Our Approach 

To overcome these challenges, we implemented the MediaRecorder API, enabling browser-based video capture without relying on third-party tools. This API offered a clean, streamlined recording experience that seamlessly integrated with a secure upload endpoint. Metadata like consent and email information were sent alongside video files to the Drupal backend, maintaining security and simplifying the workflow.

On the frontend, we focused on guiding users through every step of the submission process. Contextual tooltips clarified actions like enabling the camera or microphone, while notifications provided real-time feedback using color-coded messages for success or errors. For example, error messages were automatically cleared once permissions were granted, reducing user frustration and streamlining the process. Placeholder messages, such as “Loading camera and microphone…,” set clear expectations during key moments of interaction.

Design consistency and seamless integration were key priorities. The platform adhered to The Right Time’s branding guidelines while prioritizing accessibility and usability. We aligned fields, optimized layouts for clarity, and ensured full responsiveness across devices. Additionally, we ensured the video submission tool was fully incorporated into the existing site, reducing friction for users. Patients could record and submit videos directly on therighttime.org without being redirected to external platforms, and site administrators could manage submissions directly within the Drupal backend. Iterative testing and refinement allowed us to address usability concerns and create a platform that was intuitive for users of all technical skill levels.

 

Image showing the video frame and controls for submitting a testimonial using the TRT video submission tool.

The Impact

Our work resulted in a robust platform that empowered patients to share their stories through a simple and intuitive interface. By directly integrating video submissions with Drupal’s backend, we eliminated unnecessary complexity for administrators while maintaining a secure, scalable workflow. The platform also fostered authentic engagement by enabling patients to contribute their personal experiences, aligning with TRT’s mission of patient-centered care.

 

A notification message on the TRT Video Submission platform indicating a successful video upload to the user in TRT green.

Conclusion

This project highlights the importance of merging technical innovation with thoughtful user-centered design. The MediaRecorder API simplified video capture, while features like real-time feedback and guided messaging elevated the user experience. Rigorous testing across devices ensured accessibility and reliability for all users.

By solving the challenges of decoupled video submissions, we delivered a scalable and impactful solution that meets TRT’s needs while providing a foundation for future enhancements. If your organization is exploring ways to create engaging, user-friendly platforms, let’s connect and bring your vision to life.