TimeRift

TimeRift is a fast-paced puzzle shooter shipped in February 2022 by Lightshards Studio and Abiding Bridge. I was the sole UI/UX Designer and Marketing Artist for this game.
Client
Abiding Bridge - 2021
Software

<div class="programs-tag">Indesign</div>

<div class="programs-tag">Figma</div>

<div class="programs-tag">Photoshop</div>

<div class="programs-tag">Illustrator</div>

<div class="programs-tag">After Effects</div>

Roles
UI Designer
UI Designer
UX Designer
UX Designer
Motion Designer
Motion Designer
Motion Designer
Artist
Marketing Artist
Game Designer
What I did on this project:

<a class="idlinkmain" href="#level-selection-menu">[UX, UI] Level Selection Menu</a></br>

<a class="idlink" href="/project/timerift?tab=1#some-context">Some Context</a></br>

<a class="idlink" href="tab=tab1#finding-references">Finding References</a></br>

<a class="idlink" href="tab=tab1#wireframing">Wireframing</a></br>

<a class="idlink" href="tab=tab1#menu-ui">Menu UI</a></br>

<a class="idlinkmain" href="#ui-assets">[UI, Motion, Marketing] 2D Assets</a></br>

<a class="idlink openasset" href="#in-game-assets">In-game Assets</a></br>

<a class="idlink openasset" href="https://politessier.webflow.io/project/timerift?tab=assets#capsules-redesign">Capsules Redesign</a></br>

<a class="idlink openasset" href="#achievements">Achievements</a></br>

<a class="idlink" href="#community-badges">Community Badges</a></br>

<a class="idlinkmain" href="#playtests">[UX] Playtests</a>

<a id="level-selection-menu">Level Selection Menu</a>

<a id="some-context">Some Context</a>

I was asked to craft a visually engaging level selection menu that would fit this aesthetic. It was a first for me and the main challenge was to create a space where the player could navigate intuitively while being able to see easily which levels they had totally completed.

I was the only UI/UX designer on the team so the whole process was in my hands.

<img src="https://uploads-ssl.webflow.com/6222319bdf25180f46b44ffa/624c59f2ec30469ea60a411e_canvas.png" loading="lazy" alt></img>

The old menu was very simple, but it had no focus on individual levels, and barely any visual feedback

<h3 id="finding_references">Finding References</h3>

The first thing that I did was to find some references of similar menus to apprehend the core of the design. Super Meatball was an instant find, because its structure looked a lot similar to Time Rift levels.

<img src="https://uploads-ssl.webflow.com/6222319bdf25180f46b44ffa/624c5a24402a53b6e2ec4219_Ref%20menu.png" loading="lazy" alt></img>

<a id="wireframing">Wireframing</a>

I wireframed several versions of the menu, and iterated with the help of the producer of the game. Using Invision was a real help to keep things rough to focus on usability more than aesthetics, and to convey properly ideas.

<div style="display:flex; margin-bottom:1rem;"><img class="imgflex1" src="https://uploads-ssl.webflow.com/6222319bdf25180f46b44ffa/624c5a4353810f9213686684_Screenshot_2.png" loading="lazy" alt></img><img class="imgflex2" src="https://uploads-ssl.webflow.com/6222319bdf25180f46b44ffa/624c5a51af69f74ea6aa7d63_Screenshot_1.png" loading="lazy" alt></img></div>

See here the different iterations before landing on something that made sense for the game (last picture)

<a id="menu-ui">Menu UI</a>

I designed the new look on Indesign as well, following the neon and arcade-like look of the game.

<div style="display:flex; margin-bottom:1rem;"><img class="imgflex1" src="https://uploads-ssl.webflow.com/6222319bdf25180f46b44ffa/624c5ae69aa7a181193e81b1_Menus%20design%202.png" loading="lazy" alt></img> <img class="imgflex2" src="https://uploads-ssl.webflow.com/6222319bdf25180f46b44ffa/624c5b13ebbaf4eabfd478c8_Menus%20Niveau%20avec%20data%20%2B%20cutscene.png" loading="lazy" alt></img></div>

<a id="ui-assets">2D Assets</a>

<a id="in-game-assets">In-game Assets</a>

I created several in-game assets that were mostly unique items that suited the new narration of the game. Their purpose were to be recognizable immediately in the middle of the fast-paced levels as items that the player would absolutely need to retrieve.

I also designed the logo of the crypto-company Vault Co that plays a huge part as an antagonist in the narrative.

The player meets several characters in the game, and since they communicate with them only through text, they absolutely needed some avatars so that the player could easily distinguish one from another.

I tried to follow the distinct personalities of the characters while crafting their avatars.

<a id="capsules-redesign">Marketing Capsules Redesign</a>

During our launch process, we had a marketing consultant offer their expertise on the Steam page of the game and something that was pointed out was that the marketing capsules were not explicit enough about the game (it mostly only featured the game's logo), and I redesigned the different capsule formats so that it would honor the nervous, fast-paced gameplay.

<a id="achievements-icons">Achievements Icons</a>

I designed the achievement icons based on the fun names and references our game design team provided. Some of them are pop culture references and I did my best so that people would enjoy them even without knowing what the references were about.

<a id="community-badges">Community Badges</a>

Steam Community Badges are showcasing an evolution, and Time Rift's badges juste had to parallel your own path through the game, from employee to rebel. Each badge references the previous one with similar shapes, so it feels like a transformation.

<a id="playtests">Playtests</a>

I crafted a playtest protocol in coordination with the game designer and scenarist of the game.

We drove successfully two playtests over time: one whose main goal was to test how the players reacted to and appreciated the new storyline, and another that aimed to test the level difficulty and game flow along the whole game.

This allowed us to tweak some levels and change some plotpoints so that the players would successfully feel invested in the narrative of the game.

Because of Covid, all of the playtests were done online.