First Drafted the UX/UI and Game Design of a RogueliteRéalisé les premières maquettes UX/UI et le game design d’un roguelite

Dead Reckoning is a solo roguelite strategy game idea developed by 4 people, including me. The game mixes battleship game mechanics with tower defense and a cybercore universe, in which the player, a mercenary, must breach in the enemy base. I was in charge of the UX/UI of the menus before the core loop, as well as part of the game design around the menus.Dead Reckoning est un concept de jeu de stratégie roguelite solo, développé par 4 personnes, dont moi. Le jeu mêle les mécaniques d’un jeu de bataille navale au tower defense, dans un univers cybercore où le joueur, un mercenaire, doit infiltrer la base ennemie. J’étais en charge de l’UX/UI des menus précédant la boucle de jeu principale, ainsi que d’une partie du game design autour de ces menus.

Two Dead Reckoning screens: the main menu, with the game title over a starry background, a green dotted planet and the Continue, New Game, Settings and Quit buttons, and the Contacts screen, listing characters with their relationship level, and a detail panel for Ava with an Accept Call buttonDeux écrans de Dead Reckoning : le menu principal, avec le titre du jeu sur un fond étoilé, une planète en pointillés verts et les boutons Continuer, Nouvelle partie, Paramètres et Quitter, et l’écran Contacts, qui liste les personnages avec leur niveau de relation, et un panneau de détail pour Ava avec un bouton Accepter l’appel
MY ROLEMON RÔLE
UX/UI DesignUX/UI design
Game DesignGame design
Narrative DesignNarrative design
TIMELINEDURÉE
1 month1 mois
KEY WORDSMOTS-CLÉS
Design SystemDesign system
ScalabilityScalabilité
Design ThinkingDesign thinking
TOOLS USEDOUTILS UTILISÉS
Figma

Designing without the full game ideaConcevoir sans avoir l’idée complète du jeu

This small team worked mostly on motivation, meaning that we had all to produce something to keep the other people going. This meant that I had to design the interface without knowing precisely what the narration and the game design would really need.

Cette petite équipe fonctionnait surtout à la motivation : chacun devait produire quelque chose pour maintenir l’élan des autres. J’ai donc dû concevoir l’interface sans savoir précisément ce dont la narration et le game design auraient vraiment besoin.

Imagining the art style from scratchImaginer le style graphique de zéro

As much as I love consuming art, I feel like I can sometimes lack creativity. A big challenge in this project was to imagine the art style from scratch, as the team did not have someone more artsy to do so. We had agreed that we wanted cybercore vibes, but the rest was totally up to me. It was an exciting challenge!

Autant j’aime consommer de l’art, autant je manque parfois de créativité. Un défi majeur de ce projet a été d’imaginer le style graphique de zéro, l’équipe n’ayant personne de plus « artistique » pour s’en charger. Nous étions d’accord sur une ambiance cybercore, mais le reste était entièrement à moi de décider. Un défi excitant !

Designed for controller first to force clarityConçu d’abord pour manette afin de forcer la clarté

With a mouse, you can display everything at once and click anywhere. With a controller, players move from element to element, so every screen has to be designed as a path. I chose to design the menus controller-first to force myself to prioritize information, limit submenus, and decide what truly deserved to be on screen.

→ This constraint also pushed me to refine selection states, which are often too subtle in cybercore interfaces, so players always know where they are.

→ An interface designed for a controller adapts easily to a mouse, while the reverse often means rethinking everything. This choice kept all options open for the rest of the project.

À la souris, on peut tout afficher en même temps et cliquer où l’on veut. À la manette, le joueur se déplace d’élément en élément, ce qui oblige à penser chaque écran comme un parcours. J’ai donc choisi de concevoir les menus d’abord pour la manette, pour me forcer à hiérarchiser l’information, limiter les sous-menus et décider de ce qui méritait vraiment d’être à l’écran.

