2017
FX Networks
Archer, P.I.
Animation / Creative Direction / Motion Graphics / Quality Assurance / Sound Design / Multiplatform Storytelling / UI & UX / Writing
I created, written, and narrated this short overview of the app for award consideration.

Archer is an Emmy Award winning animated comedy on FXX. Originally set in the world of international espionage, season eight is a 1940s noir detective story that unfolds entirely within Archer’s comatose mind.

To complement the viewer’s experience, I devised the concept of Archer, P.I. – a proprietary and groundbreaking game that used an AR camera to interface directly with the show to reveal supplemental interactive narratives. The integration of these concepts was something that had never been attempted in the history of television.

You play as Archer’s new partner with eight cases to solve – one for each episode of the season. You must use the AR camera to collect clues from the show that unlock puzzles and advance the interactive narrative. The spirit of the game is similar to classic 'point-and-click' adventure games, complete with familiar characters and strange interactions.

Quote

The 'Archer' team made an app that could change the way we watch TV.
Uproxx



FX were very supportive of the app and even shot a TV commercial to promote it.

This unique and innovative approach to audience engagement was recognised in 2017 when Archer, P.I. won two Clio Gold Awards for Game & App in the medium of Television/Streaming: Digital/Mobile, and in 2018 it was honored as a Shorty Award Finalist. It also secured a Shorty Award Nomination and a Webby Award Nomination (coming in 2nd behind Star Wars™: Jedi Challenges for 'Best Use Of Augmented Reality').

Quote

They're taking that extra-screen experience to a place not seen on a television show before.
Pedestrian.tv

Detailed Overview

Assembling A Dream Team

I conceived the idea of Archer, P.I. quite late into the production of season eight. The game was designed to accompany the new season, but there were just four months before it aired on TV, and at that point the app was just a thought in my head! There was also no blueprint to follow – no one had ever made an app that interfaced with a TV show using AR, so exactly how that should work would need to be figured out.

After a pitch to the show's producers I was given the green-light to proceed. We assembled a small dream team from our in-house crew. It was Floyd County Production's first app and a truly collaborate effort only made possible by bringing together some of the best and brightest talent the studio had to offer.

As a hands-on Creative Director, I was not only responsible for orchestrating the overall vision, but deeply involved in all aspects of the apps creation – such as game mechanics, level design, narrative, character dialog, animation, motion graphics, sound design, web design, UI, and UX. I also directed a team of artists who created bespoke backgrounds and characters.

The rest of the core team consisted of Bryan Fordney (Technical Director, Character Dialog, Narrative), Mollie Brock (Production Manager), Tim Farrell (Level Design, Narrative, Character Dialog, Animation), Jen Garcia (Lead Software Engineer), and Chi Doung Sato (Lead Illustrator). We put our current projects aside, and set to work in a race against the clock!

Attacking The Time Crunch

With only four months until the season aired, the race was on to develop my concept into a polished App Store submission. Luckily we had a few shortcuts due to the game being produced under the same roof as the TV show. This was advantageous in a number of ways and we hit the ground running with:

  • Experienced crew. Our team knew the show's canon back to front and had a deep understanding of what our fans were looking for based on our previous Emmy Award winning interactive work.
  • Veteran artists. New character, prop, or background art could be created both quickly and accurately on-model by the same experienced artists that work on the show.
  • Pre-existing artwork. Large portions of the artwork could be borrowed and adapted directly from the upcoming season.
  • Up to date reference material. New episode scripts and storyboards from the show were instantly available to our team – vital in a companion game so closely knitted to the season narrative.
  • Constant quality control. We checked our in-episode AR targets at various stages of production to confirm that they still worked or provide fixes if they didn't (due to lighting changes, scene reframing, etc).
  • Instant answers. Questions about an upcoming episode or an idea for the game could get an instant answer from the show's executive producer Matt Thompson, who literally worked in the next room.

All of these in-house advantages were vital to getting the app made on time. If it was farmed out to a 3rd party studio like other games based on popular TV franchises, the natural delays and bureaucracy inherent in round trip communication, asset procurement, AR testing, and studio approval would have made the four month task virtually impossible.

Perfecting The User Flow

Throughout the production of the app, I was responsible for creating user flow wireframes for each of the eight cases, in addition to the main menu, and tutorial level. Due to our short schedule they were essential bibles that ensured all departments were literally on the same page and working efficiently. Each wireframe was also submitted to FX Networks for approval before the next phase of work began, saving time should changes be requested.

This wireframe details all the possible paths from launching the app up until the start of the Tutorial
This wireframe details all possible paths from playing through the Tutorial to the selection of a case

The Overall UI

