Projet FRIGIMOOV

La fourmi jaune
Partager son travail !

Projet FRIGIMOOV : la fourmi jaune doit premièrement mettre en place une stratégie de communication 360° puis proposer un site web e-commerce pour une marque. L’entreprise fictive est en outre spécialisée dans la livraison express de produits frais et surgelés à domicile. Elle souhaite alors développer sa notoriété et promouvoir son activité. Elle attend donc pour septembre 2023 des livrables spécifiques.
Contexte : le projet est réalisé dans le cadre d’une formation en vue d’obtenir un TP de Concepteur designer UI.
Principales ressources : Freepik, Unsplash, Youtube, Google, Pixabay, Instagram, Facebook, Hotjar, Unblast, Adobe, WordPress, GTMétrix, Pagespeed insight, outils SEO, Yooda Insight, etc.
Durée du projet : 8 mois, sectionnés par des cours et un stage de 2 mois.


Contraintes :
– Demande de construire une stratégie de communication pour une entreprise 100% fictive
– Gestion du temps et respect des deadlines attendues
– Développement rapide d’une polyvalence pour gérer le projet
Compétences demandées :
– Gestion de projet
– UI/UX design
– Direction artistique et stratégique
– Rédaction SEO
– Intégration sur WordPress
– Illustrations
– Graphisme
– Motion design
– Autres.

Liste des livrables réalisés pour le projet de site web

La fourmi jaune (alias Mathilde NICOLAS) doit gérer le projet sur plusieurs mois et ainsi assurer une cohérence de bout en bout. En septembre, elle parvient enfin à boucler le projet, allant du cahier des charges à la productions des livrables attendus. La gestion du projet comprend globalement le périmètre et la faisabilité du projet, une grille de questionnement, une note d’intention pour exprimer les motivations et les contraintes du projet, ainsi que la planification de toutes les tâches.

Deuxièmement, la petite fourmi doit définir une stratégie de communication 360°. Pour cela, elle commence par faire une veille ciblée puis détermine divers éléments : SWOT, PESTEL, objectifs, enjeux, positionnement, moodboards, typologies, ainsi qu’un planning éditorial, etc. Elle définit également les cibles (personas) et les concurrents de l’entreprise. Après avoir déterminé la charte graphique, elle suit ensuite les différentes étapes pour construire le site web FRIGIMOOV. La fourmi jaune intègre notamment les pages sur WordPress de manière responsive et sécurisée. Pour finir, elle créée divers supports de communication print/web ainsi qu’une vidéo promotionnelle. L’insecte présente également, en plus du dossier de présentation, un autre support professionnel pour valider des compétences techniques.


Pour plus d’informations sur le Titre professionnel de Concepteur designer UI, vous pouvez aussi consulter le lien ci-joint qui redirige directement sur le site de France Compétences.

Apomado Express : le projet d’une refonte complète

Apomado express est une entreprise fictive qui propose la livraison express de produits frais et surgelés à domicile. Elle possède en effet 3 dark stores positionnés à des endroits stratégiques à Lyon, ce qui lui permet de stocker et de livrer rapidement les commandes reçues dans le périmètre. Elle travaille notamment avec des producteurs régionaux et assure ainsi la livraison de produits frais et locaux. Apomado express prône aussi la qualité, la performance, l’humain et l’innovation.

Sa force : son partenariat avec la Maison Thiriet

Récemment, Apomado express a développé un partenariat avec la Maison Thiriet, un des leaders du surgelé en France. Ce partenariat permet alors aux 2 entreprises de développer leurs services. Désormais, l’entreprise Apomado express peut donc garantir la livraison et la vente de plus de 1700 produits frais et surgelés en ligne. De surcroît, le service propose un rapport qualité/prix compétitif. De ce fait, la marque peut répondre à la problématique de ces citadins qui n’ont pas le temps ou qui ne peuvent pas se déplacer. Pour attirer des prospects en quête de bonnes affaires, elle met d’ailleurs en place des offres promotionnelles temporaires.

