Mystery Box

Monday, August 24th, 2015

Ingredient

Mystery Box. Just Mystery Box…f*%k yeah! This ingredient was like a perfect lamb shank…all it should take is a dash of salt*, and it’s basically ready to be served. So simple, yet so versatile — a combination we twice (see Fortnight) discovered to be a bit more volatile than expected.

After weighing the pros and cons of a physical “mystery box” delivery service, we instead decided to create an app that would send all users a random piece of online media every day. We hoped to provide a unique tool for random content discovery, and build shared experience around the daily tidbit.

*Alec is not an experienced chef

Recipes

The ‘Mystery Machine’

Our first task was to decide what kind of content we wanted to delivery in our mystery boxes. We wanted to make it as “uncurated” as possible, while ensuring that we were delivering actual consumable media — e.g., videos, websites, comics, images, etc. We found a list of content providers from embed.ly, an embedding service we initially considered using. After about 15 minutes of scanning through literally TENS of sources, we found many of them to broken or without usable public content. So instead, using this list as inspiration, we constructed our own list of about 60 sources that we felt provided us with an acceptable level of variety in both content and media type.

From here, we built a scraper that selects one of these sites at random, navigates up to five levels deep using links on the page, and grabs the first piece of format-suitable media it finds. After some testing, we also implemented some constraints on the process, including only picking content from the middle of the page, which we found tended to include the actual media we were looking for. We also actively biased toward longer URLs, which proved to lead to more interesting content and avoid places like “/legal”.

@classmethod
def _choose_link(cls, links):
    links_count = len(links)
    if links_count > 20:
        start_index = (links_count - 20) / 2
        end_index = start_index + 20
    else:
        start_index = 0
        end_index = links_count
    links = [
        (link, len(link)) for link
        in links[start_index:end_index]
    ]
    return cls._weighted_choice(links)  # standard weighted random

Daily content delivery

Once the daily content was selected, we had to pick a way to get it onto peoples’ phones.

A simple script, triggered once daily by Heroku’s Scheduler addon, found the URL for the piece of content. The URL was then fed through the Embed.ly API, which extricated useful bits like Title and Picture. Finally, we stored it in, you guessed it, Parse. Parse was then kind enough to allow us to trigger a push notification to all Mystery Box users, letting them know their Box is Ready to be Open.

A unique experience

Since this was a very simple app from the user’s view, we decided to spice it up a bit with some animations and an unconventional skin.

Earlier in the day we had built a simple brand around a pretty generic cube inscribed with a question mark…real creative, right? By giving the “mystery box” a geometric face, spiral pattern and some otherworldly gradients, we turned it into a cool mascot with a cool Indiana Jones-y, ancient-robot-y feel. The rest of the UI followed suit, with a simple patterned background reminiscent of carvings on an Aztec temple, dark gradients, and content cards with slight drop shadows to make them look floaty-er. Basically, we asked ourselves what kind of sh*t would come out of a box that looked like that?

Similarly, we wanted to make the opening of the box a dramatic event. We used animations to make it shake as if something were trying to escape, and then burst, revealing its contents (notably, our current Vice President).

Challenges

Mindset lag

Our original idea was to build Mystery Box primarily for Apple Watch (along with a companion app for iPhone), so our initial discussion around user-experience revolved around the assumption of a 38–42mm screen. With our vision constrained to the limits of the device, we first designed an experience that would be an almost invisible frame around the daily piece of content.

Though we eventually opted to focus instead on building an iPhone app, our thinking carried over to the new medium in the form of a boring user experience. It was already late-evening, though, when we realized that we were moving into a mansion with only enough furnishings for a downtown studio, and set out to create a more stimulating presentation for the mystery content. As a result, we could only devote an hour or two to what we felt could have been a much more developed and polished experience; That said, we were pretty satisfied with the general look and feel produced by our last-stitch efforts.

Lesson: big changes can affect every aspect of a product — try to consider the new connections sooner rather than later.