Recycle Me
Recycle Me
Landing page
Landing page
Identité visuelle • Landing page
Identité visuelle • Landing page
Date/durée
Date/durée
Du 29 au 31 janvier 2025 • 2 jours
Octobre 2024 à janvier 2025 • 3 mois
Rôle
Rôle
UX/UI Designer : conception de la landing page
UX/UI Designer : conception de la landing page
Equipe
Equipe
3 designers UX/UI dont Claudia Vaz-Ribeiro et Agathe Roseren
3 designers UX/UI dont Claudia Vaz-Ribeiro et Agathe Roseren
Livrables
Livrables
Landing page responsive
Stratégie marketing
Diaporama de présentation
Landing page responsive
Stratégie marketing
Diaporama de présentation
Fondamentaux UX/UI
Fondamentaux UX/UI
Etude concurrentielle
Etude concurrentielle
Personae
Personae
Wireframing
Wireframing
Prototypage
Prototypage
Maquettage
Maquettage
UI Design
UI Design
Branding
Branding
Travail en équipe
Travail en équipe
Veille/Recherche inspirationnelle
Veille/Recherche inspirationnelle
Outils
Outils
Présentation du projet
Présentation du projet
Qu'est-ce que c'est Recycle Me ?
Recycle Me est une application fictive, destinée à tous : familles, jeunes actifs et seniors.
Elle propose de faciliter le recyclage à l'aide de l'IA : elle permet d'identifier les déchets par reconnaissance d'image et fournit des instructions claires pour un tri efficace.
En équipe, nous avons créé l'identité visuelle et la landing page de l'application en 2 jours. L'utilisation de l'IA faisait partie des consignes de l'exercice, afin de nous permettre de travailler efficacement dans ce délai court.
Qu'est-ce que c'est Recycle Me ?
Recycle Me est une application fictive, destinée à tous : familles, jeunes actifs et seniors.
Elle propose de faciliter le recyclage à l'aide de l'IA : elle permet d'identifier les déchets par reconnaissance d'image et fournit des instructions claires pour un tri efficace.
En équipe, nous avons créé l'identité visuelle et la landing page de l'application en 2 jours. L'utilisation de l'IA faisait partie des consignes de l'exercice, afin de nous permettre de travailler efficacement dans ce délai court.
Vue d'ensemble
Vue d'ensemble
1 - Concurrents & personae
1 - Concurrents & personae
Etudes des concurrents
Dans un premier temps, nous avons analysé deux concurrents, CITEO et Montri, avec l'aide de l'IA, afin de mieux définir le positionnement et les fonctionnalités de l'application.
Cette étape était essentielle avant de construire les personae : sans une vision claire de ce que l'application devait proposer, il aurait été difficile de construire des personae cohérents et pertinents.
Etudes des concurrents
Dans un premier temps, nous avons analysé deux concurrents, CITEO et Montri, avec l'aide de l'IA, afin de mieux définir le positionnement et les fonctionnalités de l'application.
Cette étape était essentielle avant de construire les personae : sans une vision claire de ce que l'application devait proposer, il aurait été difficile de construire des personae cohérents et pertinents.
CITEO
Organisme français dont la mission est de réduire l'impact des emballages ménagers et papiers.
Il s'adresse principalement aux entreprises et aux collectivités, proposant des ressources sur le recyclage et la réglementation.
Son positionnement reste très institutionnel et peu accessible pour un utilisateur lambda cherchant simplement à bien trier ses déchets.
CITEO
Organisme français dont la mission est de réduire l'impact des emballages ménagers et papiers.
Il s'adresse principalement aux entreprises et aux collectivités, proposant des ressources sur le recyclage et la réglementation.
Son positionnement reste très institutionnel et peu accessible pour un utilisateur lambda cherchant simplement à bien trier ses déchets.
Montri
Application mobile dédiée au tri des déchets. Elle propose un guide du tri par recherche ou scan de
code-barres, un calendrier de collecte personnalisé, une carte des points de collecte et la possibilité de faire des demandes auprès de sa collectivité. La reconnaissance se fait uniquement par code-barres, sans intelligence artificielle.
Montri
Application mobile dédiée au tri des déchets. Elle propose un guide du tri par recherche ou scan de
code-barres, un calendrier de collecte personnalisé, une carte des points de collecte et la possibilité de faire des demandes auprès de sa collectivité. La reconnaissance se fait uniquement par code-barres, sans intelligence artificielle.
Cibles et personae
En nous appuyant sur l'IA, nous avons d'abord défini les cibles (primaire, secondaire, tertiaire), puis construit les personae en découlant, chacun représentant une cible différente.
Ces personae nous ont servi de fil conducteur tout au long du projet : ils nous ont permis d'identifier ce qu'il était pertinent de mettre en avant dans la landing page et quelles informations étaient essentielles à transmettre.
Cibles et personae
En nous appuyant sur l'IA, nous avons d'abord défini les cibles (primaire, secondaire, tertiaire), puis construit les personae en découlant, chacun représentant une cible différente.
Ces personae nous ont servi de fil conducteur tout au long du projet : ils nous ont permis d'identifier ce qu'il était pertinent de mettre en avant dans la landing page et quelles informations étaient essentielles à transmettre.
2 - Identité visuelle
2 - Identité visuelle
Problématique
Comment concevoir une identité visuelle moderne qui reflète les valeurs écologiques de Recycle Me tout en restant accessible à tous ?
Les enjeux
Problématique
Comment créer une identité visuelle qui reflète le positionnement unique du festival tout en résonnant avec son public cible ?
Les enjeux
♻️
Créer une identité visuelle cohérente qui reflète les valeurs écologiques de l'application
🎨
Concevoir une identité simple, mémorable et adaptée à un public large
♻️
Créer une identité visuelle cohérente qui reflète les valeurs écologiques de l'application
🎨
Concevoir une identité simple, mémorable et adaptée à un public large
Processus
Moodboard
Le moodboard a permis de définir la direction artistique de Recycle Me : une identité moderne, mêlant tons naturels et neutres, typographies lisibles et motifs ludiques. Il a servi pour le choix de couleurs et éléments graphiques.
Processus
Moodboard
Le moodboard a permis de définir la direction artistique de Recycle Me : une identité moderne, mêlant tons naturels et neutres, typographies lisibles et motifs ludiques. Il a servi pour le choix de couleurs et éléments graphiques.
Définition des couleurs et typographies
Définition des couleurs et typographies
Branding colors
Neutral colors
Couleurs
La palette s'articule autour de différentes teintes de vert, couleur de l'écologie. Ces déclinaisons, allant du vert clair au vert foncé, permettent de créer une hiérarchie visuelle tout en assurant une identité cohérente et reconnaissable.
Couleurs
La palette s'articule autour de différentes teintes de vert, couleur de l'écologie. Ces déclinaisons, allant du vert clair au vert foncé, permettent de créer une hiérarchie visuelle tout en assurant une identité cohérente et reconnaissable.
Typographies
Le choix s'est porté sur la typographie Montserrat pour les titres, une typographie géométrique et moderne. Pour le corps de texte, Open Sans a été choisie pour sa simplicité et sa lisibilité, garantissant une lecture fluide pour tous les profils d'utilisateurs, tout comme Montserrat.
⚠️ Avec le recul : je choisirais une typographie de titre davantage distinctive du corps de texte, afin de marquer la hiérarchie visuelle et de justifier l'usage de deux typographies.
Typographies
Le choix s'est porté sur la typographie Montserrat pour les titres, une typographie géométrique et moderne. Pour le corps de texte, Open Sans a été choisie pour sa simplicité et sa lisibilité, garantissant une lecture fluide pour tous les profils d'utilisateurs, tout comme Montserrat.
⚠️ Avec le recul : je choisirais une typographie de titre davantage distinctive du corps de texte, afin de marquer la hiérarchie visuelle et de justifier l'usage de deux typographies.
Titres
Montserrat
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Titres
Montserrat
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Corps de texte
Open Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Corps de texte
Open Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Logo
Voici le logo réalisé par Claudia Vaz-Ribeiro et ses déclinaisons.
Le logo représente une poubelle ouverte surmontée de feuilles, combinant les notions de recyclage et de nature. Simple et reconnaissable, ses déclinaisons (colorées et monochrome) permet de s'adapter aux différents supports.
Logo
Voici le logo réalisé par Claudia Vaz-Ribeiro et ses déclinaisons.
Le logo représente une poubelle ouverte surmontée de feuilles, combinant les notions de recyclage et de nature. Simple et reconnaissable, ses déclinaisons (colorées et monochrome) permet de s'adapter aux différents supports.
Icônes et éléments graphiques
Certains illustrent une fonctionnalité précise de l'application (carte des points de collecte, signalements...), facilitant ainsi la compréhension et la navigation pour tous les profils d'utilisateurs. D'autres font référence à l'écologie et à la nature, renforçant les valeurs de l'application.
Icônes et éléments graphiques
Certains illustrent une fonctionnalité précise de l'application (carte des points de collecte, signalements...), facilitant ainsi la compréhension et la navigation pour tous les profils d'utilisateurs. D'autres font référence à l'écologie et à la nature, renforçant les valeurs de l'application.
⚠️ Avec le recul : pour une question de cohérence et d'accessibilité, nous aurions pu faire l'ensemble des icônes ou illustrations remplies.
⚠️ Avec le recul : pour une question de cohérence et d'accessibilité, nous aurions pu faire l'ensemble des icônes ou illustrations remplies.
3 - Landing page
3 - Landing page
Problématiques
Comment concevoir une landing page claire et engageante qui donne envie aux utilisateurs de télécharger l'application Recycle Me ?
Les enjeux
Problématiques
Comment concevoir une landing page claire et engageante qui donne envie aux utilisateurs de télécharger l'application Recycle Me ?
Les enjeux
📣
Communiquer clairement les fonctionnalités et la valeur ajoutée de l'application
✏️
Concevoir une interface accessible et cohérente avec l'identité visuelle de Recycle Me
🎯
Inciter les visiteurs à passer à l'action en téléchargeant l'application
📣
Communiquer clairement les fonctionnalités et la valeur ajoutée de l'application
✏️
Concevoir une interface accessible et cohérente avec l'identité visuelle de Recycle Me
🎯
Inciter les visiteurs à passer à l'action en téléchargeant l'application
Processus
Recherche inspirationnelle
Pour commencer, j'ai effectué une recherche inspirationnelle en consultant différentes landing pages. Je me suis notamment inspirée de la landing page de CITEO pour son application "Guide du tri", dont l'agencement et la structure m'ont particulièrement intéressée.
Processus
Recherche inspirationnelle
Pour commencer, j'ai effectué une recherche inspirationnelle en consultant différentes landing pages. Je me suis notamment inspirée de la landing page de CITEO pour son application "Guide du tri", dont l'agencement et la structure m'ont particulièrement intéressée.
Zoning
J'ai d'abord fait un rapide zoning, un peu détaillé, de la landing page sur Figjam.
Cela a permit de se mettre d'accord rapidement sur l'axe/la direction à prendre et le contenu (éléments de réassurance, preuves sociales) pour la conception de la landing page.
À la fin de chaque étape, nous échangions pour nous mettre d'accord ensemble sur le contenu de la page proposée.
Zoning
J'ai d'abord fait un rapide zoning, un peu détaillé, de la landing page sur Figjam.
Cela a permit de se mettre d'accord rapidement sur l'axe/la direction à prendre et le contenu (éléments de réassurance, preuves sociales) pour la conception de la landing page.
À la fin de chaque étape, nous échangions pour nous mettre d'accord ensemble sur le contenu de la page proposée.
L'ensemble du travail à suivre a été réalisé sur Figma
L'ensemble du travail à suivre a été réalisé sur Figma
Wireframes
Cette étape m'a permis de travailler davantage : le contenu, la mise en forme/page mais aussi les composants pour la partie témoignage (qui sont une preuve/réassurance) et FAQ.
Wireframes
Cette étape m'a permis de travailler davantage : le contenu, la mise en forme/page mais aussi les composants pour la partie témoignage (qui sont une preuve/réassurance) et FAQ.
Wireframes de la version mobile
Maquettes
J'ai appliqué la charte graphique établie en intégrant le logo, les couleurs, les images et me suis penchée sur le contenu et les différents textes.
Durant ces deux dernières étapes, j'ai organisé les variables et créé différents composants, essentiel pour rester organisées dans le travail d'équipe.
Maquettes
J'ai appliqué la charte graphique établie en intégrant le logo, les couleurs, les images et me suis penchée sur le contenu et les différents textes.
Durant ces deux dernières étapes, j'ai organisé les variables et créé différents composants, essentiel pour rester organisées dans le travail d'équipe.
Variables de couleurs
Variables de couleurs
Variables pour la taille des polices, mais aussi pour les marges, le padding, les composants… Adaptés à chaque format (desktop et mobile) afin de faciliter le responsive.
Variables pour la taille des polices, mais aussi pour les marges, le padding, les composants… Adaptés à chaque format (desktop et mobile) afin de faciliter le responsive.
Définition des styles de texte, avec des tailles qui sont liées aux variables correspondantes.
Définition des styles de texte, avec des tailles qui sont liées aux variables correspondantes.
Une partie des composants réalisés pour la landing page.
Une partie des composants réalisés pour la landing page.
Prototypes
Pour terminer, j'ai rendu la maquette mobile et desktop interactive : bandeau défilant, ancre, ouverture et fermeture des questions, etc.
Prototypes
Pour terminer, j'ai rendu la maquette mobile et desktop interactive : bandeau défilant, ancre, ouverture et fermeture des questions, etc.
Tu peux consulter ci-dessous les prototypes.
N'hésite pas à mettre le prototype en plein écran pour une meilleure expérience !
Tu peux consulter ci-dessous les prototypes.
N'hésite pas à mettre le prototype en plein écran pour une meilleure expérience !
6 - Retour d'expérience
6 - Retour d'expérience
J'ai apprécié travailler en équipe sur ce projet, cela a été très enrichissant, nous avons appris les unes des autres.
J'ai aussi beaucoup aimé le sujet en lui-même : travailler sur l'identité visuelle de Recycle Me était stimulant, d'autant plus que ses valeurs écologiques résonnent avec les miennes.
La conception de la landing page a aussi été très intéressante, car elle implique une réflexion plus orientée marketing : comment capter l'attention, transmettre les bons messages et inciter au téléchargement de l'application.
J'ai apprécié travailler en équipe sur ce projet, cela a été très enrichissant, nous avons appris les unes des autres.
J'ai aussi beaucoup aimé le sujet en lui-même : travailler sur l'identité visuelle de Recycle Me était stimulant, d'autant plus que ses valeurs écologiques résonnent avec les miennes.
La conception de la landing page a aussi été très intéressante, car elle implique une réflexion plus orientée marketing : comment capter l'attention, transmettre les bons messages et inciter au téléchargement de l'application.
Merci pour votre lecture
Merci pour votre lecture