I designed the UI to strike a balance between modern, clean lines, and the very stylized 1940's aesthetic of the season. The neutral beige & brown colour palette gives the UI a Bakelite quality and helps it to recede a little. The typeface is an interesting retro riff on the classic Gill Sans and harks back to the pre/post war era.

There's also a few period flourishes here and there, such as the Art Deco column motifs either side of the Achievement progress bar, the subtle Art Deco background pattern of the object screens, and the stylized 3D case names based on classic Film Noir movie title design.

UI

Main Menu UI

The exterior shot of the Dreamland club provided the perfect backdrop to the Main Menu. Not only does it provide intrigue and mystery as to what lies within, it was the focal point of the new season (promoted as 'Archer: Dreamland'). It made perfect sense to feature it prominently at the start of the game.

Start Credits
The screen simply pans across when Settings, Credits or Legal is selected. This keeps the player inside the experience.

Navigation UI

The game is centered around three main screens that are activated using a simple three button toolbar at the bottom.

  • Camera. Where players can capture AR targets from the TV show or interact with real world AR objects.
  • Inventory. Where the captured AR items are stored and where the bulk of the game takes place.
  • Achievements. Where players can check their overall progress throughout the whole game.
Camera View

UI Animations

I devised and created a series of UI animations to show useful feedback, draw attention when necessary, and bring a cute visual flourish:

  • Achievement. When a new achievement is collected, the trophy icon does a momentary bounce of excitement.
  • Inventory. When a new item is collected, a tile drops into the Inventory icon, and a red dot indicates that something new awaits. This is important because while most of the game is played in Inventory mode, some items are collected in Camera mode when the Inventory itself is not visible.
  • Sweepstakes. This animated button sat in the lower left corner of the main game window and was used to promote the sweepstake promotional period.
  • Makable AR. This animated button sat in the lower right corner if the selected object could be downloaded as a cuboid net for printing. After assembling, the player can interact with it in the Camera mode.
  • Loading. A thematic Noir style loading animation based on phases of the moon is used throughout the game in place of a generic progress bar or loading wheel.
All Animations

The Basic Game Mechanic

Below is a brief screen recording demonstrating the basic game mechanics.

  1. The player points the Camera at an AR target in the TV show to bring it into the game.
  2. The target drops down into the Inventory, showing the player where to access it.
  3. The Inventory button is pushed and its screen is opened.
  4. A puzzle is presented where the player is unable to proceed without solving.
  5. The player uses a previously collected item in the Inventory and combines it with the new item to solve the puzzle.
A brief video demonstrating core game mechanics (19 sec)

Walkthrough: The Tutorial

Everybody hates tutorials. But after some QA testing we realized that the integrated AR / TV concept was so new that it needed a brief explanation. Also, a sizable portion of the audience might not be familiar with common drag and drop interactions of 'point & click' style adventure games. After some experimentation we designed a short tutorial to guide the player through the basic game mechanics – from collecting clues with the AR Camera to interacting with them in the inventory.

tutorial_1
The game begins with a simple demonstration on how to grab an item from the TV show using the AR camera.
tutorial_2
Now that Archer has collected the scotch, you must take the glass from his desk and pour him a drink.

Walkthrough: Case One – Ruff Customer

We designed the first case to be an easy one to get started with: a missing dog. For brevity, this walkthrough only shows key interactions and does not include all dialog, gameplay or character interaction. This is played along with episode one.

case_1a
Find the lost dog! You just missed the client, but he left a flier on the chair that you can collect and look at. Silhouettes in the Inventory give clues of what to look for – a dog (obviously) and something resembling a dial. There's also a few question marks for secret items.
case_1b
You spot a dog in the episode and collect him with the Camera. He's now in your Inventory to examine. You try to look for a dog tag, but when you touch him he growls at you. You'll need something to pacify him.
case_1c
Back in the episode you spot a safe dial matching the silhouette and collect it with the Camera. Once in your Inventory you can turn the dial, but what's the combination? Luckily Archer left you a handy note. This is where I troll the audience a little…
case_1d
I wrote a gag which stressed the importance of the ridiculously long code, and how it would be changed every day. It isn't. It doesn't even matter. As soon as the player moves the dial back and forth a couple of times the whole mechanism falls apart. Shoddy workmanship! Through the hole you can see there's something back there.
case_1e
The hole is too small to fit your hand through. You collect the vacuum cleaner next to the chair in the opening scene of the game and drag it onto the gaping hole. A priceless baseball signed by Yogi Berra is sucked out.
case_1f
You drag the baseball onto the dog and he catches it! Good boy! He calms down, and you finally get close enough to read the tag – it's him alright!
case_1g
Tapping on the tag initiates a phone call to the owner – none other than Dr Krieger himself. As with all the cases, you're presented with a photograph to tie everything up in a neat little bow. Case closed!

Achievements

