2017
FX Networks
Archer, P.I. (UI & UX)
Animation / Creative Direction / Motion Design / Quality Assurance / Sound Design / Transmedia / UI & UX / Writing
Poster
The Archer, P.I. icon.

Archer, P.I. is the Webby Nominated and two-time Clio Gold Award winning companion app to season eight that I devised and developed as Creative Director of Archer's in-house interactive team. It was a proprietary and groundbreaking AR experience that interfaced directly with the TV show in a way that had never been attempted in the history of television.

Each week, the game revealed a supplemental and interactive narrative that was hidden in the episode and only accessible via the game. The player used their phone's camera to collect items directly from the episode and use them in the game to play through the narrative, unlock puzzles, and solve cases. Learn more about the game and my role as Creative Director by clicking here. Another of my roles was UI & UX designer. Below is a summary of my work in that area.

The Overall Look

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

Due to severe time constraints (which is detailed on the main Archer, P.I. page), the Main Menu screen repurposed a background from the upcoming season. The exterior shot provides intrigue and mystery as to what could be going on inside. The Dreamland club was the focal point of the new season (promoted as 'Archer: Dreamland'), so 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 to keep the player inside the experience.

Navigation

The core of the app consists of three main buttons. All other buttons are either simple glyphs inside a circle, or rectangular and text based. This helps to promote the importance of the three main game modes:

  • 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

Gameplay Experience

Below is a brief example video of gameplay which demonstrates two of the three main modes: Camera and Inventory. For a walkthrough of an actual case from start to finish click here.

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

Achievements

The third main icon shows how many Achievements the player has collected so far. 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.

On the Achievement screen, 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

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 four month 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

Animations

I devised and created a series of UI animations to show useful feedback, draw attention, 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

A little help

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, 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 Graphics

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!

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.
Twitter LinkedIn IMDb Television Academy