Client Description
A reputable marketing agency with limited available development resources approached DesignHammer for additional assistance with a 4-week turnaround, white-label project for their Fortune 500 client. The agency sought to build a multi-screen video presentation to be set up as a promotional installation at a major industry trade show. The installation would provide users with a self-guided tour of the client’s product through a variety of case studies.
The Challenge
The case study content was to be presented as a series of 4k animations, displayed on massive 72-inch touch screens, with the ability to function without an active internet connection. The installation required a UI for navigating through the various chapters and pages, seamless playback of the various intros, loops, and outros for each video segment, an accessibility mode, and handling for idle timeouts when a user moves away from a screen. Lastly, the solution had to include a flexible mechanism for content updating after initial deployment, as the client was rapidly modifying their content right up to the day of the event.
The Solution
An initial discovery and planning process revealed that a strictly browser-based implementation would not work due to the size of the multi-GB videos in question and inconsistent internet access. DesignHammer elected to instead create a desktop application using a combination of Vue.js and Electron; as their open-source, cross-platform nature is cost-effective and enables fast turn-around times with multiple developers working on the project simultaneously.
A custom HTML5 video player capable of seamless playback of 4K looping video content was ultimately constructed. An entirely custom UI layer, designed to match a set of premade storyboards and animations, was also built on top of the video playback. Swipe and multi-finger tap gestures were enabled for the custom elements, as well as an accessibility feature that accommodated positional access (standing/sitting) to the navigation controls. A follow-up project resulted in the ability to set different target physical display sizes, allowing for the presentation of the same video content on much smaller displays, whilst showing the custom UI at a relatively larger size.
The Results
The experience was delivered on time and on budget, all while supporting a number of last-minute content changes. The application provided an easy set-up process for event administrators and a stable experience for the whole event; several additional instances of the experience have since been shipped at other trade-shows and events around the world.
