YB Phone

Transformer une panne en demande de devis.

YB Phone est un projet de démonstration : le site d'un réparateur de smartphones fictif, à Blois. J'ai conçu une seule page qui explique chaque panne simplement, rassure par la transparence et prépare le message WhatsApp du client à sa place.

Type
Projet de démonstration
Année
2026
Mon rôle
Webdesign, développement et SEO local
Réalisé avec
HTML, CSS et JavaScript
Sur mesure
1 790 € TTC
Accueil de YB Phone : « Réparation de smartphones à Blois et alentours » et le bouton de devis WhatsApp.

01Le point de départ

Un réparateur sans vitrine, qui doit rassurer en ligne

Le point de départ imaginé : un réparateur de smartphones installé à Blois depuis environ cinq ans, sans boutique en centre-ville et sans site internet. Pour quelqu'un qui ne le connaît pas, tout passe donc par le site : le trouver, lui faire confiance, puis envoyer sa demande en moins d'une minute, depuis son téléphone.

  • Apparaître sur « réparation smartphone Blois »
  • Rassurer des clients qui ne le connaissent pas
  • Recevoir des demandes de devis sans effort
  • Un site que le réparateur peut faire vivre seul

02La direction artistique

Un style éditorial et un seul bleu électrique

Pour ne pas ressembler aux autres sites de réparateurs, j'ai choisi un style éditorial : de grands titres en Instrument Serif, des textes en Inter et de petites étiquettes techniques en JetBrains Mono. Fond blanc, texte presque noir, et un seul bleu électrique, réservé à ce qui doit attirer l'œil : les boutons, les étapes, les détails animés.

Chaque panne a sa carte, son icône et une phrase écrite avec les mots du client, pas avec du jargon. Un clic sur une carte descend au formulaire et coche déjà la bonne panne.

Couleurs

  • Bleu électrique#2F6BFF
  • Bleu nuit#10265E
  • Bleu pâle#E9F0FF
  • Encre#17191C

Typographies

  • Instrument SerifTitres
  • InterTextes
  • JetBrains MonoÉtiquettes
Les douze cartes de pannes de YB Phone, chacune avec une icône et une phrase simple.
Douze pannes, douze cartes : on se reconnaît tout de suite.

03Le devis

Le formulaire est le cœur du site

Quatre étapes, moins d'une minute : le client choisit sa marque, tape son modèle, coche une ou plusieurs pannes, puis indique s'il dépose son téléphone ou demande une récupération. À côté, le message WhatsApp s'écrit en direct : il voit exactement ce qu'il va envoyer.

Il n'y a ni serveur ni base de données : le site prépare le message, le client l'envoie lui-même. Rien à héberger, rien à sécuriser, aucune donnée stockée. Et s'il manque une information, le site remonte à la bonne étape au lieu d'afficher une erreur en bas de page.

Formulaire de devis de YB Phone, rempli pour un iPhone 13, avec l'aperçu du message WhatsApp à droite.
Le formulaire rempli : à droite, le message WhatsApp s'écrit au fur et à mesure.

04La confiance

Montrer la méthode plutôt que promettre

La vraie peur d'un client, c'est de voir la facture gonfler. Quatre cartes illustrées y répondent : le diagnostic gratuit, l'accord du client avant toute pièce en plus, le suivi en photos ou en vidéos, et des pièces garanties.

Une photo d'atelier montre le savoir-faire, et une carte de Blois présente la récupération du téléphone, dans un rayon d'environ 20 km. Aucun faux avis, aucune note inventée : la partie avis ne s'affiche que si une fiche Google existe.

Les quatre engagements de YB Phone en cartes illustrées : diagnostic gratuit, accord préalable, suivi, pièces garanties.
Quatre engagements, quatre cartes illustrées plutôt qu'une liste.
Photo d'atelier sur le site YB Phone : un iPhone ouvert sur un tapis bleu, à côté de la présentation.
Une photo d'atelier, pour montrer le savoir-faire
Carte en forme de radar autour de Blois : la récupération des téléphones jusqu'à environ 20 km.
La récupération autour de Blois, sur une carte

05Le mobile

Pensé pour le pouce, souvent sur un téléphone cassé

La plupart des visiteurs arrivent depuis leur téléphone, parfois celui qui est en panne. Chaque section a été repensée pour un petit écran : les boutons « Appeler » et « Devis WhatsApp » restent en bas de l'écran pendant toute la visite, le menu s'ouvre en plein écran, et les champs du formulaire sont assez grands pour que l'iPhone ne zoome pas pendant la saisie.

Accueil de YB Phone sur téléphone : le titre « Réparation de smartphones à Blois et alentours » et les deux boutons.
Formulaire de devis de YB Phone sur téléphone : Apple, iPhone 13, écran et batterie cochés.
Menu plein écran de YB Phone sur téléphone, avec les boutons « Demander un devis » et « Appeler ».

06Sous le capot

Trois fichiers, zéro abonnement

Pas de WordPress, pas de constructeur de site, pas de bibliothèque : le site tient en trois fichiers. Rien à mettre à jour, rien qui casse, aucun abonnement à payer. Le numéro WhatsApp, le téléphone et les avis Google se changent à un seul endroit.

Pour Google, le titre et la description visent « réparation smartphone Blois », et les questions fréquentes sont déclarées en données structurées, comme la fiche de l'entreprise et sa zone d'intervention. Aucun cookie, aucune mesure d'audience : pas de bandeau à afficher.

  • Référencement local : réparation smartphone à Blois
  • Accessible au clavier, contrastes élevés
  • Animations coupées si le téléphone le demande
  • Aucun cookie, aucune donnée collectée
Frise « Comment ça fonctionne ? » de YB Phone : quatre étapes, du premier message à la restitution.
Le parcours en quatre étapes
Section « Questions fréquentes » du site YB Phone : sept questions, de la durée d'une réparation au prix.
Sept questions, aussi lisibles par Google
Dernière section de YB Phone : « Un problème avec votre téléphone ? » et le bouton de devis WhatsApp.
La fin de page : une question, un seul bouton.

Ils m'ont fait confiance

Ce projet vous inspire ?
Réservez un appel découverte gratuit.

Planifier un appel
Logo d'Ayoub Chouaf : un A stylisé noir.

AyoubChouaf

Appelez-moi