Olympio Avocat - Site vitrine

Je vais vous présenter un projet personnel que j’ai réalisé sur 10 mois pour le cabinet d’une avocate, spécialisé en droit pénal, droit de la famille/mineurs, et droit des affaires/travail. Le cabinet, en phase d’expansion, avait besoin d’un site vitrine moderne pour élargir sa clientèle et renforcer sa présence en ligne.

Besoin client :

Le cabinet OLYMPIO Avocat souhaitait moderniser sa présence en ligne pour répondre à deux enjeux majeurs : atteindre plus de monde et renforcer sa crédibilité dans un marché juridique concurrentiel. Possédant déjà une page Instagram, ce dernier ne suffisait plus pour l’organisation du cabinet. L’avocate avait besoin d’un site clair et accessible, capable de :

1. Centraliser les informations essentielles comme les coordonnées, la localisation du cabinet et une brève introduction des domaines d’expertise. L’intérêt est de faciliter la prise de contact, notamment dans des situations urgentes (ex : litiges familiaux ou défense pénale).
2. Cibler des publics spécifiques : les particuliers comme les parents en conflit de garde ou les mineurs nécessitant une protection, ainsi que les professionnels comme les entreprises confrontées à des problématiques de droit du travail ou d’affaires.
3. Projeter une image professionnelle et rassurante, reflétant l’identité sérieuse et humaine du cabinet. Le site devait inspirer confiance grâce à un design épuré, une navigation simple et intuitive et un contenu juridique vulgarisé.

Avoir un site internet c’est être trouvable plus facilement sur les moteurs de recherche comme Google. En effet, tout le monde n’a pas forcément l’habitude d’aller sur les réseaux sociaux pour chercher un avocat pouvant défendre leurs intérêts.

L’objectif principal était un site responsive, accessible sur toutes les plateformes. Le site devait être l’outil stratégique pour convertir les visiteurs en clients, tout en simplifiant leur accès à l’information juridique.

Bien que cette réalisation fût effectuée dans un cadre personnel, celle-ci comportait des enjeux et des risques.

Enjeux

Dans cette réalisation, l’enjeu principal était la satisfaction de la cliente et la capacité à traduire fidèlement sa vision en un site vitrine professionnel et cohérent avec l’image de son cabinet.

Madame OLYMPIO avait une idée précise de l’identité qu’elle souhaitait transmettre : sérieux, humanité et crédibilité. Il était donc essentiel que le rendu final respecte ces attentes, tant sur le plan visuel que fonctionnel. Un écart entre sa vision initiale et le résultat aurait pu impacter la perception de son cabinet auprès de ses futurs clients.

Un second enjeu résidait dans le fait que ce projet était mené en autonomie complète. En étant seul responsable de l’analyse, de la conception et du développement, je portais l’entière responsabilité du livrable. Il n’y avait ni équipe technique pour valider mes choix, ni cadre scolaire pour orienter les décisions. La réussite du projet reposait donc sur ma capacité à structurer le travail, à anticiper les difficultés et à maintenir un dialogue clair avec la cliente tout au long du processus.

Les principaux risques rencontrés étaient de proposer un site ne correspondant pas à la vision de ma cliente, que l’on ne s’y retrouve pas facilement en parcourant le site, que la prise de contact soit difficile et que le référencement ne soit pas optimisé. Grâce à l’analyse SWOT adaptée aux risques projet, j’ai pu identifier les risques.

Ce projet s’est construit autour d’une collaboration étroite entre l’avocate et moi-même. En tant qu’interlocutrice unique du cabinet OLYMPIO Avocat, elle a joué un rôle central en fournissant l’ensemble du contenu juridique ainsi que les images et vidéos dont j’avais besoin, en validant chaque étape créative à travers des retours précis et surtout en me partageant sa vision idéale de l’apparence de son site, celle qui plairait à ses futurs visiteurs tout en représentant son image.

Quant à moi, j’ai endossé trois rôles dans ce contexte :

1. - Chef de projet : Animation des échanges hebdomadaires (réunions et suivis par mail) pour recaler nos priorités.
2. - Designer : Traduction de ses attentes en maquettes concrètes puis on faisait le point lors de nos réunions pour savoir s’il fallait affiner l’identité visuelle ou pas.
3. - Interface technique : J’ai dû reformuler ses besoins métier en solutions adaptées, tout en vulgarisant le plus possible les contraintes techniques pour sa compréhension.

