Création GeopTime
- Rôle
- UI/UX design, identité visuelle, développement full-stack
- Durée
- 12 semaines (temps partiel)
- Outils
- Figma, HTML, CSS, JavaScript, PHP, SQL
- Contexte
- Client réel : Entreprise d'optimisation des temps de déplacement
Brief : Créer le site d'une solution B2B de gestion du temps et de localisation, de la maquette à la base de données.
Objectif : Expliquer des fonctionnalités logicielles complexes et générer des contacts qualifiés.
Livrables : Logo redessiné, design system et UI Kit, UI/UX, développement full-stack (HTML, CSS, JavaScript, PHP, SQL).
Point de départ : pas de site
GeopTime édite une solution B2B de gestion du temps et de localisation. Sa présence en ligne ne présentait pas clairement l'offre. Le site à créer devait expliquer le produit à des décideurs et générer des demandes de contact.
Objectifs métier et zoning
J'ai d'abord listé les objectifs de l'entreprise : générer des leads, prouver l'expertise technique, détailler les fonctionnalités sans surcharge. Chaque section répond à l'un d'eux. Les wireframes fixent l'ordre de priorité des blocs avant le webdesign.
Nouvelle identité
J'ai créé un design system et un UI Kit : couleurs vives (bleu, vert) sur fond blanc pour le contraste. Le logo a été redessiné avec des formes plus géométriques (comparaison ci-dessus).
Rendre les fonctionnalités lisibles
Le hero présente la proposition de valeur et un appel à l'action. Les fonctionnalités sont présentées avec des icônes dans une grille, pour une lecture rapide. Le footer, auparavant simple liste de liens, sert désormais de navigation secondaire structurée (comparaisons ci-dessous).
Design et code
Première réalisation où j'ai assuré seul le développement complet : intégration HTML/CSS, JavaScript, logique serveur en PHP, base de données SQL. Connaître les contraintes de développement change la façon de maquetter sur Figma : je ne dessine plus d'éléments dont je ne peux pas estimer le coût d'intégration.
En collaboration avec Mohamed Chafai
Résultats
Tous les livrables,
dans un seul dossier.
Tous les documents du projet au format PDF, réunis dans une archive prête à télécharger.