Projet FRIGIMOOV - dossier - valeur ajoutée

Les besoins de l’entreprise

Apomado express souhaite en premier lieu profiter de son partenariat avec la Maison Thiriet pour promouvoir son activité. Elle aimerait développer sa notoriété, être plus visible sur le web, trouver de nouveaux clients et également créer des opportunités pour développer des partenariats. Pour septembre 2023, elle demande donc une refonte complète de son identité de marque, une stratégie de communication globale, un site web e-commerce, du contenu print/web, un planning éditorial et une vidéo promotionnelle.

Gestion du projet

Pour commencer, la fourmi jaune (alias Mathilde NICOLAS) réalise une grille de questions afin de comprendre les attentes du client et définir un périmètre du projet. Avec une matrice SWOT, elle détermine ensuite les forces et faiblesses, les menaces et les opportunités de l’entreprise. Pas à pas, la petite bête jaune construit donc un cahier des charges solide.

Projet FRIGIMOOV - dossier - rétroplanning des tâches

Réalisation d’une veille ciblée

Pour commencer, la fourmi jaune réalise une veille concurrentielle et sectorielle. Elle regroupe ainsi les leaders du quick commerce en France et détermine les concurrents directs et indirects. Les résultats de la veille lui permettent alors de mieux comprendre les tendances du secteur et des consommateurs vis-à-vis de la livraison express et du surgelé.

Mise en place d’une stratégie de communication 360°

Enfin, l’insecte jaune détermine une stratégie de communication 360° : les objectifs de l’entreprise, les canaux de communication, les Kpis, les réseaux sociaux, le ton de communication et autres axes stratégiques pour répondre aux attentes des consommateurs. Le but est tout d’abord de collecter des données ciblées en vue d’optimiser les services de l’entreprise. L’utilisateur est de toute évidence placé au centre des services. La stratégie Inbound marketing est également intégrée pour attirer des prospects avec du contenu de qualité et personnalisé.

Création de benchmarks ciblés

La créature jaune effectue 3 benchmarks ciblés ainsi qu’un moodboard tendance. Cela lui permet alors d’observer les tendances marketing et de définir des axes de différenciation. Elle créée également 4 typologies concurrentielles pour positionner les marques en fonction de leur logo. Ces grilles concurrentielles permettent ainsi d’établir des comparaisons et de définir des orientations pour la suite.

Projet FRIGIMOOV - dossier - stratégie typologie 2/4 marques surgelés

Détermination des cibles et des concurrents

La veille stratégique amène la jeune fourmi à déterminer les cibles de l’entreprise et ses concurrents. En observant les comportements des consommateurs, elle détermine donc 2 personas type pour identifier les besoins et les attentes auxquels l’entreprise doit répondre.

Proposition de namings

La fourmi jaune poursuit donc sa stratégie en déterminant des idées de naming, tous disponibles sur les sites OVH et à l’INPI.

Pistes graphiques

A la suite de recherches, elle propose plusieurs pistes graphiques. Le client peut alors choisir la solution qui lui plait et se sentir rassuré en comprenant la démarche du projet.

Choix final du client

Finalement, le client choisit le naming « FRIGIMOOV » et l’icône du livreur express. Le naming est davantage court, efficace, facile à prononcer et à retenir. L’icône à la fois abstraite, figurative, moderne et passe-partout, correspond d’ailleurs bien aux univers de la livraison en quick commerce et du surgelé. Le nom « FRIGIMOOV » est unique et ne possède en effet aucun concurrent relié à celui-ci. L’ensemble propose donc un univers cohérent, harmonieux, ludique et aussi flexible.

FRIGIMOOV : une identité de marque cohérente et assumée

