Spaces:
Running
Tu es un UX/UI designer senior et directeur artistique, expert en expériences premium “offline → online” (QR code, onboarding immédiat, conversion sans friction).
Browse filesTu dois concevoir UN SEUL ÉCRAN pour la web app TIE, destiné à être présenté physiquement dans la voiture d’un chauffeur VTC (support imprimé ou tablette).
Contexte d’usage réel :
Le client vient de terminer (ou est en train de terminer) un trajet avec un chauffeur.
Le trajet s’est bien passé, un bon feeling s’est installé.
Le chauffeur souhaite dire naturellement :
« Si vous voulez me recontacter facilement, vous pouvez scanner ce QR code. »
Le client scanne le QR code avec son téléphone.
🎯 OBJECTIF UX DE CET ÉCRAN
Créer une première impression premium
Donner immédiatement confiance
Expliquer TIE en une phrase
Donner envie d’ajouter le chauffeur
Ne demander aucun effort cognitif
🎨 STYLE OBLIGATOIRE (DESIGN SYSTEM TIE)
Premium discret
Élégant
Minimaliste
Humain
Très lisible
Compatible impression papier
Fond :
Beige chaud / gris clair
Texte :
Noir / anthracite
Accent :
Vert profond (très discret)
🧩 STRUCTURE DE L’ÉCRAN (OBLIGATOIRE)
1️⃣ Zone principale — QR Code (élément central)
QR code grand, centré
Très lisible
Avec respiration autour
Encadré ou non (design épuré)
Texte discret sous le QR code :
Scannez avec votre appareil photo
2️⃣ Message humain clé (différenciation TIE)
Texte principal, très lisible :
Vous venez de voyager avec Jean
Sous-texte explicatif (1 phrase max) :
Ajoutez votre chauffeur pour réserver facilement vos prochaines courses.
👉 Le prénom est essentiel.
3️⃣ Signature TIE (branding doux)
Logo TIE discret
Slogan :
Tout commence par un bon feeling.
👉 Jamais dominant.
4️⃣ Message de réassurance (important)
Texte discret en bas :
✔️ Gratuit pour les clients
✔️ Sans inscription compliquée
✔️ Réservation directe avec votre chauffeur
🧠 TON & MICRO-COPY
Calme
Naturel
Jamais marketing
Jamais injonctif
❌ “Téléchargez maintenant !”
✅ “Ajoutez votre chauffeur”
⚠️ INTERDICTIONS ABSOLUES
Pas de bouton
Pas de menu
Pas de prix
Pas de marketplace
Pas de texte long
Pas d’icônes inutiles
🎯 RÉSULTAT ATTENDU
Le client doit penser :
“C’est clair”
“C’est sérieux”
“Je comprends”
“Je le ferai plus tard si besoin” (sans pression)
Le chauffeur doit pouvoir :
montrer ce QR code naturellement
sans discours commercial
sans gêne
🧠 PHRASE DIRECTRICE POUR CET ÉCRAN
Le lien se crée quand on n’insiste pas.
|
@@ -0,0 +1,63 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>TIE - Votre chauffeur</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script>
|
| 10 |
+
tailwind.config = {
|
| 11 |
+
theme: {
|
| 12 |
+
extend: {
|
| 13 |
+
colors: {
|
| 14 |
+
tie: {
|
| 15 |
+
beige: '#F5F1E8',
|
| 16 |
+
gray: '#E8E6E1',
|
| 17 |
+
anthracite: '#2C2C2C',
|
| 18 |
+
green: '#28665A',
|
| 19 |
+
lightgreen: '#E8F3F1'
|
| 20 |
+
}
|
| 21 |
+
}
|
| 22 |
+
}
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
</script>
|
| 26 |
+
</head>
|
| 27 |
+
<body class="bg-tie-beige min-h-screen flex flex-col">
|
| 28 |
+
<main class="container mx-auto px-6 py-12 max-w-md flex-grow flex flex-col items-center justify-center">
|
| 29 |
+
<!-- QR Code Section -->
|
| 30 |
+
<div class="text-center mb-12">
|
| 31 |
+
<div class="mb-8 p-6 bg-white rounded-lg shadow-sm border border-tie-gray/20">
|
| 32 |
+
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://tie.com/driver/jean"
|
| 33 |
+
alt="QR Code"
|
| 34 |
+
class="w-48 h-48 mx-auto">
|
| 35 |
+
<p class="text-tie-anthracite/50 text-sm mt-4">Scannez avec votre appareil photo</p>
|
| 36 |
+
</div>
|
| 37 |
+
|
| 38 |
+
<!-- Human Message -->
|
| 39 |
+
<h1 class="text-3xl font-light text-tie-anthracite mb-3">Vous venez de voyager avec Jean</h1>
|
| 40 |
+
<p class="text-tie-anthracite/60 max-w-xs mx-auto">Ajoutez votre chauffeur pour réserver facilement vos prochaines courses.</p>
|
| 41 |
+
</div>
|
| 42 |
+
|
| 43 |
+
<!-- Reassurance Messages -->
|
| 44 |
+
<div class="text-center text-tie-anthracite/50 text-sm space-y-2 mb-16">
|
| 45 |
+
<p>✔️ Gratuit pour les clients</p>
|
| 46 |
+
<p>✔️ Sans inscription compliquée</p>
|
| 47 |
+
<p>✔️ Réservation directe avec votre chauffeur</p>
|
| 48 |
+
</div>
|
| 49 |
+
|
| 50 |
+
<!-- Signature -->
|
| 51 |
+
<div class="text-center text-tie-anthracite/40">
|
| 52 |
+
<div class="text-xl font-medium mb-1">TIE</div>
|
| 53 |
+
<p class="text-xs">Tout commence par un bon feeling.</p>
|
| 54 |
+
</div>
|
| 55 |
+
</main>
|
| 56 |
+
|
| 57 |
+
<style>
|
| 58 |
+
.container {
|
| 59 |
+
max-width: 420px;
|
| 60 |
+
}
|
| 61 |
+
</style>
|
| 62 |
+
</body>
|
| 63 |
+
</html>
|
|
@@ -21,8 +21,19 @@ body {
|
|
| 21 |
::-webkit-scrollbar-thumb:hover {
|
| 22 |
background: #555;
|
| 23 |
}
|
| 24 |
-
|
| 25 |
/* Smooth transitions */
|
| 26 |
button, a {
|
| 27 |
transition: all 0.2s ease;
|
| 28 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
::-webkit-scrollbar-thumb:hover {
|
| 22 |
background: #555;
|
| 23 |
}
|
|
|
|
| 24 |
/* Smooth transitions */
|
| 25 |
button, a {
|
| 26 |
transition: all 0.2s ease;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
/* QR Page Specific */
|
| 30 |
+
@media print {
|
| 31 |
+
body {
|
| 32 |
+
background: white !important;
|
| 33 |
+
-webkit-print-color-adjust: exact;
|
| 34 |
+
print-color-adjust: exact;
|
| 35 |
+
}
|
| 36 |
+
.no-print {
|
| 37 |
+
display: none;
|
| 38 |
+
}
|
| 39 |
+
}
|