De ce fait, nos interactions, très orientées vers l’écoute, ont permis de maintenir l’équilibre entre ses impératifs professionnels, les attentes des utilisateurs et les réalités du développement.

Analyse des besoins et cadrage du projet (Cahier des charges)

Le projet a débuté par une phase de cadrage au cours de laquelle j’ai échangé avec Madame OLYMPIO afin de comprendre précisément ses attentes, son activité et les objectifs du site vitrine. J’ai analysé la cible du cabinet, le ton à adopter, les informations prioritaires à mettre en avant ainsi que les contraintes liées à son domaine professionnel, le domaine juridique, notamment en termes d’image et de crédibilité.

À l’issue de cette phase, j’ai formalisé les fonctionnalités essentielles du site (présentation du cabinet, expertises, contact, localisation) et défini les priorités afin de répondre efficacement aux besoins du client tout en respectant les délais et le budget convenus.

Conception fonctionnelle et visuelle

Sur la base de cette analyse, j’ai conçu les premières maquettes du projet à l’aide du site Whimsical. Ces maquettes m’ont permis de traduire les attentes de la cliente afin qu'elle puisse se les représenter comme le ferait un croquis, proposant ainsi une identité visuelle cohérente avec l’image professionnelle et humaine du cabinet.

Chaque proposition a fait l’objet d’échanges et d’ajustements lors de réunions régulières avec la cliente. Cette phase m’a permis d’intégrer ses retours, d’affiner l’ergonomie et de valider progressivement l’architecture du site avant le passage au développement.

Développement et intégration

Dans la continuité, j'ai réalisé le développement du site en autonomie complète, en m’appuyant sur une architecture basée sur des composants réutilisables (grâce à React et sa philosophie). J’ai implémenté les différentes pages du site ainsi que les fonctionnalités clés, notamment le formulaire de contact et la présentation dynamique des expertises.

Tout au long du développement, j’ai veillé à maintenir un code lisible et structuré afin de faciliter les évolutions futures. J’ai également procédé à des tests réguliers pour vérifier le bon fonctionnement des fonctionnalités et la compatibilité du site sur différents supports (ordinateur, tablette, mobile).

Suivi, ajustement et validation client

Le projet a été mené selon une approche itérative, inspirée des méthodes agiles observées lors de mon stage en entreprise (EasyVista) mais aussi des itérations effectuées lors de mes projets à l'ESIEA. Des points réguliers avec la cliente m’ont permis de présenter les avancées, de recueillir ses retours et d’ajuster certaines fonctionnalités ou éléments visuels.

Livraison

Une fois le site finalisé et validé, j’ai procédé à sa mise en ligne. J’ai présenté le site fonctionnel à la cliente lors d’une démonstration, en testant les principales fonctionnalités en conditions réelles. Cette étape a permis de confirmer la conformité du livrable avec les attentes exprimées en début de projet.

Pour mettre en œuvre ce projet, j’ai opté pour le langage JavaScript from scratch (c’est-à-dire à partir de zéro), et plus précisément sa bibliothèque React, associée à TypeScript, afin de développer une interface moderne, maintenable et adaptée aux besoins du cabinet.

Choix des technologies

React & Typescript : Un duo performant

J’ai choisi d’utiliser React avec TypeScript pour développer l’interface du site. React m’a permis de structurer l’application autour de composants réutilisables, facilitant l’évolution du site et les ajustements demandés par la cliente tout au long du projet. L’utilisation de TypeScript (surcouche à Javascript) a renforcé la robustesse de l’application en limitant les erreurs et en rendant le code plus lisible et maintenable, un point essentiel dans un projet réalisé en autonomie complète.

Zustand : Gestion d’état

Pour la gestion de certains comportements transverses entre composants, comme la navigation fluide vers le formulaire de contact depuis différentes pages, j’ai opté pour Zustand, une solution légère de gestion d’état. Ce choix m’a permis d’éviter une architecture trop complexe tout en conservant une bonne lisibilité du code.

Enfin, le site a été déployé via Hostinger, une solution adaptée à un projet de site vitrine, offrant un bon compromis entre performance, simplicité de déploiement et coûts maîtrisés pour la cliente.

Hébergement et déploiement