L’identité visuelle FRIGIMOOV se démarque donc par son orange corail dominant et son logo iconique. Le naming « FRIGIMOOV » est notamment la fusion de « frigidaire » et de « mouvement », 2 termes qui relient les univers du quick commerce et du surgelé. A la différence des marques du surgelé, FRIGIMOOV arbore l’esprit vif et rapide du quick commerce. Le bleu clair, 2e couleur calme davantage la vivacité du orange et rappelle avec douceur l’univers du froid. Le blanc symbolise en effet la pureté, le froid, la propreté. Le vert exprime plutôt la nature, le bien-être, l’écologie. Le beige représente le naturel, la simplicité. Le noir garantit une part de sobriété et d’élégance.

Logo final de FRIGIMOOV

Le logo final se compose de formes simples et géométriques. Ces formes peuvent notamment être réutilisées en guise de motifs et d’éléments décoratifs. L’éclair composant le corps du livreur exprime en effet la vitesse, la puissance et le dynamisme. Les cercles représentent la constance d’un mouvement, tandis que le carré illustre bien la livraison de surgelés solide et stable. Le logo vectoriel peut en outre s’adapter sur tous types de supports et tailles. Les 2 typographies choisies sont également sélectionnées pour leur lisibilité, leur singularité et le nombre de styles. Le choix d’utiliser l’italique pour des titres permet aussi de représenter l’idée de mouvement et de se démarquer des autres concurrents.

Projet FRIGIMOOV - dossier - charte graphique - aperçu du logo orange sur fond d'image

La charte graphique de FRIGIMOOV

La charte graphique regroupe donc un concept graphique, le logo et ses déclinaisons, les couleurs, des supports print, ainsi que les typographies. Elle définit aussi le type de mise en page des documents, une bibliothèque de visuels et les images à utiliser. En plus de cela, la fourmi jaune réfléchit sur la manière d’intégrer la charte graphique sur le site web. Elle ne travaille pas la structure et se concentre plutôt sur l’aspect accessible.

Conception de cartes de visite et d’un flyer promotionnel pour FRIGIMOOV

La jeune fourmi créée tout d’abord un design de carte de visite et le décline en différentes couleurs. Elle réalise ensuite un flyer promotionnel FRIGIMOOV recto-verso au format A4, prêt pour une éventuelle impression.

Mise en situation pour tous types de supports

La créature créative propose aussi des mises en situation pour tous types de supports de communication. Cela peut donc aller de supports papier A4 à de la signalétique.

Projet FRIGIMOOV - dossier - charte graphique - mise en situation signalétique camionnette écoresponsable rouge
Projet FRIGIMOOV - dossier - charte graphique - mise en situation signalétique évènementiel

Construction du futur site web FRIGIMOOV

La fourmi jaune s’appuie premièrement sur ses recherches pour déterminer un parcours utilisateur cohérent (user flow). Elle focalise davantage son attention sur l’expérience client et liste les fonctionnalités à intégrer. Elle construit ensuite un zoning des pages du site web en mobile first et organise les différentes sections de manière stratégique. La construction du site web est longue et doit en effet se structurer en plusieurs étapes : zoning, wireframe, maquettage, protoypage, bêta testing. Chaque étape rencontre des changements et des corrections, au profit d’une meilleure expérience client.

Construction du wireframe

La fourmi jaune travaille en effet un wireframe responsive adapté pour des versions PC et mobiles. Le but du wireframe est avant tout de cadrer et corriger la structure du zoning. L’insecte intègre notamment plus de détails comme le type de contenu, le positionnement des éléments, les CTA ou encore la hiérarchie.

Projet FRIGIMOOV - dossier - site web - wireframe vue globale composée de 12 pages pour PC
Projet FRIGIMOOV - dossier - site web - wireframe stratégie de la structure
Projet FRIGIMOOV - dossier - site web - wireframe vue globale composée de 12 pages pour mobile

Maquettage prototypé du site web FRIGIMOOV

