Isaac
Kibinda

01

Cultive

Potager d'intérieur connecté — UX/UI Design

Cultive est un projet de potager d'intérieur connecté, 100 % Made in France, pensé pour permettre à chacun de cultiver facilement des herbes aromatiques, des fleurs comestibles et des mini-légumes chez soi, même en milieu urbain.

Rôle

UX/UI Designer & Dev

Client

Cultive

Outils

Figma, Photoshop, Illustrator

01

Procédure

1

Recherche & compréhension utilisateur

  • Interviews utilisateurs
  • Job To Be Done
  • Persona design
2

Structuration de l'expérience

  • Tri de cartes
  • Arborescence
  • UX mapping
3

UX Concept

  • Zoning
  • Prototype papier
  • Wireframes
4

UI Design

  • Maquettes site internet
  • Prototypage application mobile
5

Développement Web

  • Conception web
02

Challenges

Problème 1

L'un des principaux enjeux du projet a été de trouver le bon équilibre entre technologie et simplicité. Le potager connecté intègre des fonctionnalités avancées, mais l'expérience devait rester accessible à des utilisateurs peu technophiles. Cela a nécessité un important travail d'UX pour simplifier les parcours, clarifier les informations et éviter toute surcharge fonctionnelle, aussi bien sur le site que dans l'application.

Problème 2

Un second problème a concerné la crédibilité et la confiance autour du Made in France et de l'écoresponsabilité. Dans un contexte où certains concurrents ont souffert de polémiques, il a été essentiel de concevoir une communication transparente, pédagogique et mesurée, capable de rassurer les utilisateurs tout en évitant le greenwashing et les promesses excessives.

03

Audit visuel

Avant de concevoir l'identité, j'ai audité les trois principaux concurrents du potager d'intérieur — Véritable, Prêt à Pousser et AUK — sur leurs codes visuels et leur ergonomie mobile.

Logo, palette et produit Véritable

Véritable

Véritable met en évidence un univers visuel fondé sur la simplicité et l'accessibilité. Les couleurs principales associent un vert lumineux, un rose framboise et un gris anthracite neutre, formant une palette vive mais parfois dissonante. Le système typographique repose sur Montserrat pour les titres H1, et Poppins pour l'ensemble du contenu, assurant lisibilité mais manquant de singularité. L'iconographie privilégie des visuels pédagogiques et descriptifs, soutenus par des icônes vectorielles.

Logo, palette et produit Prêt à Pousser

Prêt à Pousser

Prêt-à-Pousser affirme une identité visuelle fraîche et conviviale. La couleur principale est un vert profond, qui structure l'ensemble de la charte. La typographie combine Apfel pour les titres, offrant un caractère distinctif et expressif, et Roboto pour les paragraphes, garantissant une lecture fluide et moderne. L'iconographie privilégie des visuels lumineux et inspirants, mettant en scène les produits dans un quotidien accessible et familial, accompagnés de pictogrammes simples et illustratifs.

Logo, palette et produit AUK

AUK

AuK affirme une identité visuelle moderne et fonctionnelle. Les couleurs principales associent un vert menthe doux et un jaune ocre profond, créant un contraste marqué qui traduit à la fois fraîcheur et dynamisme. La typographie repose exclusivement sur Source Sans Pro, assurant une lisibilité homogène mais parfois limitée en hiérarchie. L'iconographie combine photographies réalistes en contexte et pictogrammes vectoriels sobres, renforçant l'image d'une marque innovante et accessible.

Analyse ergonomique mobile

  • 1

    Loi de familiarité

    Les items (menu burger, panier etc) de navigation sont familiers.

  • 2

    Loi d'affordance

    On reconnaît la fonction de chaque item du menu.

  • 3

    Loi de proximité

    Les blocs de textes sont regroupés de manière logique.

  • 4

    Loi de similarité

    Les produits sont regroupés par similitude.

  • 5

    Visibilité du statut du système

    Bien appliqué : le panier affiche le compteur d'articles (0) en haut, visible immédiatement.

  • 6

    Reconnaissance plutôt que rappel

    Certains textes demandent un effort de lecture inutile à cause du contraste faible.

  • 7

    Esthétique et design minimaliste

    Ajout d'encarts flottants « parasites » qui nuit à la sobriété et surcharge légèrement le visuel.

  • Points forts Points faibles
Analyse ergonomique mobile — Véritable

Tableau comparatif

