Hamburger

Dream Date

Services

Code, Writing

Client

Personal

Completed

Feb. 13, 2016
Phone

OMSI After Dark is a popular after-hours event where the local science museum limits attendance to 21+ and keeps the doors unlocked until 11. Through a series of fortunate connections, The Exchange brought us to the event as a vendor with our own table.

Since The Exchange spans all of Portland, we wanted to create an experience that could be done within the museum and pertinent to the theme of "Sex and Love." With the event three weeks away, Max, Will, and I set our sights on a new, shorter, light-hearted app. Max took audio, Will took branding and onboarding animations, and I took the script and code.

This one would be a web app following a 20-something's wild imagination as he waits for his blind date. Although going to web would require a rewrite from The Exchange's native code, we felt that the inconsistent seven-day buffer for App Store updates could destroy us on such a tight deadline. Additionally, we wouldn't be streaming massive audio files, and a web-based solution would be accessible to a wider audience (read: Android).

The Code

Performance and page weight were two top priorities - the museum has good-not-great service, and the audio files would add enough girth to the page size. DOM manipulation or bleeding-edge feature dection was not required, so I kept the app in vanilla JavaScript, 100 percent library-free.

get and set callbacks were used across the board, chiefly in storing user progress. Similar to Realm in The Exchange project, localStorage was leveraged to track progress between locations.

Exposed functions were kept to a minimum, such as in DD.player (selected portions shown above), and element lookups—like the play button—were performed once and cached.

The audio variable could only be accessed via public functions like .play() or .pause(). This kept the line crossing between elements of the JavaScript to a minimum.

Although jQuery could've been useful with some elements (fadeOut and fadeIn are miracle functions), it wasn't essential for the ends of this project. The main object spread between nine files in addition to two prototype models (Mission and Swiper), totaling about 1500 lines without comments and ~18kb minified.

(function() {
  const scrubber = document.getElementById('js-scrubber-input');
  const control_button = document.getElementById('js-control-button');
  const audio = new Audio()
  ...

  // DD.player
  play: function() {
    scrubber.setAttribute('max', audio.duration);
    duration = audio.duration;
    audio.addEventListener('timeupdate', updateScrubber);
    control_button.querySelector('img').src = control_button.getAttribute('data-pause-src');

    audio.play();
  },
Phone
Phone
Phone

Suddenly, she'd stoop down and motion for me to tenderly break the ground. We'd dig and dig, and slowly uncover a perfectly-preserved fossil, but also uncover our mutual love.

Narrator, Scene 1

...while still following the story's overarching conflict.

In due time, [the saltine] leaves the body and that’s a beautiful thing. Because you can’t carry heartbreak in your gut forever. Girls can smell that.

Narrator, Scene 2

The Script

Similar to The Exchange's early writing foibles, the first iteration of the script was rough. Max and I disagreed over fundamentals: would the narrator talking and imitating voices, or was it multiple voices? Would we have sound effects? We couldn't reach a satisfying middle ground with the source material, so it was tossed.

I rewrote everything from scratch. The scale of the imagined worlds was reduced. Motifs carried through the entire story. The page count was half its predecessor's size. I focused on two characters—the narrator and his date, Kate—and the narrator's seemingly unshakeable heartbreak.

Exchange alumni Sam LaRoe (Hector) and Tammi Heneveld (Riley) returned as the Narrator and Kate, respectively, recording the entire script in a single three-hour session.

Dream Date

The Reveal

On the big night, we took our booth, splayed our Exchange promo cards, set up giveaway headphones, and waited. We immediately realized that we had made a number of critical mistakes.

  1. Our start location inverted the order of scenes (easy fix)
  2. We hadn't rehearsed an elevator pitch (quick! practice!)
  3. People thought we were hawking a matchmaking service (turns out putting "date" and "app" together is an immediate turnoff)

Will created a notice for our table's laptop to encourage people to give our name a fighting chance while I quickly hammered out talking points. We soon fell into a rhythm and tallied 76 taken headphones and 106 unique users by the end of the night. The project's most valuable learning experience came from manning the table and learning how to pitch your product in a trial by fire.

The next day, we all slept in until noon. That...that was the ultimate dream date.

Dream Date

Will's fast-thinking, face-saving maneuver

More Projects