Le maquettage est encore une nouvelle étape. Cette phase permet ainsi d’intégrer la charte graphique et d’optimiser au mieux les fonctionnalités du site web. La fourmi jaune poursuit donc le projet et réalise les pages du site web pour une version mobile et PC. Elle vérifie en outre que le site web dispose de toutes les fonctionnalités pour répondre aux besoins des utilisateurs et intègre des animations (carrousel d’images, survol, défilement, cases à cocher, champs de saisie, pop-up, etc.). A la suite du maquettage, la créature jaune approfondie la phase prototypage pour ainsi relier les pages entre-elles. Il peut s’agir de pages mais aussi d’images, de textes hyperliens, etc. Elle gère ainsi le prototypages pour des versions PC et mobile.

Projet FRIGIMOOV - dossier - site web - maquettage vue globale des pages pour mobile 1/2

Normes UI/UX design et design systeme

Lors de la phase maquettage, la créature jaune prend en compte des normes UI/UX design pour en effet garantir une navigation fluide, accessible et performante. Elle vérifie d’ailleurs que les couleurs utilisées comportent un bon rapport de contraste. De ce fait, elle construit progressivement un design systeme et définit le comportement de plusieurs éléments.

Projet FRIGIMOOV - dossier - site web - maquettage normes WCAG 1/3

Intégration du site web FRIGIMOOV sur WordPress (en local)

En premier lieu, l’insecte jaune intègre le site web FRIGIMOOV en local. Puis, elle ajoute des premières mesures de sécurité. Petit à petit, la fourmi jaune (alias Mathilde NICOLAS) intègre donc l’identité visuelle de la marque grâce à l’injection d’une feuille de style CSS. Elle installe notamment des plugins WordPress pour s’adapter aux besoins du client.

Projet FRIGIMOOV - dossier - site web - Wamp aperçu des évolutions avec et sans HTML/CSS

Mise en ligne du site web

Mi-août, la fourmi jaune a en effet bien avancé sur la structure du site web. Elle choisit donc d’acheter un nom de domaine et un hébergement chez O2Switch. Après quelques complications pour transférer le site web en local vers le serveur O2Switch, l’insecte peut enfin poursuivre ses modifications directement en ligne. Grâce à ses cours en HTML/CSS et des ressources web, la petite fourmi développe un parcours d’achat optimisé et simplifié au maximum.

Un site web dédié à la vente de produits

Le site web FRIGIMOOV est alors optimisé pour permettre à un visiteur de commander directement ses produits en ligne. Il peut donc découvrir des produits tendances et des offres promos. S’il le souhaite, il peut aussi effectuer des recherches en quelques clics et ainsi trouver ce qu’il veut. La petite fourmi choisit de rester fidèle au maquettage mais n’hésite pas à apporter des changements pour garantir une bonne expérience client. En outre, la créature jaune établie une bonne base pour sécuriser les données et optimiser les performances du site web. Un visiteur lambda peut donc se faire livrer ses courses surgelés à domicile en quelques minutes, depuis un PC ou un mobile.

Projet FRIGIMOOV - dossier - site web en ligne - aperçu des pages principales 2/2

Optimisation et mesure des performances

La fourmi jaune installe un certificat SSL pour davantage sécuriser le site web FRIGIMOOV en Https. Elle installe également d’autres plugins pour renforcer la sécurité et optimiser les performances du site web : mise en cache des images, suppression des révisions, compression de WordPress à la racine, vérification des liens, etc. Elle utilise en outre le plugin SEO Yoast pour améliorer le référencement des pages sur Google. Rapidement, elle effectue une demande d’indexation du site web puis mesure ses performances grâce aux outils Google.

Mise en place d’un calendrier éditorial pour FRIGIMOOV

