Portfolio

Sifu's Replay Editor is a tool that allow the player to capture gameplay and edit the camera to create cinematographic clips of gameplay.

Steam Page

Client

Sloclap - 2022

Software

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

Roles

UI Designer

UX Designer

Motion Designer

Artist

Marketing Artist

Game Designer

What I did on this project:

<a class="idlinkmain" href="#context">Context</a></br>

<a class="idlinkmain" href="#uredesign">[UR,UX] Usability Redesign</a></br>

<a class="idlink" href="#toolmodes">Tool Modes</a></br>

<a class="idlink" href="#playtests">Playtests</a></br>

<a class="idlink" href="#inputs">Inputs</a></br>

The Replay Editor is a tool allowing the player to record their gameplay and turn it into cinematic movie clips.

‍

<div style="display: flex; justify-content: center; align-items: center;"><a class="mainbutton" href="https://politessier.webflow.io/project/sifu-replay-editor-ui" style="align:center;" >Access UI Part of Replay Editor</a></div>

‍

<a id="context">Context</a>

When I arrived at Sloclap, the Replay Editor was under works for longer than a year, and most of its features were already built. But it needed thourough care to unify the different creation modes available, and to build a seamless and intuitive workflow for the user.

The main issues to tackle were these :

‍

<a id="uredesign">Usability Redesign</a>

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

We conducted three in-house playtests under two different formats : two recorded playtests under UX and GD observation, and one background playtest with a Google Form to fill.

The issues that transpired were mostly related to the player's understanding of the tool's flow, quantity of information in a single display, and making sure that navigation is as intuitive as possible.

Based on the findings of these playtests, we reworked the flow in order to make the three different modes feel easily distinguishable from each other, and so that the player would associate certain actions with each mode.

<a id="toolmodes">Tool Modes</a>

Preview Mode, Timeline Mode, Free Camera Mode. The player needs to be able to recognise each from a glance.

‍

<a id="inputs">Inputs</a>

One of the challenges was to be able to fit each action from each state of the tool on the controller, in a consistent and intuitive way. I worked on fitting similar options with similar inputs so that the player wouldn't be lost wherever he was in the screens.

‍

Sifu - Replay Editor UX

<a id="context">Context</a>

<a id="uredesign">Usability Redesign</a>

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

<a id="toolmodes">Tool Modes</a>

<a id="inputs">Inputs</a>