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.

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').

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.