Dans la continuité du projet, la fourmi jaune établit un calendrier éditorial pour gérer 4 réseaux sociaux : Instagram, Facebook, Linkedin et Youtube. Elle définit alors les objectifs du calendrier éditorial et propose un tableau à thèmes. Les publications varient en fonction du réseau social utilisé car il faut s’adapter à ses règles. Le but est donc de publier fréquemment et au bon moment pour espérer un retour sur investissement. L’entreprise doit en effet être réactive aux interactions des utilisateurs, faire preuve d’empathie et personnaliser au maximum ses messages. C’est ainsi une bonne manière pour promouvoir son activité, attirer des prospects et construire une communauté à long terme.

Vidéo promotionnelle FRIGIMOOV

En août, la fourmi jaune réalise une vidéo en motion design pour promouvoir le site web de l’entreprise. La vidéo présente globalement les services et l’identité de marque. Elle dure 1,35 minutes et est conçue pour de moyens et grands formats (site web, PC, Youtube, plateformes vidéo, etc.). La vidéo peut également être regardée sur des portables, l’expérience visuelle sera juste différente. Le but est tout d’abord d’informer, d’attirer et de séduire pour inciter l’internaute à visiter le site web FRIGIMOOV. En amont, la jeune fourmi dessine un storyboard afin de structurer le projet et gérer le rythme. Cela assure ainsi un gain de temps et d’énergie considérable avant de produire réellement sur logiciel (After Effects).

Axes d’amélioration

En fin de projet, la fourmi jaune peut donc considérer que le projet de site web FRIGIMOOV est une bonne base. Le client doit cependant s’engager à respecter les préconisations. Il doit aussi appliquer la stratégie de marque pour pouvoir développer son activité. La petite fourmi a intégré une bonne partie du site web et ainsi géré plus d’une vingtaine de pages responsives. Néanmoins, elle fait remarquer que certaines pages ne sont pas complètement terminées ou encore intégrées. Il est alors primordial d’intégrer ces pages et de les optimiser pour le référencement. De plus, le site web manque encore de quelques fonctionnalités, ce qui empêche donc de garantir une bonne accessibilité.

Conclusion

Pour conclure, FRIGIMOOV est un long projet qui a demandé à la fourmi jaune des compétences variées pour répondre aux attentes du client. Celle-ci a d’ailleurs eu l’opportunité de travailler sur toutes les étapes du projet et de tester ses propres limites. Elle cependant dû se confronter à des difficultés techniques et prendre davantage de recul pour trouver des solutions. Sa plus grande difficulté a été de ne pas s’éparpiller et d’optimiser son temps de travail pour respecter les délais. La construction et la mise en ligne du site web ont pris en effet du temps. Entre les diverses corrections et la segmentation du projet (cours, stage), la fourmi jaune a notamment dû faire preuve de patience, de rigueur et de ténacité pour garder le rythme. Heureusement, elle a pu compter sur le suivi et les conseils de quelques intervenants pour améliorer le rendu des livrables.

FRIGIMOOV, un projet synonyme de satisfaction

La fourmi jaune est très satisfaite de ce projet. Le rendu final se compose globalement d’un dossier conception de plus de 200 pages, de supports print, d’une vidéo promotionnelle ainsi que d’un dossier Pro. Le projet FRIGIMOOV permet ainsi à la créature de développer ses compétences en graphisme et en UI/UX design. Elle a par ailleurs eu l’occasion d’apprendre et de se perfectionner. FRIGIMOOV est donc en soit une porte ouverte pour présenter un projet complet et faire valoir ses compétences.

Remerciements : Christian BOURGEOIS, Pascal DESBLED, Anthony VIDAL, Anya CHAO, Julien ROMEU, Charlotte BEBIN, Marion TREMBLETT / Le soutien extérieur, l’équipe pédagogique de la CCI formation.

Vous avez aimé le projet FRIGIMOOV ?

La fourmi jaune vous suggère de consulter un autre cas assez similaire : Saveurs de saison. Cette entreprise fictive est spécialisée dans la vente de paniers de fruits et légumes au bureau à Lyon. Elle fait notamment appel à la fourmi créative pour développer une stratégie digitale, déterminer son branding et aussi élaborer la structure de son futur site web.

Partager son travail !