CritèresVéritablePrêt à PousserAUK
GuidageBon guidage global, mais surcharge textuelle et visuelle dans certaines sections.Navigation claire mais surcharge décorative qui détourne l'attention.Guidage optimal : CTA clair, hiérarchie visuelle nette et minimaliste.
Charge de travailTexte explicatif trop dense sur certaines pages, demande un effort de lecture.Informations parfois trop nombreuses, ce qui augmente l'effort de lecture.Charge cognitive réduite : message concis, visuels clairs et impactants.
Contrôle expliciteBoutons visibles mais hiérarchie secondaire pas toujours claire.CTA présents mais parfois noyés dans le décor visuel.CTA explicite et direct (« Buy now »), cohérent sur desktop et mobile.
AdaptabilitéResponsive adapté mais la hiérarchie visuelle se perd sur petit écran.Responsive correct mais surcharge visuelle sur mobile.Très bonne adaptabilité mobile-first, CTA visibles immédiatement.
Gestion des erreursFeedback limité, pas toujours explicite dans les formulaires.Peu de feedback utilisateur en cas d'erreur.Feedback d'erreur limité, mais conventions e-commerce respectées.
CohérenceIdentité sympathique mais iconographie hétérogène, cohérence limitée.Univers coloré mais parfois trop décoratif, manque de sobriété.Cohérence visuelle forte, palette minimaliste, univers premium affirmé.
Signifiance des codesMélange de styles iconographiques qui brouille le message.Codes visuels globalement clairs mais parfois surchargés.Codes visuels simples et universels (CTA vert, flèche navigation, etc.).
CompatibilitéBonne compatibilité mais surcharge textuelle diminue l'efficacité.Navigation standard mais densité visuelle alourdit la compréhension.Compatible avec standards e-commerce et conventions UI modernes.

Conclusion

L'analyse des trois principaux concurrents, Prêt à Pousser, Véritable et AUK, révèle des approches visuelles et ergonomiques très différentes. Prêt à Pousser construit un univers convivial et accessible, mais sa surcharge décorative nuit à la lisibilité et à la cohérence. Véritable affirme une identité sympathique et culinaire, toutefois le mélange d'iconographies et certains contrastes réduisent l'impact visuel. AUK se démarque par une grande clarté typographique, une palette minimaliste et une forte cohérence visuelle, ce qui renforce son positionnement premium et attractif.

Pour Cultive, ces constats ouvrent la voie à des orientations stratégiques claires. Il sera essentiel de préserver une hiérarchie typographique simple et lisible, d'éviter les excès graphiques pour mieux valoriser le produit, de travailler une iconographie homogène fidèle à l'univers de la marque et de s'inspirer de l'efficacité minimaliste d'AUK tout en maintenant une chaleur et une proximité visuelle propres à Cultive. Cette démarche permettra de concilier clarté, cohérence et attractivité afin d'affirmer un positionnement à la fois premium et accessible.

04

Stratégie UX

L'ensemble du parcours utilisateur a été conçu en tenant compte des besoins et des attentes des différentes cibles. L'interface de la page d'accueil a été repensée afin de mettre en avant uniquement les informations essentielles, en évitant toute surcharge cognitive.

Les choix de conception s'appuient sur les heuristiques de Bastien & Scapin, notamment en matière de lisibilité, de guidage et de cohérence, afin de proposer une expérience claire et rassurante, même pour des utilisateurs débutants.

Une attention particulière a également été portée à la hiérarchisation de l'information et aux feedbacks visuels, permettant à l'utilisateur de comprendre facilement l'état du système et les actions à effectuer à chaque étape de son parcours.

Stratégie UXStratégie UX
05

UI Final

Design & interactions

Cette phase vise à traduire les choix UX en une interface mobile claire, intuitive et rassurante. L'application accompagne l'utilisateur à chaque étape, du suivi du potager connecté à la gestion des recharges, en mettant l'accent sur la lisibilité, la hiérarchisation de l'information et des interactions simples, adaptées à des utilisateurs débutants.

Design & interactions

Parcours utilisateur

Le site web a été conçu comme le point d'entrée principal de l'expérience Cultive. Il présente le produit, ses fonctionnalités et les recharges de manière claire et structurée, tout en guidant l'utilisateur dans sa découverte du potager connecté. Une attention particulière a été portée à la hiérarchisation des contenus, à la cohérence visuelle et à la simplicité du parcours, afin de faciliter la compréhension et la prise de décision.

Parcours utilisateur
06www.cultive.fr

Charte
graphique

Logotype, couleurs, typographies, icônes, boutons, grille et direction photo : le système visuel conçu pour Cultive, pensé pour rester clair et cohérent sur le site, l'application et les supports print.

01

Moodboard

Moodboard Cultive
02

Recherche des logos

Pour concevoir l'identité visuelle de Cultive, nous avons exploré plusieurs axes sous forme de croquis. Trois directions ont été présélectionnées puis évaluées via un 5-Second Test auprès de 10 participants : chaque logo était affiché 5 secondes, puis les personnes formulaient spontanément leurs mots-clés et leur compréhension.

Pistes testées

  • Symbole deux feuilles
  • Feuille posée sur un C
  • Monogramme C intégrant une feuille

Choix final

Nous retenons la fusion feuille + C : un signe simple, chaleureux et accessible, qui positionne Cultive comme compagnon de culture à domicile. Ce logotype assure une excellente lisibilité à toutes tailles, une forte reconnaissance et reflète notre promesse : une technologie discrète au service du végétal.

Croquis de recherche du logo Cultive
03

Logotype & zone de protection

Logotype

