Abstract blue digital sphere with grid lines and scattered letters on a dark background.

Introduction

Spyscape museum is one of NYC’s top tourist destinations, as well as being a growing entertainment brand focused on all things espionage.

I was hired to work on their expanding digital presence, starting with a new hub site, and following up with a diverse range of product offerings.  

Over 10 fast paced months, I delivered improvements to their expanding digital presence, releasing sites for their HQ, film festival, media hub and visitor profile, as well as content and graphics. I also tackled a difficult problem of information architecture.

The result was vastly improved standard of design, as well as clarity and structure in the navigation experience.

Team

Role:
UX, UI, Visual design, Information architecture

Team:
1
x Designer, 1 x Product Manager, 1 x Developer

Time:
10 months

Site designs

Spyscape HQ

A complete overhaul of the site for the Spyscape museum and experience in New York City. We simplified the site map and tried to bring the excitement through short video and bold photography.

Website homepage showing a man with headphones looking up, displayed on desktop and mobile devices with text welcoming to HQ and describing the museum experience.

Spyflix

A bold, graphic treatment on the microsite for the upcoming Spyflix Film Festival.

Spyflix Film Festival website displayed on desktop, laptop, and smartphone with a red background, vintage film camera, and descriptive text.

Spycraft

A revamped hub for spy related media content, including video, articles and latest news. Future phases are to include a personalised content feed based on user account preferences.

Spycraft website homepage featuring Alfred Hitchcock mystery debrief, news, entertainment, tech, puzzles, film festival, fandom, membership signup, missions, and spy tips sections.

Spy Skills

The Spy Skills part of Spyscape interprets results from the museum visit and online games to give the user a profile to compare with famous spies, learn about spy roles, and inform a customised content feed.

SpySkills skill comparison interface showing radar and bar charts comparing Stig O’Tracy and Jason Bourne across attributes like conscience, inquisitiveness, risk, composure, social ability, and agility on desktop, laptop, and mobile devices.
Screenshots of a spy skills profile showing a radar chart of attributes, role description for Hacker with key qualities and quote, and game performance stats including special ops, perception, encryption, and brainpower scores.

Spy Skills

The Spy Skills part of Spyscape interprets results from the museum visit and online games to give the user a profile to compare with famous spies, learn about spy roles, and inform a customised content feed.

SpySkills skill comparison interface showing radar and bar charts comparing Stig O’Tracy and Jason Bourne across attributes like conscience, inquisitiveness, risk, composure, social ability, and agility on desktop, laptop, and mobile devices.
Screenshots of a spy skills profile showing a radar chart of attributes, role description for Hacker with key qualities and quote, and game performance stats including special ops, perception, encryption, and brainpower scores.

Challenges

Navigation problem

Spyscape was expanding at a fast pace, offering a range of new products, events and content. We were keen to showcase as much as possible by jamming new additions to the nav. It was becoming confusing for us and for users.

Spycraft website header navigation showing menu items: Spycraft, Compare, Spy Role, Games, Attributes, Tickets, and a side panel with account and main site links.

Tipping point

At first I redesigned the nav, but we were trying to cram in too much stuff. It didn’t make sense and it was only going to get worse. Something had to give.

Website navigation bar with menu options Visit, Explore, Shop, and categories News, Entertainment, Tech, Videos, 007 x Spyscape, Podcasts, Skills, plus Subscribe, search, user account, and Tickets button.

Rethink

We started with an exercise in grouping the Spyscape offerings. What fitted with what? And how do we create a pleasant user experience while also addressing the business objective of expanding awareness of the brand?

Spycraft website footer menu displaying categories: HQ, Skills, Live Events, Media/Fun, Experts, Shop, Cryptocurrency, and Channels, with links listed under each.

Solution

We separated all the offerings and treated each as a seperate product

Venn diagram with two overlapping circles labeled Global and Local; Global states treating each offering as an individual product on a separate website, Local states each product uses its own local navigation.

Mobile nav

Global nav

Dropdown mobile menu showing options: SPYSCAPE, SPYSCAPE HQ, SPYCON, SPYFLIX, SPY, SPY EXPERTS, SHADOWLANDS, 007 x SPYSCAPE, and SHOP.

Local nav

Mobile navigation menu with options: News, Entertainment, Tech, Videos, Podcasts, Skills, Puzzles, and Spy Profile.

Desktop nav

Global