→ Cette contrainte m’a aussi poussée à soigner les états de sélection, souvent trop discrets dans les interfaces cybercore, pour que le joueur sache toujours où il se trouve.

→ Une interface pensée pour la manette s’adapte facilement à la souris, alors que l’inverse demande souvent de tout repenser. Ce choix gardait donc toutes les options ouvertes pour la suite du projet.

Imposed my own constraintsM’imposer mes propres contraintes

As the project was very broad, I had to establish my own constraints to narrow possibilities and make the project less overwhelming : working with only 2 colors, using open-source icons, design high fidelity but not pixel perfect, limited prototyping... This way, I could focus on what actually mattered: getting a first iteration ready to give the team an idea of how the game could begin to look.

Le projet étant très ouvert, j’ai dû m’imposer mes propres contraintes pour restreindre les possibilités et rendre le projet moins écrasant : travailler avec seulement 2 couleurs, utiliser des icônes open-source, faire du haute-fidélité sans viser le pixel-perfect, limiter le prototypage... Cela m’a permis de me concentrer sur l’essentiel : produire une première itération pour donner à l’équipe une idée de l’allure que pourrait prendre le jeu.

The Capacities screen, a grid of upgrades with their cost in upgrade points, and the Artefacts screen, a grid of icons with a detail panel for the Ghost_Wire artefact. I used open source icons but also created my own icons. Building the whole art style by myself was a challenge, so I reused most of my components to have something coherent.L’écran Capacités, une grille d’améliorations avec leur coût en points d’amélioration, et l’écran Artefacts, une grille d’icônes avec un panneau de détail pour l’artefact Ghost_Wire. J’ai utilisé des icônes open source, mais j’ai aussi créé mes propres icônes. Créer la direction artistique moi-même a été un défi, alors j’ai réutilisé la majorité de mes composants pour avoir des interfaces cohérentes.

Researched games with similar featuresÉtude de jeux aux fonctionnalités similaires

To better understand what kind of features Dead Reckoning could have, and therefore, the interface needed for them, I went to analyse famous games with the same type of gameplay as the one we wanted to create: Hades I and II, Into the Breach, Faster Than Light, Slay the Spire... Focusing particularly on Hades I for the Mirror of Night and the Keepsakes.

→ Dead Reckoning was to be a 2D game with no avatar in movement, compared to Hades in which the avatar Zagreus can move in the lobby. Therefore, I had to represent these features in static UI, and I decided to do it through a diegetic-like dashboard.

Pour mieux comprendre quelles fonctionnalités Dead Reckoning pourrait avoir, et donc l’interface qu’il leur fallait, j’ai analysé des jeux célèbres au gameplay proche de celui visé : Hades I et II, Into the Breach, Faster Than Light, Slay the Spire... en me concentrant particulièrement sur Hades I pour le Mirror of Night et les Keepsakes.

→ Dead Reckoning devait être un jeu 2D sans avatar en mouvement, contrairement à Hades où l’avatar Zagreus peut se déplacer dans le hall. J’ai donc dû représenter ces fonctionnalités dans une UI statique, en optant pour un tableau de bord de type diégétique.

Researched cybercore artÉtude de l’esthétique cybercore

I also researched games, posters, any type of art similar to the cybercore aesthetic I was looking for. For games, I took inspiration from Cyberpunk 2077, Citizen Sleeper and Marathon, and I also looked up graphic design posters and website prototypes. It gave me a strong idea of how to represent cybercore through the interface and atmosphere.

J’ai aussi étudié des jeux, affiches, et toute forme d’art proche de l’esthétique cybercore recherchée. Côté jeux, je me suis inspirée de Cyberpunk 2077, Citizen Sleeper et Marathon, et j’ai aussi analysé des affiches de design graphique et des prototypes de sites web. Cela m’a donné une idée claire de la manière de traduire le cybercore à travers l’interface et l’atmosphère.

Simplified through iterationsSimplification au fil des itérations

