top of page

MEMENTO MORI GAME UX/UI REDESIGN

Memento Mori UI/UX Game Desgn: Text

DATE

August 2021

TYPE

Redesign / Conceptual Project

PLATFORM

PC

TOOLS

Adobe Illustrator, Adobe XD, Figma, Diagrams.net

Memento Mori UI/UX Game Desgn: List

MY ROLE

I worked on this solo project as the lead UX/UI designer. Main areas of responsibility:

  • UX/UI analysis (design analysis, user flows)

  • UX/UI design (sketching, wireframes, mock-up, prototyping)

Memento Mori UI/UX Game Desgn: Bio

PROJECT

Memento Mori is a 2D shoot 'em up game for PC where the player plays as one of the last surviving humans fighting against the forces of a robot uprising that has driven humanity near extinction. The game was developed by Team Jikininki, a group of six Game Design students, over the course of an eleven-week period at Uppsala University.

Memento Mori was the first game project I was involved in and it also marked the first time I was in charge of UX/UI design in a project. Unfortunately, a broken hard drive from two summers prior to this redesign project left me with little to show for my original work. This led me to a decision to revisit the work I had done on Memento Mori and to see if I could give my first design new life.

Memento Mori UI/UX Game Desgn: Bio

CHALLENGES

The redesign addresses the same user needs that the original design team defined for the development of the original game project. This meant providing the user with the information they need regarding the core gameplay features such as combat and exploring the different abilities available to the user.


The target audience for the game was defined as young teenagers from age 13 to 18 for the game's dark themes and ethical undertones. The user experience needed to be designed with the target age demographic in mind and by staying true to the darker tone of the game.

Memento Mori UI/UX Game Desgn: Bio

SOLUTION

I began the redesign process by analyzing the strengths and weaknesses of the original user experience based on the limited material that I still had left of it. Because the original development team conducted multiple playtests for the game, the original user experience had already been shaped by user feedback. However, I was able to identify aspects that could still be improved.

The image below is from a style guide made for the game. All character art visible in the image was made by Max Niva.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: Pro Gallery

The user flow of the game was quite straightforward from the beginning, and I found no reason to change it while updating the user experience. The flowchart below represents both the original and the updated design.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: Pro Gallery

During the sketching phase, I explored new ideas but, I also decided to keep several elements from the original design. This included the "heart" shape that reoccurs in the HUD, the pause menu and the game over screen. However, there were a few changes to the existing layouts that I believed could improve the visual clarity.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: Pro Gallery

After sketching down my ideas, I created medium-fidelity wireframes in Figma. While the layouts for the pause and game over screens remained as they were, the other screens went through some changes.


The most important changes were done to the layout of the HUD. I decided to separate the upgrades from the health bar so that neither of the two assets would distract the player from the information the other asset is meant to convey. I also added remainders of which key the user should press to use each upgrade. In the original design, the user was not reminded of the information after first gaining the upgrade.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: Pro Gallery

With the layout established through wireframing, I created a mock-up in Adobe Illustrator. When designing the interface, I chose to keep the color palette similar to that of the original design as the colors provided good contrast and fit the futuristic setting of the game. 


During this phase, I also created new character art inspired by the original character designs by Max Niva which were based on concept art by Tove Wahlberg. 


Click on the images to open them in Expand Mode.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: Pro Gallery

In the final stage of this redesign project, I created a high-fidelity prototype in Adobe XD. The prototype does not include final animations but showcases the basic flow of the user experience.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: HTML Embed

RESULTS

The updated design remains true to the original design but takes it to the next level with an improved user experience and a more cohesive interface. Going forward, the new design would require user testing to determine if any further improvements could be made.

Memento Mori UI/UX Game Desgn: Bio
Memento Mori UI/UX Game Desgn: Text

©2021 by Anette Essel. Proudly created with Wix.com

bottom of page