Design produit / design de processus / site Web

Cutmap

Des consignes de campagne aux moments à découper

Visiter le site

J’ai conçu le parcours et le site de Cutmap pour montrer comment les consignes d’une campagne deviennent une sélection de passages vidéo à vérifier

ANNÉE
2026
RÔLE
Stratégie produit, design UX/UI et design Web
FORMAT
Produit indépendant
ÉTAT
Site en ligne
Page d’accueil de Cutmap avec un titre vert lime et trois aperçus vidéo verticaux sur fond sombre
01Produit

Donner à chaque extrait une raison de faire partie de la campagne

Un bon extrait de campagne doit faire plus qu’attirer l’attention. Il doit respecter les consignes, se comprendre seul et donner au monteur assez de contexte pour prendre une décision. Cutmap réunit ces questions dans un même parcours de révision.

Mon travail relie la stratégie produit, le parcours de campagne et le site public. L’ouverture associe une explication directe à de véritables aperçus vidéo, pour montrer immédiatement le type de contenu auquel le produit s’adresse.

02Démonstration interactive

Suivre une même campagne du début à la fin

Le site présente le parcours en sept étapes : consignes, sources, compréhension, correspondance, classement, révision et préparation. Les trois mêmes vidéos traversent la séquence, ce qui permet de suivre chaque changement.

Le défilement fait avancer la démonstration. Une navigation numérotée permet aussi de rejoindre une étape précise. Les consignes établissent l’objectif, le public, la durée et le format avant de présenter l’analyse et les recommandations.

Démonstration Cutmap avec les consignes, le public et les exigences des extraits à côté de trois vidéos sources
L’étape des consignes sur cutmap.app. La campagne et ses vidéos sources restent liées tout au long de la démonstration.
03Révision

Rendre la décision du monteur visible

Chaque passage recommandé conserve sa source, ses repères temporels et ses scores. La pertinence pour la campagne et la clarté de l’extrait pris seul apparaissent séparément, pour éclairer la décision au-delà d’un classement global.

À l’étape de révision, le visiteur peut sélectionner ou retirer des passages directement sur les fiches vidéo. Le nombre de sélections et les contours vert lime se mettent à jour ensemble. Les recommandations mènent à un choix explicite avant la préparation et le montage.

Étape de révision interactive de Cutmap avec deux passages sélectionnés, leurs repères temporels et leurs scores de pertinence
L’état de révision de la démonstration publique. Les scores et les sélections présentés appartiennent à cette démonstration.
04Design visuel

Conserver la même identité de la première visite à l’inscription

Une grande typographie, un fond sombre et des accents vert lime définissent l’identité de Cutmap. La vidéo occupe le premier plan ; la couleur signale l’étape courante, les passages sélectionnés et les actions principales.

La page d’inscription reprend ce langage dans un formulaire plus calme. Les options Google et courriel sont clairement présentées, avec un accès distinct pour les utilisateurs qui ont déjà un compte. Le produit reste reconnaissable au-delà de la page d’accueil.

Page de création de compte Cutmap avec l’inscription Google, les champs de courriel et de mot de passe, et un bouton vert lime
L’écran d’inscription en ligne reprend la typographie, la palette et la hiérarchie des actions du site.
05Résultat

Un site publié qui montre le fonctionnement du produit

EN LIGNE SUR CUTMAP.APP

Le site réunit des aperçus vidéo, un parcours de campagne interactif, les tarifs, des articles sur le produit et l’accès au compte. Ces captures présentent le site publié et sa démonstration publique : le processus s’explique à travers l’interface elle-même.