Cry of the Fox

"Cry of the Fox is a singleplayer adventure exploration game in which you play as a fox traversing in an abandoned and overgrown Paris set in the 1920s while sneaking around dangerous wolves."

Within the project I worked as a game designer, doing research into potential features, participating in external playtests, and looking for points of improvements. My main role, however, was UI/UX design. This included research, designing, prototyping, implementation and being the key point of contact with the artists.

Download on Itch.io

16 weeks
(Feb '22- July '22)

19 People

Unreal Engine 5

UI/UX & Game Design

Main Menu

Final state of the main menu as can be seen in game

Artefact Screen & Pause Menu

Final state of the pause menu and collectibles screen as can be seen in game

All HUD elements

Final state of all HUD elements as found in the game. Collectively triggered in a gym for displaying purposes.

Main Menu

Final state of the main menu as can be seen in game

1/5

Project Overview

My Role

UI/UX designer
Game designer

Goal

Design and implement all menus and HUD elements
Convey the 1920s Parisian setting through the UI's design
Keep the HUD minimal so that the player can focus on the immersive game experience
Setup how-to documents so new content can easily be added by another developer.

Tools Used

Unreal Engine 5

Figma

Perforce

Jira

Miro

Understanding the Project's Needs

To get the project started, I analysed the project's needs. What information and interactions were required of each screen and which screens were needed. To help convey the information to the rest of the team I made a flowchart to visualise interactions and information.

Design Decisions

To fit better with the game's immersive, narrative driven, and semi-realistic artstyle, it was decided to give the UI minimal screen presence.

To reflect the 1920s Parisian setting the UI's style would be based on Alfonse Mucha's artwork.

To combat the lack of UI artists, the benchmark set-dressing section of the level would be used for the backdrop of the main menu.

Project screen-flow created halfway through the project

Collectables

Final Product

Click through the gallery to see more of the development process

Mockup

After research and competitor analysis I made an edit of Death's Door collectible screen to visualise how I wanted to showcase the collectable items in Cry of the Fox

Wireframe

After sketching I made a wireframe in Figma.

Important was to convey the idea of the game's setting, while still being light and readable and functional for Keyboard & Mouse and controller.

Animated Prototype

To visualise how I intended to have the screen work, I made animated prototypes of multiple elements. This gif showcases the scrolling behaviour.

Implementation

I then implemented the wireframe in the game project. Setting up all logic and making sure it's as easy for other developers to add new artefacts as possible.

End Product

Scroll through this gallery to read more about the development process

Purpose

The goal of the collectables and the screen was to provide to the player a reward for going out of their way to explore more of the world. By doing so they could learn more of what had happened in the game's world.

Design Decisions

The screen is thus designed to celebrate the player's efforts. It rewards the player with information on the world and a better showcase of the item they had found. When the player has found all items within a level the level's icon changes too to signify this.

To encourage players to replay and find the artefacts they missed, a hint is displayed upon the completion of a level.

Main Menu

Purpose

The main menu of the game as designed to clearly showcase to the player what the game is about: A fox running through a scenic and nature filled Paris.

Design Decisions

In order to sell the player on the visual fidelity of the game, the player character is put front and centre, paired with the core set dressed area of the game.
The motion design is designed to catch the player's attention while still making sure that the game has a more casual and relaxed nature.

Final Product

Click through the gallery to read more about the development process

Wireframe

An initial wireframe was made using some concept art to communicate the design intention.

Wireframe iteration

More prominence was given to the surroundings and more details were added to remove the previous simplicity.

Button states were added and some potential features were cut from the wireframe.

Implementation & Art Pass

A 2D artist joined the team and made art assets while I implemented all functionality in engine. Still using static concept art images.

3D scene implementation

I then set up the 3D camera background and character view and added a simple animation on the character portrait.

Screen Transition

A full screen transition was added to make the opening and closing of the main menu feel more natural.

Heads-Up Display

Final State (simultaneous trigger)

Click through the gallery to read more of the development process.

View the HUD elements in their natural setting in the gallery below.

Protype

To make sure other developers could use all features as intended, I focussed on functionality first before working closely on the UI.

Wireframe

After an initial sketching phase, the best designs were selected and wireframed to help to make sure that what is seen in game helps convey the theme of the game.

Implementation

I exported all UI elements (and added the stealth indicator and tutorial prompt) and implemented them in engine with a quick toggle to see if they all work, fit together, and do not overlap at any point.

Art Pass

