MY ROLE
Brought in to do exploratory work for The Wolf Among Us 2, I worked on an interface redesign, focusing on enhancing player immersion through intuitive and thematic elements that seamlessly integrated into the game's narrative-driven experience. My role encompassed creative concept development, meticulous design execution, and user experience optimization for key interactive components.
The Wolf Among Us In-Game UI
Better player immersion for a howling good time
OVERVIEW
In this UX case study, we'll delve into the exploratory design work conducted for the anticipated sequel of Telltale Games' The Wolf Among Us. The project's aim was to enhance player immersion through innovative interface and interaction components, specifically focusing on the Reticle, action buttons, and the pause menu.
CLIENT
Telltale Games
TOP 3 ACCOMPLISHMENTS
-
Innovative Design Integration: Successfully reimagined critical game interface elements—Reticle, action buttons, and pause menu—to enhance narrative immersion and player interaction.
-
Positive Industry Impact: The design concepts were highly praised by Telltale Games, establishing a new standard for UX integration in interactive storytelling within their games.
-
Joyful Design Experience: The project outcome might not have ended up where I was hoping, but I had an absolute blast working on it! The process of designing for The Wolf Among Us 2 was thoroughly enjoyable and creatively fulfilling.
Challenge
Telltale Games is known for their immersive interactivity that puts you front and center in some fantastical and compelling storytelling. With a sequel on the horizon for their wildly successful Fables-based series debut, they wanted to dial the immersion up to eleven. As a lifelong gamer and a fan of the original title, I was eager to tackle the unique challenges that come with designing for an interactive narrative-driven game.
The primary challenge was to seamlessly integrate the game's user interface elements into the narrative fabric of The Wolf Among Us 2, thereby elevating the player's immersive experience. The task was to refine the Reticle, action buttons, and pause menu to not only serve their functional purpose but also to become an intrinsic part of the storytelling—set in a gritty, neon-noir world inhabited by fairytale characters.
Solution
The solutions proposed aimed to address the challenges by focusing on thematic integration, visual harmony, and intuitive interaction.
Reticle Design
The Reticle is a player's constant companion in the game, guiding their interactions with the environment. It needed to be discreet yet distinctive, enhancing the gameplay without detracting from the visual narrative. My approach was to incorporate Art Nouveau elements from the graphic novels into a minimalistic design, creating a precision cursor that was both functional and thematic.
The new Reticle design was a delicate balance of minimalism and thematic expression. Drawing inspiration from the game's Art Nouveau influences, the Reticle was reimagined as a sleek, precise cursor that complemented the neon-noir ambiance. Interactive areas were highlighted with a segmented circle, each segment corresponding to a button on the Xbox controller, creating a visual language that was both intuitive and aesthetically pleasing.
The Wolf Among Us (first game) used two variant reticle systems. From what I could tell, one was used for investigating (shown in the video above), and another for action sequences (shown in the screenshot above). This system doesn't seem well defined, unfortunately feeling like two disconnected experiences.
Precision design inspired by Art Nouveau details
Interactive areas are highlighted on-screen with this segmented UI element, inspired by neon signage to fit with “Neon Noir” theme of the game.
Each segment corresponds to a button on the Xbox controller (A, B, X, Y), and lights up (in a color that matches the physical button color) if an action can be taken by selecting that button.
Not Targeted
Targeted (with reticle)
Press "Y" to view
Size and opacity increase
The above screenshot shows my reticle system deployed in a scene where Bigby Wolf (the character the player controls) is tasked with investing an apartment to look for clues. You can see the neon ring highlighting several perspective areas.
When a interactive neon ring is targeted with the reticle it increases in size and opacity and color-coded icons appear for any corresponding action that can be performed (in this case, the player can inspect the graffiti on the wall).
Action Buttons
The action buttons are crucial during "quick time events," requiring players to make split-second decisions that shape the story's progression. The standard industry design felt disconnected from the game's immersive experience. I proposed a design that used custom lettering from the Fables comics, combined with a neon aesthetic to create animated, color-coded prompts that were both visually striking and narratively cohesive.
The redesigned action buttons were a departure from the industry norm, offering a more integrated experience. The custom lettering and neon-inspired animation created a sense of urgency and drama, reflecting the game's narrative intensity. The color-coded prompts ensured quick recognition and response, enhancing the player's connection to the story.
The Wolf Among Us (first game) used simplistic action buttons for Quick Time events—requiring player interaction within a short period of time. The buttons are color-coded, which is great, and a timer ring indicates how long a player has to complete the action. The implementation, while straightforward, doesn't add to the ambiance or aesthetic of the game. Worse, the timer actually pulls players out of the action as you can't help but focus on the depleting ring rather than the action unfolding.
Contextual action buttons use FABLES comic custom lettering. To match “Neon Noir” aesthetic, the buttons are inspired by neon signage and are color-coded to match the Xbox controller buttons. Additionally, the neon aesthetic makes the buttons highly visible for quicker, more precise actuation.
To further attract the players attention to the action button, it is animated with a jittering movement. It also gives off “afterimage” copies of the command, symbolizing the frantic nature of the scene and the players intense focus.
This set of images shows how the different action buttons would be adapted for the same scene. The placement of the action button, when possible, should mimic the positioning of the physical button on the controller. Also, a color overlay on the scene reinforces the button prompt, making it easier to tell what button to hit from peripheral vision. This implementation is much more integrated into the scene, allowing the Quick Time events to complement the gameplay rather than compete with it.
Pause Menu
The pause menu is often an overlooked aspect of game design, yet it plays a vital role in maintaining player engagement. The original game's pause menu was jarring, pulling players out of the story. I envisioned a design that used Venetian blinds—a classic noir element—to create a thematic transition that kept players immersed in the game's atmosphere even during breaks.
The pause menu redesign leveraged the noir theme to keep players engaged. The Venetian blinds effect provided a sense of intrigue and continuity, while the animated transitions added a layer of polish and sophistication. The menu design was not only visually appealing but also improved usability, making it more accessible and intuitive.
Like the action buttons, the pause menu for The Wolf Among Us (first game) is functional, but does little to add to the atmosphere. This makes the design feel like an afterthought—or a missed opportunity—since the rest of the game exudes noir stylish ambiance.
The Blinds Menu concept helps keep players in the action, and feels more integrated, by animating over the screen that players were on when they selected “Pause”. Blinds are a staple of the Noir genre and add to the ambiance and sense of mystery in the game. They also provide many opportunities for animated transitions between sub-levels of the menu.
This animation shows my proposal for how the pause menu would interact with the scene.
Results
This was one of the funnest exploratory projects I’ve ever had the opportunity to work on, in a medium I’ve been passionate about most of my life, and for a company that built its reputation on first class storytelling. The design explorations were enthusiastically received by Telltale Games, leading to an offer for the UX lead role on the project. Although the project was eventually shelved when Telltale Games effectively shutdown due to funding issues, the exploratory work laid a solid foundation for future UX improvements in gaming. The experience provided valuable insights into the application of design thinking within an interactive storytelling medium and highlighted the potential of UX design to enrich player engagement.
Hungry for more?
The Wolf Among Us In-Game UI
Better player immersion for a howling good time
OVERVIEW
MY ROLE
CLIENT
In this UX case study, we'll delve into the exploratory design work conducted for the anticipated sequel of Telltale Games' The Wolf Among Us. The project's aim was to enhance player immersion through innovative interface and interaction components, specifically focusing on the Reticle, action buttons, and the pause menu.
Telltale Games
Brought in to do exploratory work for The Wolf Among Us 2, I worked on an interface redesign, focusing on enhancing player immersion through intuitive and thematic elements that seamlessly integrated into the game's narrative-driven experience. My role encompassed creative concept development, meticulous design execution, and user experience optimization for key interactive components.
TOP 3 ACCOMPLISHMENTS
-
Innovative Design Integration: Successfully reimagined critical game interface elements—Reticle, action buttons, and pause menu—to enhance narrative immersion and player interaction.
-
Positive Industry Impact: The design concepts were highly praised by Telltale Games, establishing a new standard for UX integration in interactive storytelling within their games.
-
Joyful Design Experience: The project outcome might not have ended up where I was hoping, but I had an absolute blast working on it! The process of designing for The Wolf Among Us 2 was thoroughly enjoyable and creatively fulfilling.