Project portfolio
“Patience’s Journey” for Adept Marketing
Web Development
OPEN WEBSITEWho is Adept Marketing and who is Compassion International?
Adept Marketing is a full-service creative agency in central Ohio. Their growing list of clients sometimes brings utilization challenges. They tapped Visible Magic to help bring their work to life during times when their technical resources are maxed out. One such project was “Patience’s Journey” for Compassion International. Compassion International is a nonprofit whose sponsorship model has helped 1.9 million children worldwide. “Patience’s Journey” was a success story explaining how the Compassion program helped one young woman, named Patience, escape poverty. The proposed learning experience would serve as a teaching tool to get the value of the program across.
The Problem
The Covid19 Pandemic disrupted the typical method that Compassion used to educate volunteers and supporters— involving a semi-truck that travels the United States and sets up in a community for a few days. Within the truck’s trailer is a realistic representation of a developing country’s environment where participants step into the environment to experience the story of a child growing up in that setting. That experience served as a successful channel for the brand, driving many conversions by inspiring people to sponsor a child, and the original plan was to host Patience’s Journey within that mobile environment. However, with lockdowns in place across most of the country, in-person meetings became impossible. Adept was tasked with solving this problem and came to us to help activate their designs.
The Solution
Adept proposed an advanced, highly interactive website design that utilized looping, fullscreen background video as well as ambient sound effects and more. However this had also had to work seamlessly on mobile devices where that kind of interaction could be battery-intensive.
When all the requirements were assessed, we identified:
The need to build a sophisticated video player
The need to include audio, subtitles, autoplay, and mobile support
The need to be programmatically controllable from the application
All features needed to work seamlessly across multiple platforms
Specific Technical Challenges To Overcome
Autoplay wreaked havoc with Safari.
When autoplay was turned on and the user opened a link to a video chapter, the video played. But if the page was reloaded (with F5) then an error was produced that said: “could not play the video because the user must first interact with the document.”
Since the video player couldn’t process that error, the whole page behaved incorrectly. (The code logic thought the video was being played, but it wouldn’t play due to an error in the video pause state...which breaks the logic behind the player).
When autoplay was removed and the video was started after loading the page, we got the same error.
We muted the sound and that eliminated the error but then the beginning of the video wasn’t able to be heard and the user had to turn on the sound manually and rewind.
Because of these issues, we thought it would be easier and more consistent to programmatically press the play button, but this caused its own set of issues.
Not all browsers could automatically turn on video with sound when the page loaded (without user input).
When automatic video rewinding (seekTo, currentTime) occurred on page load, Safari blocked playback—you could only rewind after the user clicked the play button.
Auto-rewinding large videos to the desired segment caused audio problems at the beginning of the video To solve this problem we mute the sound in the video until the end of rewinding (player returns the event of the end of rewinding). As an option, in addition to mute, you can show loading indicators.
The task was to include an automatically looped video segment in the background after the end of the main video. When the main video ended, we created a new component. It worked fine in all browsers except Safari. In Safari the video did not start (just a static image) and no errors occurred. Since, in our case, it was the same video with different timelines, we just took the main video and rewound it.
The Result
The final project came together as an intuitive, immersive, bullet-proof video experience that could fill the gap for their travelling road-show. In addition, it was a highly portable experience and could be brought into the homes of hundreds of thousands of potential donors.
Work Performed
Programming
Products, MVPs, and Startups
We provide end-to-end technical solutions for enterprise, brands, digital agencies, and startups.
How can we help? Let's talk!
