Darwin — Landing page & Application
Design • Projet perso
Exercice de conception UX/UI d'une landing page et d'une application mobile pour Darwin, l'éco-quartier bordelais. Un projet double-support qui explore la cohérence d'identité entre une page web de découverte et une app utilitaire pour les habitants et visiteurs du site.
Contexte
Conception réalisé dans le cadre d'une formation. Le sujet : imaginer l'écosystème digital de Darwin, éco-quartier emblématique de Bordeaux installé sur une ancienne caserne militaire. Le lieu mêle marché bio, espace de coworking, piste de skate, restauration et engagement écologique fort. L'enjeu du projet était de transposer cette identité atypique en deux supports complémentaires : une landing page de découverte et une application mobile pour les usagers du site.
Défi
Concevoir deux interfaces cohérentes entre elles mais aux usages distincts — l'une pour donner envie de venir (landing page), l'autre pour faciliter la vie sur place (app). Le tout en respectant l'ADN de Darwin : brut, engagé, vivant, loin des codes corporate.
Solution
Un design system commun basé sur une palette terre et végétale, une typographie affirmée et des compositions dynamiques. La landing page adopte un rythme éditorial pour raconter le lieu. L'application se concentre sur l'essentiel : agenda des événements, carte interactive du site, accès aux services et actualités du quartier.
Déroulement du projet
Recherche & immersion
Étude du lieu, de son positionnement et de ses valeurs. Benchmark de sites d'éco-lieux et d'applications de quartier pour identifier les codes visuels et fonctionnels pertinents.
Architecture UX
Définition de la structure de la landing page (sections, hiérarchie d'information, parcours lecteur) et des écrans principaux de l'application (onboarding, home, agenda, carte, services).
Design system & UI haute fidélité
Construction du design system (couleurs, typographie, composants réutilisables) partagé entre les deux supports. Maquettes desktop et mobile sous Figma.
Publication Behance
Mise en scène du projet avec mockups contextuels et case study détaillant les choix de design publiés sur Behance.
Stack technique
- Figma
Ce qui a été livré
- Landing page complète maquettée en desktop et mobile
- Application mobile maquettée sur les écrans principaux
- Design system cohérent couvrant les deux supports
- Projet publié sur Behance