Pour le logotype de Cultive, nous avons associé une feuille épurée à un « C » arrondi. Ce monogramme incarne l'alliance nature-technologie : une culture simple, autonome et durable à domicile. L'ouverture du C évoque l'accueil et la connexion, sa courbe protège la pousse. Un signe clair, mémorable et 100 % Made in France.

Zone de protection

Pour une lisibilité optimale, un espace de protection entoure le logotype. Cette zone, à laisser totalement vide de tout texte, image ou autre élément, évite toute interférence. La marge minimale équivaut à la hauteur et à la largeur du « c » du logo, repère de mesure.

Construction du logotype et zone de protection
04

Déclinaisons du logo

Les déclinaisons du logo Cultive assurent sa flexibilité et sa reconnaissance dans tous les contextes d'utilisation. Chaque version a été pensée pour garantir lisibilité et impact visuel, qu'il soit apposé sur fond clair, sombre ou coloré. Les variations chromatiques s'appuient sur la palette officielle de Cultive afin de maintenir une cohérence identitaire forte.

Déclinaisons couleur du logo Cultive
Tailles du logo
Tailles : minimum 60 px, maximum 500 px.
Interdits du logo
Interdits : ne pas déformer, réorienter, recolorer ni ajouter d'effets au logo.
Appicons Cultive
Appicons optimisés pour garantir lisibilité et impact visuel sur les réseaux sociaux et en icône d'application.
05

Couleurs

Le vert forêt foncé incarne la nature, la fiabilité et l'engagement écologique, tandis que le vert citron symbolise la fraîcheur, la croissance et l'accessibilité. Leur contraste assure une forte lisibilité et renforce l'identité éco-responsable de Cultive.

Le vert forêt foncé est utilisé pour les fonds, titres et éléments structurants, apportant stabilité et élégance. Le vert citron sert aux accents, icônes et éléments interactifs, attirant l'œil et dynamisant la communication visuelle.

01Vert forêt foncé
Couleur principale
HEX
#033319
RVB
R3, V51, B25
CMJN
94%, 0%, 51%, 80%
Pantone
5535 C
02Vert citron
Couleur principale
HEX
#CAED63
RVB
R202, V237, B99
CMJN
15%, 0%, 58%, 7%
Pantone
373 C
03Vert émeraude vif
Couleur secondaire
HEX
#00D45F
RVB
R0, V212, B95
CMJN
100%, 0%, 55%, 17%
Pantone
354 C
04Vert pastel clair
Couleur secondaire
HEX
#EAFFEF
RVB
R234, V255, B239
CMJN
8%, 0%, 6%, 0%
Pantone
9525 U
06

Typographie

Le duo Poppins-Raleway allie modernité et élégance, parfaitement adapté à l'identité premium de Cultive. Poppins pour les titres apporte un caractère contemporain qui incarne l'innovation du potager connecté, avec ses graisses variées offrant une hiérarchie visuelle riche. Raleway pour les paragraphes complète cette approche avec sa finesse naturelle et son excellente lisibilité, essentielle pour les textes longs de l'application mobile.

NiveauDesktopTabletteMobile
H148 px40 px32 px
H232 px32 px24 px
H324 px24 px16 px
P16 px16 px16 px
AaTitres

Poppins

ExtraboldBoldSemiBoldMediumRegular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 # @ ~

AaTextes

Raleway

BlackBoldSemiBoldMediumLight

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 # @ ~

07

Icônes

Set d'icônes Cultive
08

Boutons

Les boutons de Cultive ont été conçus pour allier lisibilité, accessibilité et cohérence avec l'identité visuelle de la marque. Leur dimensionnement différencié (32 px sur desktop, 40 px sur tablette et mobile) répond aux usages spécifiques de chaque support, garantissant un confort tactile optimal. La taille minimale du texte (14 px) assure une parfaite lisibilité, tandis que les états normal et au survol apportent un feedback clair à l'utilisateur.

Survolez les boutons pour voir l'état au survol / au clic.

Contour
Citron
Forêt
Pastel
Hauteur : 32 px desktop · 40 px tablette & mobilePadding : 24 px · icône 8 pxTexte minimum : 14 px
09

Grid system

Desktop
Colonnes
12
Marge
80 px
Gouttière
24 px
Tablette
Colonnes
8
Marge
40 px
Gouttière
24 px
Mobile
Colonnes
4
Marge
24 px
Gouttière
24 px
10

Images autorisées & refusées

✓Images autorisées

Images autorisées
Toujours montrer le potager Cultive dans un cadre lumineux et moderne. Les plantes doivent paraître fraîches et abondantes. Favoriser des scènes de vie conviviales et naturelles qui expriment simplicité, durabilité et élégance.

✕Images refusées

Images refusées
Exemples d'images qui ne sont pas autorisées dans l'univers de Cultive.
11

Supports print & web

Supports Cultive : posts réseaux sociaux, flyer, sacs
Applications de l'identité Cultive

Projet suivant

Tous les projets →
Nomadwear
Voir l'étude de cas→
02

Nomadwear

UI Design
UI DesignMode modulaire