Refonte du site de Shokola, les coulisses et étapes clés d’une refonte

Au quotidien, nous travaillons pour vos projets web, votre présence digitale. Nous nous appliquons à créer des outils simples, beaux et performants pour vos marques. Aujourd’hui, il était temps d’offrir une nouvelle jeunesse (la septième) à notre site internet !

Depuis plusieurs mois, toute la Team Shoko s’active pour la création de son nouveau site. Web-designers, chefs de projets, développeurs, intégrateurs, web-marketeurs, toute l’équipe était mobilisée par ce beau projet. En voici les coulisses :

Etape 1 – Evolution de la stratégie de l’agence

La refonte de notre site web s’inscrit dans une étape importante du développement de l’agence. En amont, nous avons donc souhaité faire évoluer la stratégie de Shokola. Orchestré grâce à plusieurs conf call entre Jean-Yves et Arnaud, nous avons retravaillé le message diffusé par l’agence. Shokola vous présente aujourd’hui sa nouvelle baseline :

« Créateurs de solutions digitales depuis 1995. »

Eh oui, parce que chez Shokola, certes nous sommes naturellement doués dans la création de sites web sous toutes ses formes ! A notre actif, des sites institutionnels, des boutiques en ligne, la création de plusieurs intranets d’entreprise, quelques places de marché (marketplaces), le développement d’extensions spécifiques et la création de campagnes digitales en tout genre. Mais nous aimons aussi les travaux physiques, surtout sous forme de plaquettes papier, packagings produits, décoration de stands, programmes et livrets imprimés… et beaucoup d’autres choses dont nous parlons aussi dans nos autres articles d’actualités. Mais revenons à la refonte de notre site.

Etape 2 : Réflexion sur l’arborescence et les contenus

Vient ensuite le tour des chef(fe)s de projets et des web-marketeuses de l’agence d’entrer en action. Notre site web s’adressant en premier lieu à nos clients, nous avons réfléchi à une nouvelle manière d’amener le besoin de l’utilisateur au coeur de ce nouveau projet en répondant à cette question « Quels sont vos objectifs ? ».

L’arborescence

Grâce à la méthode dite du « tri des cartes« , nous avons réalisé un travail autour de l’optimisation l’arborescence, en mettant au coeur de la réflexion, la réponse à cette question.

Les contenus

En lien avec cette nouvelle arborescence, nous avons fait le choix de repartir de zéro pour les contenus du site. Nous avons alors réalisé un brainstorming qui nous a permis de lister exhaustivement tous les contenus à faire apparaitre sur le nouveau site et ainsi de planifier leur création et rédaction. Cette étape est très importante, car elle détermine par la suite la réalisation des maquettes graphiques réalisées par notre directeur artistique.

C’était également pour nous l’occasion de faire évoluer la ligne éditoriale de l’agence, avec une nouvelle ligne éditoriale et un nouveau planning de publication qui sont entrés en action courant mars dernier.

Dorénavant, vous retrouverez tous les projets réalisés pour nos clients sur la page réalisations et tous les articles concernant les sujets du digital et la vie de l’agence sur le blog. Cette répartition a pour objectif d’apporter plus distinctement l’information en lui associant une entrée dédiée.

Etape 3 : Une nouvelle charte graphique

Une fois la nouvelle arborescence réfléchie, les contenus rédactionnels écrits, c’est au tour de notre directeur artistique, Julien, d’entrer en jeu. Toujours à l’affût des dernières tendances lorsqu’il s’agit de web design, il a d’abord conçu une nouvelle charte graphique pour moderniser l’image de l’agence en mettant en avant des couleurs pétillantes en accord avec notre bleu Shokola.

Par la suite, et grâce à son oeil d’UX designer, il a réalisé les maquettes graphiques en repensant la navigation afin qu’elle soit particulièrement optimisée pour une utilisation sur mobile, c’est ce qu’on appelle le Responsive Design. Adapter un site web pour la navigation mobile est une étape non-négligeable puisqu’aujourd’hui, près de 50% de la navigation internet s’effectue via mobile en France.

Etape 4 : Développement technique

Pour la création de notre site internet, nous avons développé un thème WordPress sur-mesure qui nous permet de s’adapter parfaitement aux fonctionnalités que nous souhaitons mettre en place.

Configuration technique

Lors de la configuration technique du site, il est important d’installer des outils de sécurité pour protéger le site du piratage et du spam. Un plugin de sécurité ainsi que d’autres plugins permettant d’assurer les performances techniques du site (mise en cache, optimisation des images) ont donc été installés sur le site. A cette étape nous vérifions également la configuration des formulaires et des emails automatiques.

En mai 2018, lors de l’entrée en vigueur du RGPD, nos développeurs ont mis au point une procédure de mise en conformité que nous avons bien évidemment appliqué pour notre nouveau site, ainsi que ceux de nos clients.

Intégration du Responsive Design

C’est à l’étape de l’intégration qu’intervient le développement de l’interface en Responsive Design. Développer un site internet en responsive design est une technique de développement pour concevoir des sites web adaptatif à tout type d’écrans. Cela permet d’offrir une expérience utilisateur optimale sur tout support, notamment sur mobile et tablette.

Etape 5 : Amélioration du référencement naturel

La sémantique

Par la suite, nous avons également réalisé un travail d’optimisation du référencement naturel (SEO). Cela afin d’améliorer le positionnement de notre nouvel outil dans les résultats de recherche Google. Pour ce faire, nous avons retravaillé la sémantique du site et rédigé des balises titre et méta-descriptions de pages uniques. Nous avons également soigné le nom des images lors de l’importation de celles-ci dans la bibliothèque de médias, ainsi que l’écriture des urls.

Les optimisations techniques

Pour terminer, nos développeurs ont mis en place toutes les exigences techniques de Google sur le nouveau site. Par exemple, l’insertion d’une balise canonical (qui lutte contre la duplication des contenus), la hiérarchisation des balises Hn, ainsi que différentes optimisations techniques qui permettent d’améliorer les performances et la rapidité du site internet, comme nous le faisons sur chacun des sites web que nous construisons.

Et Jabbah aussi nous a bien aidé :

Enfin… presque