DSNT² : un site qu'on ouvre avec la molette.

Nouveau site pour DSNT², une start-up suisse qui mesure à distance le niveau de remplissage des contenants. Sur la page d'accueil, le visiteur ouvre le capteur avec sa molette et comprend le produit en quelques secondes.

ProjetDSNT² — dsnt.ch
RôleConcept, contenus, design, développement (projet client)
Périmètre15 pages · français et anglais
StatutPrêt à la mise en ligne · 09.2026
dsnt.ch
Toute la page d'accueil en une minute : du problème à la demande de démo, en passant par le capteur ouvert.

Contexte

DSNT² conçoit un capteur qui mesure le niveau des contenants et une application qui ne déclenche une tournée de collecte que lorsqu'elle est nécessaire. L'ancien site était techniquement dépassé : il ne montrait ni le boîtier désormais finalisé ni l'application, et les nouveaux textes n'existaient qu'à l'état de brouillon.

L'enjeu : rendre un produit technique compréhensible en quelques secondes, pour les communes comme pour les entreprises, et se démarquer de concurrents établis qui s'appuient sur des logos clients et des chiffres qu'une start-up en phase pilote n'a pas encore.

La solution

Une page d'accueil qui raconte une histoire. Sept scènes mènent du problème (la tournée au calendrier passe partout, plein ou non) à l'idée (seulement les contenants qui le justifient), puis au produit, à l'application et à la demande de démo pour la phase pilote.

Le produit en main. En faisant défiler la page, le capteur s'ouvre : couvercle, joint et composants se séparent, s'annotent, puis se referment. Nous avons détouré les rendus du produit, les avons découpés en plans séparés et avons retiré les marques de tiers.

De vrais écrans, pas des maquettes. L'application est montrée avec de vraies captures. Les illustrations chiffrées sont signalées comme fictives : une start-up gagne la confiance par l'honnêteté, pas par des résultats inventés.

15 pages, en deux langues. Produit, application, sécurité, tarifs, FAQ, à propos, contact et une page par secteur. Les anciennes adresses redirigent vers les nouvelles pages pour conserver le référencement acquis.

dsnt.ch
Le problème : la tournée au calendrier passe partout, plein ou non.
Le problème : la tournée au calendrier passe partout, plein ou non.
dsnt.ch
Le point culminant : au défilement, le capteur s'ouvre et ses composants s'annotent.
Le point culminant : au défilement, le capteur s'ouvre et ses composants s'annotent.
dsnt.ch
L'application, avec de vraies captures qui défilent latéralement.
L'application, avec de vraies captures qui défilent latéralement.
dsnt.ch
Les secteurs : de vrais lieux, chacun avec sa propre page.
Les secteurs : de vrais lieux, chacun avec sa propre page.
Pensé pour le téléphone, pas simplement réduit.
Le point culminant : au défilement, le capteur s'ouvre et ses composants s'annotent.
Pensé pour le téléphone, pas simplement réduit.
Résultat

Un produit technique, compris en quelques secondes.

15
pages, en français et en anglais
7
scènes racontent la page d'accueil
≈ 180 Ko
de code au premier chargement (compressé)
4,5:1
de contraste minimal, vérifié à chaque position de défilement

Le produit en main

Des rendus détourés et découpés en plans : le capteur s'ouvre au défilement et se referme.

Bilingue, sans rien perdre

Français et anglais sur toutes les pages, anciennes adresses proprement redirigées.

Rapide et respectueux des données

Images WebP, polices hébergées sur le site, aucune requête vers des services tiers.

dsnt.ch
Avant : l'ancienne page d'accueil.
Avant : l'ancienne page d'accueil.
dsnt.ch
Après : la nouvelle ouverture.
Après : la nouvelle ouverture.

Ce que ce projet signifie pour vous

Tous les sites n'ont pas besoin d'un capteur qui s'ouvre. Mais tous ont besoin d'une histoire claire : quel est le problème, qu'est-ce qui change, pourquoi vous. Pour DSNT², nous avons construit cette histoire à partir de brouillons, de rendus produit et d'écrans de l'application, et l'avons mise en scène pour qu'on la vive en faisant défiler la page.

Vous bénéficiez de la même approche pour votre entreprise : contenus structurés, visuels préparés, réalisation rapide et soignée, en allemand, français, italien ou anglais.

Votre projet mérite le même standard.

Parlez-nous-en lors du premier entretien — nous vous montrons comment nous nous y prendrions.