THE BRAG

WHAT I DID ON THE PROJECT:
  • Creative director for the site and experience
  • Leading the discovery phase and developing the concept and narrative
  • Directing and defining the content and ARG elements that can be found on the site
  • Art direction and initial UI design guidelines
  • UI design for the map and all glitchy content found in the experience
  • All the annoying bits and pieces of DATA copy in the hacker tool

THE TLDR

Hidden somewhere on their classic looking launch site http://www.denofwolves.com, unsuspecting user’s will find X≡RO, a hacking tool letting them unlock the game’s lore through solo and multiplayer puzzles.

Press play to watch a very hectic supercut of the experience

THE ASK

The client’s request was for me to come up with a concept for an immersive experience website that encourages players to actively participate in the game’s community while the game was being developed. The goal was to cultivate fan interest in the upcoming game to the extent that they would willingly register for a newsletter and add it to their Steam wishlist.

THE EXPERIENCE

So after having discarded and challenged more conventional ideas we arrived at this:

A hidden collaborative digital experience where the users had to team up, explore, locate, and extract fragmented and encrypted data from the game’s lore, development, and other sources.

This experience would also evolve and get upgrades as the game’s development progressed and the users collaborated to extract more and more data.

What the experience included:

  • Plain looking landing page with a cryptic CTA in the bottom to lure users in to the actual XERO experience
  • A fictional/functional hacker tool created by a hacker existing only in the Den of Wolves universe in 2097
  • A district map for the user to explore and find nodes they can interact with
  • Nodes containing assets and lore that can be added, customized and activated by us at any time for the user to discover, unlock through a mini-game and share.
  • All the encrypted content on the site can be accessed through 3 different puzzles/activations, either as single or 2-4 player co-op setups.
  • We also added bigger community events needing up to 1024 concurrent users on the platform to unlock specific content for more impact

Art direction and design process

While defining the retro terminal style of the UI and having designer Paul Witherden taking it to the next level, I took on the task to art direct and design the interactive map view and what the glitched out decryption moments looked like in the experience. These were realised in collaboration with WebGL developer Einar Öberg.

THE RESULT

Reception was very positive and it was a joy following the first batch of dedicated fans in the community going all in on trying to solve this alternate reality game even if it’s just the first early version. And we’re still work in progress with this one so stay tuned for further updates.

THE FIRST REACTIONS

THE LINK TO THE PROJECT

THE CASE STUDY (WIP)

BACKGROUND

So, yeah: We built this site to announce Den of Wolves at the Game Awards and keep our awesome community engaged as the game takes shape. Once you land on our sleek game website, we whisk you away into a multiplayer adventure where you can unravel some fun teasers from Den of Wolves. I wanted it to be all about teamwork here, so we made a site where the players could dive in, collaborate, and share your wild theories on platforms like Discord and Reddit.

DESIGN CORE

Forget about the typical Hollywood hacker vibe—I wanted something real and ugly-not-ugly. Drawing inspiration from actual exploit tools and the demoscene, we crafted a tool that feels like it was cooked up by a lone wolf hacker person using whatever she finds to make it run. Think PETSCII character sets, one typeface, and a punchy color palette. We had a blast adding quirky ASCII art, text-based lore, and PETSCII illustrations to give it that extra flair. And seeing our community soak it all in? Pure joy.

Some of our team members had demo-scene backgrounds and that did really shine through when we started polishing the UI and the map elements! From having ASCII art created by awesome freelancers to weaving intricate lore, every detail was a labor of love. It’s been amazing watching the community dig into these gems and unravel the mysteries I laid out together with the team at 10 chambers.

NAVIGATION STRUCTURE

While we wanted to keep things familiar with a traditional landing page, we injected a bit of intrigue into the user experience with our hacking tool. Imagine stumbling upon a secret tool crafted by a rogue genius—that’s the vibe we were going for. It’s all about immersing users in the experience and sparking their curiosity.

Technology: Alright, let’s talk tech! So the site’s front end is powered by a Next.js application in TypeScript, hosted on Vercel. Content is managed with Sanity CMS, keeping things slick. We’ve spiced things up with WebGL visual effects and some nifty CSS work. Oh, and don’t forget about the xterm terminal for some interactive fun! On the back end, we’ve got a multiuser web-socket server for seamless matchmaking. It’s all hosted on AWS, using TypeScript for that extra reliability. Colyseus handles matchmaking and server management like a champ.

Great.
CREDITS

Creative Lead: Magnus V Östergren
Producer: Thomas Oger
Tech Director: Daniel Isaksson
UX design: Adria Verdaguer
Tech lead: Miha Klasinc
Art Direction: Magnus V Östergren & Paul Witherden
Map & Glitch design: Magnus V Östergren
WebGL development: Einar Öberg
Frontend + multiplayer development: Nick White
Backend: 9Volt