I did several iterations that seemed complex both in term of UX design and Game design. Character stats, weapon stats, purchase costs, relationship levels... I had to simplify the interface to remove so many metrics I felt were not necessary for such a game, and most of this passed through tweaks in the UX.

J’ai fait plusieurs itérations qui me semblaient complexes, tant en UX design qu’en game design. Stats de personnage, stats d’armes, coûts d’achat, niveaux de relation... J’ai dû simplifier l’interface en retirant de nombreuses métriques qui ne me semblaient pas nécessaires pour ce type de jeu, principalement via des ajustements UX.

Refined the color palette for accessibilityPalette de couleurs affinée pour l’accessibilité

The main issue with cybercore interfaces is the accessibility. The vibrant colors on a dark background tend to be a problem, especially for the text labels. On top of that, hover and selection state tend to be too subtle in cybercore UI, but still needs to fill their purpose. I had to refine the color palette several times to have colors as accessible as possible, but tests would still have need to be done on that matter.

Le principal problème des interfaces cybercore est l’accessibilité. Les couleurs vives sur fond sombre posent souvent problème, en particulier pour les textes. De plus, les états de survol et de sélection ont tendance à être trop subtils dans une UI cybercore, tout en devant rester fonctionnels. J’ai dû affiner la palette plusieurs fois pour la rendre aussi accessible que possible, mais des tests supplémentaires seraient encore nécessaires sur ce point.

An incoming call from Ava over the Contacts screen, with a green audio waveform and three answer choices, and the Settings screen, with resolution, display mode, hologram intensity and glitch effects options. Tests are still to be done to make sure colors are accessible, and other tests to make sure hover and selected states are visible enough.Un appel entrant d’Ava par-dessus l’écran Contacts, avec une onde audio verte et trois choix de réponse, et l’écran Paramètres, avec les options de résolution, de mode d’affichage, d’intensité de l’hologramme et d’effets de glitch. Des tests doivent encore être faits pour s’assurer que les couleurs sont assez accessibles, et d’autres pour s’assurer que les états de survol et de sélection sont assez visibles.

In a team, game design and UX/UI need close collaborationEn équipe, game design et UX/UI doivent collaborer étroitement

Developing a game alone is one thing: you have full control of what to do with your game, and can decide how to organize your work as it fits you. In a team, things are different, everyone has a word to say on what is created, especially in a small team. I felt that game design was the biggest constraint to designing an interface properly, and that it is very important that game designers and UX/UI designer work in close collaboration to avoid scope creep or having to redesign everything over again.

Développer un jeu seul, c’est une chose : on garde le contrôle total et on organise son travail comme on l’entend. En équipe, c’est différent, chacun a son mot à dire sur ce qui est créé, surtout dans une petite équipe. J’ai ressenti que le game design était la plus grande contrainte pour bien concevoir une interface, et qu’il est essentiel que game designers et UX/UI designers collaborent étroitement pour éviter le scope creep ou de devoir tout redévelopper.

Motivation is not enough, we need structureLa motivation ne suffit pas, il faut de la structure

I was invested in this project, and the other people I was working with too, but sometimes motivation isn't enough. We learned a lot on how much structure matters in such project. No one was going to set a deadline for our deliverables, no one was going to clear the vision for us. We had to do it ourselves, and if we don't manage to do that, chances are the motivation will just fade and the project with it. It is what happened to this project for the moment, but we can still pick it up whenever we are ready!

J’étais investie dans ce projet, tout comme les autres personnes avec qui je travaillais, mais parfois la motivation ne suffit pas. Nous avons beaucoup appris sur l’importance de la structure dans ce genre de projet. Personne n’allait fixer de deadline pour nos livrables, personne n’allait clarifier la vision à notre place. Il fallait le faire nous-mêmes, et à défaut, la motivation finit par s’estomper, et le projet avec elle. C’est ce qui est arrivé à ce projet pour l’instant, mais nous pouvons toujours le reprendre quand nous serons prêts !

Back to the topRetour en haut

Other projectsAutres projets