Refaire une beauté à son site : les étapes clés

Refaire une beauté à son site : les étapes clés

Notre site internet a fait peau neuve ! Après de longs brainstorming et tests, nous avons enfin appuyé sur le fameux bouton “publier”.
Plus qu’un simple coup de peinture, la refonte d’un site internet répond à des objectifs stratégiques prédéfinis. De la phase de cadrage jusqu’aux derniers tests, toute l’équipe Bienfait vous offre une visite guidée des coulisses.

Colombe
Koudjo
6 minutes

La phase de cadrage 📄

La refonte d’un site internet consiste à le retravailler en profondeur en modifiant l’arborescence, le design ainsi que le contenu. Ce choix peut intervenir lors d’un changement de stratégie marketing, d’identité visuelle ou pour répondre aux nouveaux objectifs de croissance d’une entreprise.

Comme dans tout projet, cette phase préparatoire est primordiale. Elle donne le ton en définissant clairement les objectifs à atteindre et le livrable à produire. Selon nous, trois mouvements clés garantissent la réussite de cette première étape.

    1. Tout commence par l’audit de votre site internet existant et la définition des nouveaux objectifs à atteindre.
    2. Le deuxième mouvement consiste ensuite à identifier les ressources à disposition pour atteindre les objectifs fixés. Il s’agit ici des ressources humaines, technologiques et financières. Combien de membres de votre équipe seront déployés sur ce projet ? Avez-vous prédéfini un budget ? Quels outils allez-vous utiliser?
    3. Enfin, le dernier point de la phase de cadrage est la structuration du projet en étapes précises avec un planning détaillé.

    En interne ou avec des clients, cette étape préparatoire est le premier pilier de la méthodologie Bienfait. Elle nous permet d’aller au cœur du projet et de cerner qu’elle est la valeur à apporter. Et c’est de cette réflexion que découlent le choix des outils et une bonne organisation du projet.

    C’est bien beau de réfléchir mais maintenant place à l’action!

    Conception du site internet 🎨

    La phase de design sert à prototyper le rendu final du site internet ou de quelconque projet que vous développez. L’objectif est de pouvoir prévisualiser ce à quoi ressemblera le livrable. Elle permet aussi d’identifier plus clairement les fonctionnalités à développer tout en établissant une hiérarchisation entre elles.

    Pour la mener à bien, nous avons travaillé avec Figma. Pourquoi Figma ? Parce que c’est un des outils de prototypage les plus complets sur le marché actuellement. Il est très fluide, offre la possibilité de prototyper et d’itérer tous les écrans du projet. Son aspect collaboratif est non négligeable car il facilite les différents tests tout en donnant le libre champ à l’exploration créative. La réflexion sur le design va au-delà de l’esthétique. Elle répond à des enjeux d’expérience utilisateur mais aussi à des enjeux climatiques.

    • La phase de conception est le moment idéal pour engager la conversation sur le responsive. Un site responsive est un site web conçu et développé de façon à pouvoir s’adapter à toutes les résolutions d’écran (mobile, tablettes et ordinateur). En 2021 le taux de consultation sur mobile était de 55,56%. Plus qu’un     accessoire, le mobile friendly est une nécessité.
    • La réussite de votre site internet se mesurera par la qualité de l’expérience utilisateur qu’il offre. Cependant, le responsive est encore négligé dans la conception d’un site. Attention red flag ! Parce que Google en fait un des critères principaux pour référencer votre site.
    • L’enjeu du webdesign est de trouver un juste milieu entre une esthétique élaborée et une navigation fluide. Priorisez le contenu afin d’éviter tout superflu qui dégraderait l’expérience utilisateur.

    Outre l’esthétique et le référencement, le webdesign est un point clé dans la création d’un site eco-friendly. Plus votre site sera chargé, plus il nécessitera de la puissance de calcul aux serveurs pour en afficher le contenu.
    Dans l’univers du no-code cette problématique est cruciale. L’enjeu est de rendre l’information accessible le plus facilement et le plus rapidement possible pour économiser de l’énergie. Concrètement ça passe par le poids des vidéos ou des images par exemple.
    Aujourd’hui plus que jamais, le développement des sites internet doit répondre à des enjeux d’accessibilité, de fluidité et de conscience écologique.

    La phase de conception permet de visualiser le plus clairement possible le résultat attendu et de mieux cerner la valeur qu’il apportera.

    Développement du site internet 💻

    La construction du site internet est la suite logique de toutes ces étapes de réflexion et de prototypage. Sa réussite passe en partie par le choix du bon outil. Le site sur lequel vous lisez cet article a été conçu avec Webflow.

    Webflow est un constructeur de sites web no-code. Il est utilisé par plus de 3.5 millions de designers et équipes pour créer, collaborer et mettre à l'échelle des sites Web le tout sans coder. C’est un outil que nous utilisons aussi bien pour des projets internes que pour des projets clients (site internet, landing page ou site e-commerce).
    Oui, vous l’aurez compris, on aime Webflow ! Mais il en faut plus pour y concevoir un site avec succès.

    • Tout d’abord, pour tirer le meilleur parti de l’outil il est important d’avoir quelques bases CSS. Si ce n’est pas le cas, vous pouvez également monter en compétence au fur et à mesure avec les nombreuses ressources gratuites proposées par la plateforme.
    • Ensuite, la réussite de votre projet dépendra de votre méthode de travail. Prenez le temps de travailler brique par brique. Pensez également à documenter tous vos process (ce conseil est valable pour tout projet et tout outil no-code)
    • Pour la construction de notre nouveau site, nous avons entamé la phase de développement sur Webflow en créant un “style guide”.
      Il récapitule tous les éléments graphiques incontournables pour la construction du site (typographie, graisse et palettes de couleur). L’objectif est d’éviter les aller-retours entre plusieurs applications et de faciliter votre développement.
    • Webflow propose des modèles payants qui vous permettront d’avancer à 80% votre projet. Sachez cependant que ce sont les 20% restants qui peuvent être les plus challengeant à développer.

    Maintenant que vous avez (quasiment) fini de développer, il est temps de se jeter à l’eau.

    La phase de test - ou boucle d’itération pour les intimes - est un processus au cours duquel les différentes fonctions du site sont mises à l’épreuve. On s’assure qu’elles répondent bien aux objectifs fixés et on les optimise si besoin. Cette étape peut être relativement longue selon l’ampleur du projet.

    Chez Bienfait par exemple, il y a eu de nombreuses réunions, notifications Notion et conversations sur Slack pour que chaque membre de l’équipe puisse faire ses retours. Vous pouvez déployer les tests graduellement. Premièrement en interne, ensuite avec un échantillon d’utilisateurs cibles et enfin en public.
    Retenez tout simplement que votre site ne doit pas être absolument parfait avant publication. C’est justement sa publication qui mettra en exergue certaines corrections à apporter au fur et à mesure.

    En bref,

    En somme, la refonte de notre site internet nous a pris plusieurs semaines, beaucoup de réunions et plusieurs tasses de café. Elle s’ancre dans l’évolution de notre entreprise et de notre positionnement marketing.

    La durée et les différentes étapes d’un tel projet varient selon son ampleur et sa complexité. La seule constante est l’importance de travailler avec méthode pour garantir le résultat le plus satisfaisant possible.

    Vous pouvez maintenant appuyer sur le fameux bouton “Publier”!

    Outils & articles en lien
    Figma
    Notion
    Airtable
    Webflow
    Évaluez la performance de votre projet no-code avec ces 3 critères clés

    On entend beaucoup parler de no code et son impact sur les process en entreprises mais comment savoir si votre projet no code tient ses promesses ?

    Réduire le Code = Réduire le Carbone ? Quels sont les impacts No-Code ?

    On connaît le poids du numérique sur l'empreinte carbone mondiale. Mais qu'en est-il du no-code ? Concrètement, quels sont les avantages du no-code dans notre quête du bas carbone ? Tentative de réponse.

    Choisir et structurer sa stack d'outils : les clés pour réussir !

    La panoplie d'outils no-code peut rapidement nous perdre et nous décourager. Chez Bienfait, on en a bien conscience, c'est pourquoi on s'est dit que vous expliquer comme cadrer sa stack pouvait être une bonne idée.

    Envie d'en savoir plus ?
    Prenons 15 minutes ensemble pour
    discuter de votre projet. 🤝
    On s'appelle !