Achievements are awarded for a number of activities, such as finding your first AR target, completing a case, or discovering a hidden easter egg – such as the example goof below where the player can turn on the vacuum then toss a baseball onto it from the Inventory.

The achievements are represented as coins and are less prominent until collected. Achievements that require multiple steps are represented as a segmented coin.

Achievements
Earn Achievements for completing various tasks. View all the possible achievements in Achievements view

Troubleshooting

We found through extensive QA testing that the AR camera could occasionally struggle to detect a target under certain rare conditions. We also found that players needed some guidance on AR targets to look for outside of the show itself.

To assist in these scenarios we created a handy help menu which is accessible in the Camera mode via the '?' icon in the bottom right of the screen. It lists several tips that can optimize the experience (such as pausing the show or getting closer to the screen) and features a short list of additional targets (such as promotional items and dollar bills).

My concept for the help menu illustrations is in keeping with the 1940s esthetic of the season. They feature an anthropomorphized Leica III camera and a black & white 1940s tube TV set. Illustrations by Chi Duong Sato.

help

Switching cases

The Footsteps icon at the bottom right is visible in both Camera and Inventory view. It allows the player explore the various cases, see which episodes are linked to them, open a new case, continue a case, or replay the tutorial.

If a case is 'closed' then an achievement coin is displayed along with the option of playing again (to try for any missed achievements, etc). We decided for subsequent playthroughs that collecting AR targets shouldn't be a requirement. All previously collected AR clues would remain in their inventory, therefore saving the player from having to go find the episode and watch through a second time.

Switching Cases
Explore new cases, replay old ones, and check which episode you need to play along with.

Case Intro Screens

Below is a brief video (6 sec) showing the case intro graphics that I designed and animated. After a case is selected, the graphic animates on screen via a sliding door transition.

It features a stylized 3D case name based on classic Film Noir movie title design, a subtle Art Deco background pattern, and details of the the companion episode at the bottom. Additionally, a thematic Noir style loading animation based on phases of the moon is used in place of a generic progress bar or loading wheel.

Switching Cases
The stylized 3D case names are based on classic Film Noir movie title designs

Case Closed Screens

Upon completion of a case, the player is presented with a photograph which they can screenshot and share on social media. It was mostly presented in the style of a surveillance print, but we also subverted the concept a little when a joke presented itself, such as in Ruff Customer where the photo is posed like a cheesy 1980s mall portrait.

Achievements
Share a screenshot and impress your friends. Or don't. I'm not your supervisor.

Expanding The Existing Show Narrative

In addition to providing supplemental narratives, the game also expands the shows existing narratives. I pitched the idea of being able to read Archer's war journal in the app – an item that’s mentioned in the show but never actually seen. I was expecting one of the producers to write it but they were too busy making the TV show, so that weighty task fell onto my lap! Although a little hesitant at first (I had some big shoes to fill) I embraced the challenge before me. It was a great thrill to be given the chance to write extensively in Archer's voice, and the producers approved it with only one or two minor notes. I also directed Archer illustrators Chi Duong Sato and Kathryn Hudson who did an awesome job bringing it to life.

Interactive Papercrafts

As an optional bonus feature, various items throughout the game can be downloaded as papercrafts. Once assembled into a 3D model and inspected with the app, hidden surprises are revealed. Here's a few examples, created in collaboration with illustrator Chi Duong Sato.

Bonus papercrafts could be assembled and activated with the AR camera to reveal additional content.

The archer.codes Website

For eagle-eyed players, codes were hidden throughout the app and the TV show. I devised, designed and coded the website archer.codes where these codes could be redeemed for digital goodies such as wallpaper and ringtones. These rewarded the hardcore gamer that sought a little more challenge and encouraged completists to play again. Anything uncovered could be shared online with simple URLs, helping to promote the app and provide links back to the site.

Flowchart
Social media promotion for the companion website, archer.codes.

Real-world AR Targets

The AR camera enhances real-world items too, such as promotional material, social media marketing, The Art of Archer coffee table book, and Archer T-shirts. This was important because we wanted the game be live on the App Store two weeks before the season even started to tie in with FX's promotional campaign and grow the user base.

Just a small selection of the many real-world items enhanced by the Archer, P.I. app.

Reaction

By the date of the season premiere, a quarter of our audience had downloaded the app and many were collaborating through Reddit, Discord, and Google Docs to solve cases together. The app also encouraged multiple viewings of the show as fans re-watched episodes to collect any clues they’ve missed. The press raved about the innovative use of technology, changing the way we watch TV by ushering in the next level of audience participation, and industry peers awarded us a string of top awards and accolades.

Quote

The new Archer, P.I. augmented reality app is some next level shit.
The Chive



Producer: Floyd County Productions
Twitter LinkedIn IMDb Television Academy