Hostinger : Solution choisie pour son rapport qualité-prix et sa simplicité.

1. Déploiement automatisé via Git.
2. Performance : Temps de chargement optimisés grâce au cache et CDN intégrés.

Fonctionnalités clés

Le site vitrine intègre plusieurs fonctionnalités essentielles conçues pour répondre aux besoins du cabinet et améliorer l’expérience des visiteurs.

Un formulaire de contact a été développé afin de permettre aux utilisateurs de joindre rapidement l’avocate. Les données saisies sont vérifiées côté interface afin d’assurer leur cohérence avant envoi. Les messages sont ensuite transmis directement par email grâce au service EmailJS (permet d’envoyer des mails à l’aide d’application côté client), évitant ainsi la mise en place d’un back-end dédié tout en garantissant une solution fiable et adaptée à un site vitrine. Un retour visuel informe l’utilisateur du bon déroulement de l’envoi ou d’une éventuelle erreur, ce qui renforce la confiance dans le processus de prise de contact.

Le site propose également une galerie des expertises permettant de présenter clairement les différents domaines d’intervention du cabinet. Cette fonctionnalité repose sur une structure dynamique facilitant l’ajout ou la modification des contenus. Un système de filtrage par spécialité juridique (droit pénal, droit de la famille, droit du travail, etc.) a été mis en place afin d’aider les visiteurs à identifier rapidement les informations qui les concernent.

Enfin, une attention particulière a été portée à la fluidité de la navigation. Un mécanisme de redirection avec défilement fluide, basé sur la fonction scrollToView(), permet à l’utilisateur d’accéder au formulaire de contact depuis n’importe quelle page du site.

Outils complémentaires

1. Whimsical : Création des maquettes interactives pour validation client avant développement.
2. Git/GitHub : Versionning et gestion des branches.

L’objectif de cette réalisation était d’apporter un site vitrine fonctionnel, conforme aux attentes de Madame OLYMPIO. Le site a été officiellement mis en ligne et utilisé par le cabinet pendant plusieurs mois, permettant une meilleure visibilité et une augmentation des demandes de contact.

Par la suite, le cabinet a fait le choix d’opter pour une autre solution, mettant fin à l’utilisation de la plateforme que j’avais développée. Bien que cette décision ne remette pas en cause la qualité technique du projet, elle souligne l’importance, dans le cadre de réalisations digitales, d’anticiper les évolutions futures et les changements de besoins des clients.

Au-delà du livrable technique, ce projet était l’opportunité idéale de consolider mes compétences en développement front-end et gestion de projet. Fraîchement sorti d’un stage de 6 mois en entreprise, où j’ai pu utiliser la librairie React avec Typescript dans un contexte professionnel, j'ai vu dans cette mission l'occasion de mettre en pratique de manière autonome les méthodologies acquises, tant en entreprise qu'au cours de ma formation à l'ESIEA.

Ce défi m’a permis :

1. D’expérimenter concrètement la gestion complète d’un projet, de l’analyse des besoins à la livraison.
2. D’appliquer les bonnes pratiques de développement dans un cadre exigeant.
3. De faire preuve d’autonomie tout en maintenant une communication efficace avec le client.

Perspectives d’amélioration

Si l’occasion se présentait à nouveau, j’intégrerais :

1. Une documentation technique plus exhaustive.
2. Un back-office simplifié permettant à la cliente de modifier elle-même certains contenus.
3. Une analyse des besoins à plus long terme pour anticiper les évolutions métier.

Ce que je retiens

Malgré son arrêt prématuré, cette réalisation reste pour moi une réussite sur le plan technique et relationnel. Ce projet a été un exercice de responsabilisation, j’ai pu gérer les attentes, savoir traduire des besoins subjectifs en solutions techniques. J’ai pu anticiper les risques en choisissant par exemple Typescript, ce qui a réduit les bugs potentiels.

J’ai pu valider mes compétences en développement front-end autonome avec une expérience concrète en gestion de projet client, de la conception à la livraison.

Ce projet m’a également permis de prendre conscience de l’importance d’accompagner les clients dans la durée, au-delà de la simple réalisation. Travailler pour une professionnelle du droit m’a appris l’importance de la précision.

Je considère qu’un projet réussi ne se mesure pas uniquement à sa durée de vie, mais aussi aux compétences acquises et aux problèmes résolus en chemin.