Client Description
A reputable marketing agency with limited available development resources approached DesignHammer for additional assistance with a 2-week turnaround, white-label project for their Fortune 500 client. The concept was a highly interactive quiz-style experience to be displayed at a conference kiosk, challenging attendees to answer five questions correctly. The installation was to ultimately serve as a marketing tool, with the content and messaging around the questions and scoring methodology specifically designed to highlight the value of the client’s product.
The Challenge
The quiz experience needed to run all day on a set of large 4k touch panels on a conference show floor without internet connectivity. Storyboards with layout mockups were provided by the client, but they did not include any specific guidance for animations or transitions between scenes. Sound effects needed to be added, which included a looping music bed that was intended to play while users interacted with the quiz. UX was the top priority for the quiz kiosk. How the user felt about their time with the quiz would directly correlate with how they felt about the product offering. This meant that every aspect of the presentation had to feel seamless and the developers had to ensure that the animations ran smoothly in 4K.
The Solution
The application was broken out into a number of screens each handled by a full-page Vue component. The screens corresponded with each particular scene provided by the client’s storyboards. The development structure was designed to allow for multiple people to work on the application without interfering with one another. The architecture of the quiz system was set up to allow all aspects of the visual display to be adjusted independently. This made it easy to refine the parameters over the course of the project in response to user testing.
Approximately 30 hand-tuned animations were created to enhance the [experiential] impact of every single visual element within the quiz. By optimizing the elements for the Electron browser’s rendering engine, the final experience ran smoothly and maintained a crisp frame-rate during multi-element fullscreen transitions. A seamless looping music player was built similar to the video kiosk and smooth volume fading was added.
The Results
The quiz was delivered on time and on budget, all within the proposed 2-week turnaround time. The agency was appreciative of the professional judgment and the creative initiative we took to construct various aspects of the animation and design.
Also, despite initial objections to running the experience in a standard web browser, a successful initial deployment motivated the client to begin presenting the quiz online for more users to experience.
While not initially built for the web, the successful initial deployment motivated the client to request a version that could be deployed on their own marketing site. We were able to update the existing codebase to support generating a browser-based version of the quiz. Our decision to use the Vue.js and Electron build tools made this process fairly straightforward.