Website navigation menu with categories like SpyScape, SpyCon, SpyFlix, and a red promotional banner for SpyFlix Film Festival with a vintage movie camera and deadline August 01, 2020.

Account

Dark-themed Spy Profile dashboard with menu options for Profile, Roles (highlighted), Games, and sidebar with Purchases, Settings, and Sign Out.

Local navigation across different sites

SpyCon website navigation bar with menu options Explore, News, Partners, Programs, Film Fest, Tickets, and Sign In button.
Website navigation bar with Explore dropdown, SpyScape HQ logo, and menu options including What's On, Groups, Visit Info, Tickets, and Sign In button.
Website navigation bar with SpyCasts logo centered, menu items 'Explore' with dropdown, 'True Spies', 'Legends', and a Sign In button on black background.

Ticket widget

Mobile phone and laptop screens displaying a ticket purchase interface with options for experience, date, time, ticket quantities for adult, child, family, and concession, and a $39 continue button.
Four sequential screenshots of a dark-themed ticket booking app showing ticket selection, date choice, time slots with pricing for adults and children, and quantity selection with a blue continue button at the bottom.
Four mobile screen views showing an online ticket purchase flow: ticket summary listing two bookings and total price, email input with terms acceptance and continue button, card payment form with masked card number and pay securely option, and order success confirmation with registration details.

Graphics

Podcast

A series of weekly artwork done for each episode of Spyscape's hit podcast series 'True Spies'

Two smartphones side by side displaying the Spyscape Instagram page and a True Spies podcast episode titled 'The Illegal' playing on a podcast app.
Six True Spies documentary covers featuring Undercover Jihadi, The Purple Bathrobe, The Billion Dollar Spy, The Survivor, The Spy Who Said No, and The Man From Getty.
Graphic with three vertical panels showing a Berlin border sign, a red hammer and sickle symbol, and a black-and-white halftone portrait, with the word TRUE SPIES across the image.
Six stylized True Spies documentary covers featuring black-and-white halftone images tinted with teal, blue, purple, red, and orange, each showing a different spy story title and summary.

Video graphics

A series of artwork done for each episode of Spyscape's Youtube series 'Debrief'

Smartphone displaying a YouTube playlist with video thumbnails and titles about debriefs featuring Tom Cruise, Charlize Theron, Tom Clancy, and Ian Fleming.
Black-and-blue stylized image of Sean Connery in a tuxedo with the text 'Sean Connery' and 'Debrief: Bond.'
Four portraits with names and debrief topics: Timothy Dalton with debrief 'Bond'; Matt Damon with 'Bourne'; Diana Rigg with 'Longevity'; Christopher Nolan with 'Experience'.
Collage of four portraits featuring Graham Greene with 'Debrief: Espionage,' Ken Adam with 'Debrief: Design,' Daniel Craig with 'Debrief: Bond,' and Charlize Theron with 'Debrief: Resilience,' all styled with blue monochrome tones and stylized text.
Portrait of Ian Fleming in a suit and bow tie, resting his face on his hand, with the text 'IAN FLEMING DEBRIEF: BOND' alongside him.
Portrait of John le Carré in blue tones with text reading 'John le Carré Debrief: Espionage' on a black background.
Four headshots of men with text: Robert Ludlum, Debrief: Bourne; Robert Rodriguez, Debrief: Spy Kids; John David Washington, Debrief: Acting; Roger Moore, Debrief: Bond.

Spy themed graphics

Spy themed graphics used throughout the site.

Digital abstract background with the word EXPERIENCE centered and the words SPY MUSEUM vertically on both sides.
Microphone icon with soundwave graphics and the word PODCASTS in white letters on a dark blue background.
Composite image with top secret classified document text, a fingerprint, an eye, filmstrip edges, and the word 'SPYCRAFT' in white letters.
Dark blue radar screen with a fedora hat silhouette and the text 'SPY SKILLS?' in stylized white font.
Blue-toned collage with a large eye overlaid with a grid and crosshairs, a white airplane silhouette, and black-and-white portraits marked as 'Top Secret'.
Collage featuring a magnifying glass over a city map with Cyrillic text, a grid overlay, a blue-tinted portrait of a man in a suit, and a star with a hammer and sickle symbol.
Black and white photo of a soldier wearing a helmet, with overlaid blue-toned classified military documents.
Collage with a blue-toned portrait of a man, a large white fingerprint overlay, and textual elements including 'VENONA', 'USSR', and 'From New York To Moscow'.