Refonte de site vitrine pour la marque Quali Eco

Quali Eco est une entreprise spécialisée dans l’enveloppe du bâtiment, proposant 3 services principaux : étanchéité, bardage, isolation.

En tant qu’agence web à Lyon, l’entreprise Quali Eco nous a sollicité pour la refonte de son site vitrine, avec du référencement dans les pages de résultats des moteurs de recherche.

Notre client

Quali Eco
69800 Saint-Priest

Nos expertises

Webdesign
Intégration WordPress
Stratégie SEO

Année
2021
Déroulé
étape 1

Objectifs de refonte du site vitrine

01

Représenter les métiers de l’entreprise
Quali Eco : Bardage – Étanchéité – Isolation

02

Mettre en avant les valeurs de l’entreprise qui sont la qualité, l’économie et écologie

Démarche

Notre démarche pour la réalisation d’une refonte d’un site vitrine

Pour la refonte d’un site internet, il y a différentes étapes à prendre en compte. Nous avons tout d’abord réalisé un benchmark qui nous a permis de regrouper tous les éléments afin d’en ressortir une idée globale d’ambiance. Ensuite, vient la partie la plus importante : le maquettage par notre webdesigneuse. Son rôle est de créer une arborescence stratégique, une bonne expérience utilisateur et un design en accord avec les valeurs à transmettre. Après avoir validé les maquettes avec le client, nous avons procédé à l’intégration des contenus sur WordPress tout en apportant notre expertise en SEO.

Recherche et benchmark

1. Récolte des informations existantes sur le site actuel de Quali Eco, sa charte graphique, ses supports de communication et ses réseaux sociaux afin de s’imprégner du sujet et d’en relever les points forts et points faibles.

2. Repérer et définir les cibles et personas afin de les comprendre et les analyser leurs intérêts afin de toucher au mieux les prospects susceptibles de devenir des clients.

3. Analyse de la concurrence et de leur univers graphique (sites internet, arborescence des pages, expérience utilisateur, ambiance, couleurs, image, ton utilisé). Cela permet de pouvoir se démarquer de la concurrence directe.

4. Analyse des tendances des sites vitrines, des univers graphiques mais aussi des fonctionnalités. L’objectif dans une refonte de site web est de l’améliorer en fonction des tendances et des intérêts des cibles.

Alimentation de la charte graphique

Suite à notre analyse et notre projet de refonte, nous avons décidé d’alimenter la charte graphique existante en réalisant des pictogrammes pour chaque service afin qu’ils soient bien identifiables et représentatifs sur la page d’accueil.

Construction de l’arborescence

1. Définir la liste des pages pour ainsi pouvoir les décortiquer et les organiser pour une expérience utilisateur positive.

2. Créer ensuite les sous-pages à définir, notamment pour les pages services pour que les informations soient fluides et épurées.

3. Définir le contenu de chaque page pour avoir une première idée globale.

Réalisation des wireframes

Le wireframe ou maquette fonctionnelle est un schéma que l’on utilise lors de la conception d’un site internet vitrine ou e-commerce afin de définir les zones et composants et avoir une vue globale de la version finale.

01

Brouillon papier

Notre webdesigneuse adore gribouiller pour laisser parler son imagination. Le fait de créer des wireframes rapides sur papier permet de crayonner, gommer, déchirer, sans technique de logiciel. Un vrai travail d’artiste qui n’est pas à négliger qui permet facilement de placer les composants, les images et les call to action.

02

Construction sur Adobe XD

Après avoir défini une version finale côté brouillon, nous passons ensuite à la création des wireframes sur notre logiciel Adobe XD afin de le mettre au propre. Cela permet d’avoir une vision globale de la structure de chaque page dans le but d’augmenter le taux de conversion du site web pour avoir la meilleure expérience utilisateur possible.

Réalisation des maquettes

Le wireframe ou maquette fonctionnelle est un schéma que l’on utilise lors de la conception d’un site internet vitrine ou e-commerce afin de définir les zones et composants et avoir une vue globale de la version finale.

01

Version desktop

Dans un premier temps, nous réalisons les maquettes en version desktop, le format ordinateur, en remplaçant les éléments des maquettes fonctionnelles par les textes, les images, les éléments graphiques de l’identité visuelle. L’objectif est de valider avec le client chaque étape, chaque page, chaque détail afin de définir une version finale avant d’intégrer le site web sur WordPress. Un gain de temps pour lui et pour nous.

02

Version mobile

Dans un second temps, une fois la version desktop validée, il est important de penser au responsive design, nous réalisons donc le maquettage de la version mobile pour étudier et organiser la structure, toujours dans l’objectif d’avoir une expérience utilisateur positive.

référencement naturel

Notre stratégie de référencement des contenus du site

La stratégie de référencement mise en place pour le site Quali Eco :

Site internet wordpress

Notre démarche pour l’ intégration des contenus

Une fois les maquettes et les contenus SEO créés et validés, nous intégrons toutes ses informations sur WordPress en prenant en compte le SEO, le chargement des pages, le temps de chargement, pour refondre votre site en fonction de l’expérience utilisateur et l’algorithme de Google.

Résultat

Résultat final

Un site vitrine épuré respectant les valeurs et l’expertise de l’entreprise Quali Eco.

Témoignage

Créer des T-shirts, c’est un plaisir, que je m’autorisais tard le soir après le travail. L’idée d’en faire profiter toute une communauté était un rêve. Tout seul, irréalisable. S’appuyer sur l’expertise de Küme dans l’accompagnement de société a tout bonnement permis à la création de mon entreprise. Les mecs sont performants, force de proposition et savent de quoi ils parlent. Mes horaires étant compliquées, nous avons travaillé ensemble les soirs, les samedis…
Merci à eux sans qui ce projet serait resté au stade de projet uniquement.

DYLAN

à retenir

Résumé de notre accompagnement

En résumé, nous avons proposé un accompagnement sur mesure à la création de la marque de vêtement Avenue des Champs. Nos différents points d’intervention sur cette mission étaient :

Ce projet a été géré par Anthony sur la partie création, Julien sur la partie web / photo, le tout orchestré par Baptiste qui est l’interlocuteur principal de Dylan.

Et vous ?

Vous avez une idée de création d’entreprise ? Lancez-vous !

Dylan est la preuve même que l’on peut lancer son entreprise tout en ayant une activité très consommatrice d’énergie. Ensemble nous commencerons par discuter ouvertement du projet et puis qui sait ? Dans 6 mois vous vendrez vos produits ou services tout en étant encore en activité ? Et si cette activité prend le dessus sur votre métier, vous pourrez franchir le cap et vous en occuper à 100% ?
« Il y a ceux qui en parlent et ceux qui le font. »

Nous vous aidons à réaliser vos projets les plus fous, parlez-en !

Et vous ?

Vous avez une idée de création d’entreprise ?
Lancez-vous !

Dylan est la preuve même que l’on peut lancer son entreprise tout en ayant une activité très consommatrice d’énergie. Ensemble nous commencerons par discuter ouvertement du projet et puis qui sait ? Dans 6 mois vous vendrez vos produits ou services tout en étant encore en activité ? Et si cette activité prend le dessus sur votre métier, vous pourrez franchir le cap et vous en occuper à 100% ?
« Il y a ceux qui en parlent et ceux qui le font. »