I made all icons and animated the stealth indicator's grass images to help the easing in of said HUD element. Meanwhile an artist made all art elements.

Stealth Indicator

When the player steps into the high grass, they become harder to detect by enemy AI. The animation I made helps communicate that they are hidden.

Click through the slideshow to view the other HUD elements.

Chapter Start

By passing through a trigger box the player gets introduced to their current chapter/level.

Artefact Count

When the player pics up one of the 5 unique items in the level a pop-up appears to show their progress. They can read more about these objects in the Collectibles Screen.

Sign of Life

Here the player inspects an object to learn more about their surroundings

Stealth Indicator

The grass animation & vignette is to showcase a state change to the player. It tells the player "I am now hidden in tall grass, wolves cannot spot me."

Chapter Start

I designed the pop-up to make the player feel like they have entered the next big part of the game. The title and icon are hints of what's to come and to help the player create a connection between the chapter and the set of collectables tied to it in the collectibles screen.

Artefact Count

I designed the popup to be simple: how many collectables the player has found, how many there are in the chapter, and an icon that represent the object they found so it's easy to find back in the collectables screen.

The widget's information is pulled from the level's, player's, and collectible's data. Because of this it will automatically update if anything changes in those regards. By having it pop-up I could keep the gamescreen more immersive and make it more impactful for the player when they find any of these rare items.

Sign of Life

We created objects in the game that the player can inspect more closely. By interacting with those they can learn more about proximity of NPCs or other useful hints.
The pop-up itself gives the player information of its source and more in-depth information on the object itself.

Game-over screen

Purpose

The screen was designed to communicate to the player that they have been caught by the patrolling wolves while saving the team on animation budget.

Design Decisions

To keep the game light-hearted but to still convey failure to the player, the screen was designed to briefly showcase where they got caught, while allowing us to avoid having to use any more gruesome depictions of death.

By blurring the screen, it also feels more natural to the player that their controls are being taken away.
By giving the player button options it allows the player to reflect on what happened before they retry.

Final Product

Click through the gallery to see more of the development process

Mockup

I initially made a quick mockup of the death animation to showcase my idea for it. Re-using most assets I already had.

Iteration

I made the teeth a bit more realistic and made the closing of the jaws feel more snappy to give it the feeling of a wolf closing their jaws with force.

Implementation

The animation then got added in engine and the buttons got moved around after feedback.

Button-prompts

Final Product

Click through the gallery to see more of the development process

Implementation

I mainly re-used assets that were already there, added text and set up a system where it was easy for other developers to add and place these.

Art Pass and Iteration

Art was made and implemented. I made a smaller variation that could be re-used in locations as reminders whenever needed.

Animation

The prompts were made to appear and disappear more naturally. Both making it clearer that they are there while also not distracting the player by having be present far away in the distance. For extra clarity the prompts now face the camera instead of the character.

Purpose

The button-prompts were made as a tool for level designers to onboard the the player into the game wherever they needed.

Design Decisions

To make the tutorialisation as un-intrusive but as versatile as possible to fit the game's immersive direction, I opted for spatial UI. They pop up when the player gets near, and disappears when the player has performed said action. The information dynamically changes to reflect the player's current input method to make sure it is always relevant.

To help level designers use this as efficiently as possible, it's easy to select which prompts are used, if they are full-text tutorialisation or small icon prompts, and the sizing of detection radiuses.

Reflection

Results

I'm really proud of the work the team and I did this block. This was my first time working on a project as a dedicated UI/UX designer which has been an incredible experience.

Players liked the UI and mentioned the attention of detail of some animations in the UI. Besides that the team was happy with the quality of work and how communication had gone.

Takeaways

I learnt plenty during this project. Such as:

UI/UX design pipelines and how to work non-destructively
The importance of knowing your tools' and engines' limitations
How to effectively use Figma
How to use motion design to convey information to the player

Get in Touch

Thank you for checking out my Portfolio. If you're interested in my work, if you want to know more or just have any questions in general fill in my submission form, or find me online at:

Eileen van Zijtveld

Game & UI/UX designer looking for an internship

Cry of the Fox

Project Overview

My Role

Goal

Tools Used

Understanding the Project's Needs

Design Decisions

Collectables

Purpose

Design Decisions

Main Menu

Purpose

Design Decisions

Heads-Up Display

Stealth Indicator

Chapter Start

Artefact Count

Sign of Life

Game-over screen

Purpose

Design Decisions

Button-prompts

Purpose

Design Decisions

Reflection

Results

Takeaways

Get in Touch