Refonte de site : les étapes à respecter en conception

October 4, 2021
Temps de lecture de l'article
7
Min
UX - UI - SEO
Accueil
>
Blog
>
Refonte de site : les étapes à respecter en conception

 

Dans un projet de refonte de site, il y a beaucoup de chantiers à mener avec comme clef de voûte la phase de conception. C’est une phase primordiale : plus elle est aboutie et plus vous sécurisez le projet. Son contenu, sa durée, son coût dépendent de beaucoup de facteurs. Pour faire simple, nous allons illustrer les étapes via 2 cas d’usage emblématiques  : Une refonte complexe et une refonte simple. Il n’est pas rare qu’un projet se situe entre les deux 😊.  

 

La refonte complexe

 

Commençons par le versant le plus abrupt qui correspond aux situations de refonte dites « complexes ». Ici, nous sommes sur des cas d’usage de PME, ETI, Grand groupe qui ont pour objectifs de revoir en profondeur leur site internet. Même si nous qualifions de « complexes » ces situations, nous sommes tout de même partis des situations simples dans cette catégorie des poids lourds.

 

J’espère que vous nous suivez 😉.

 

Donc exit les programmes d’ampleurs embarquant le projet de refonte comme simple chantier digitale d’une transformation plus globale de l’entreprise (transformation digitale, refonte d’un territoire de marque, lancement d’un nouveau produit majeur…). Exit aussi les problématiques d’interopérabilité avec les autres briques techniques de l’entreprise (ERP, CRM, PIM…).

 

Une fois vos objectifs définis et vos clients sondés, voici les 10 étapes par lesquelles vous devez passer pour mener à bien la phase de conception :

 

Étape 1 : Le cadrage projet :

Que vous réalisiez tout en interne ou passiez par un accompagnement externe, c’est une étape nécessaire qui permet de formaliser le besoin. Vous allez créer un actif immatériel que vous pourrez réutiliser et améliorer tout au long de la vie de l’entreprise.

Cette étape se matérialise au travers d’un livrable nommé expression de besoin ou cahier des charges qui définit l’ensemble des attendus du projet et son périmètre. Il peut être écrit par l’entreprise ou un tiers. Si vous n’avez jamais réalisé de tel document demandez-nous un exemple.  En tant qu'agence spécialisée dans la création de site internet ou refonte de site, on a quelques templates qui pourraient vous aider.

Dans le cas d'une refonte, il est fort à parier que vous puissiez partir de votre site actuel pour définir ce nouveau cadre. Dans certaines situations, repartir de zéro n'est pas une mauvaise idée. Cela vous permet de reprendre dans son ensemble vos objectifs et attentes clients. 


Nos outils préférés : Google doc et Google sheets

 et le chouchou de l’équipe...



Étape 2 : L’arborescence :

Adepte du rangement et de la rigueur, cette étape est faite pour vous 😊 ! Ici vous allez devoir : 

  • Définir l’organisation de l’ensemble des contenus et pages de votre site. Nous parlons bien évidemment de la page d’accueil, services, d’un éventuel blog… Il ne faut rien oublier, même les pages les moins évidentes (mentions légales, conditions générales d’utilisation par exemple…) afin d’assurer une construction du site adaptée à votre contexte.

  • Classer, organiser, définir une hiérarchie pour ces contenus afin de produire le système de navigation qui passera principalement via les différents menus (header, footer, latéraux…).

 

Ce travail se matérialise généralement par la production d’une arborescence qui peut ressembler à cela :  

 

 

Nos outils préférés : coggle, whimsical

et le chouchou de l’équipe...

Étape 3 : Définition des personas :

Pour construire vos parcours vous devez connaître vos clients. Une fois vos cibles définies, vous pouvez les représenter au travers de 3-4 profils significativement représentatifs de la population que vous souhaitez adresser.

Ces profils types sont appelés personas et définis à 80% par les mêmes critères :

- Aspects sociodémographiques (Age, Sexe, situation maritale, Lieu d’habitation)

- Métier

- Personnalité

- Canaux de communication préférée, aisance avec les outils digitaux, les réseaux sociaux

- Motivations vis-à-vis de votre secteur d’activité

-…  

Cette étape est un entrant majeur pour les travaux d’UX qui vont suivre.  

  

Nos outils préférés : Miro

et le chouchou de l’équipe...

 

 

Étape 4 : Référentiel des exigences fonctionnelles :

Nous avons évoqué lors de la première étape la réalisation d’un document de cadrage projet listant les attendus du projet.

Pour les projets complexes, il est nécessaire, par la suite, d’aller sur une maille plus fine en définissant au travers d’un référentiel des exigences fonctionnelles le détail des besoins. Le document a vocation à être exhaustif et doit traiter de toutes les thématiques que nous pouvons regrouper au travers de ces grandes familles :

- L’ensemble des Fonctionnalités attendues (Blog, Espace client, Vente en ligne…)

- Gestion de contenu

- Performances techniques

- Plan de taggage

- Ergonomie (Résolution, Responsivité, Compatibilité, Langues…)

- Maintenance

- Sécurité

Nos outils préférés : On s’est fait un document made in Luneos, il suffit de nous le demander.   

  

 

Étape 5 : Data analyse / SEO :

On a évoqué cette étape auparavant: Elle est essentielle ! Outre l’analyse de vos analytics, vous pouvez également auditer votre référencement naturel (SEO), si tant est que ce soit un objectif pour vous d’être compétitif sur ce levier d’acquisition.


On vous conseille dans ce cas de vous faire aider car ce que vous allez identifier sur votre historique vous permettra de mieux construire la suite.  

 

Si vous souhaitez aller plus loin et tout savoir sur le référencement google, on vous conseille ce contenu " 10 étapes pour bien référencer son contenu sur google".

Nos outils préférés :

Ici on s’adapte à nos clients en fonction de l’outil déjà installé. Entre Google Analytics, AT internet, Matomo qui a les faveurs de la CNIL on est tout terrain.

Pour l’audit SEO nous avons nos propres outils et méthodes.

Étape 6 : Sketching > Zoning > Wireframing :

Cette étape est centrale et consiste à dessiner simplement un premier niveau d’écran. Le sketching étant une approche très sommaire alors que le Wireframing représente la situation la plus proche de la maquette finale.

Il n’est pas nécessaire de passer par ces 3 étapes pour des projets digitaux simples. Pour des sites plus complexes 2 étapes suffisent. 

À l’issue de ce travail, vous allez pouvoir toucher du doigt le rendu du futur site. C’est le moment de bien valider l’ensemble des parcours, les priorités données à vos contenus… Le travail de définition des objectifs prendra tout son sens ici.

L’objectif de cette partie est de valider l’ensemble des parcours clients.

 

Nos outils préférés :

Les bons outils sont légion et les guerres de clocher entre MAC et PC laissent parfois d’excellents outils en déshérence.

Outre le crayon et le papier, l’équipe digitale a ses chouchous :

 

 

Étape 7 : Création de contenu :

Cette partie est souvent sous-estimée et insuffisamment travaillée. Un bon contenu fera la différence auprès de votre public car il ancrera incontestablement votre identité. Il sera également très largement apprécié des moteurs de recherche et donc un levier supplémentaire pour améliorer votre référencement.

Les expertises se sont diversifiées depuis ces 5 dernières années avec plusieurs métiers pouvant intervenir sur cette étape. Le rédacteur web aura tendance à écrire les contenus longs comme ceux présents dans vos articles de blog alors que le copywritter sera présent sur les pages d’atterrissage (landing page) avec une orientation à la performance. Vous avez également les experts SEO qui peuvent amener leur pierre à l’édifice.

Ce travail est un chantier au long cours qui ne s’arrêtera pas une fois le site en ligne.


Nos outils préférés :

 


Étape 8 :  Définition du plan de taggage :

Cette étape s’opère en général une fois l’ensemble des parcours du site validé. Vous pouvez initier les premières réflexions autour de la définition de vos objectifs dès le début du projet mais pour finaliser l’ensemble du plan tous les parcours doivent être définis.

Avec l’arborescence et les wireframes, vous avez suffisamment d’éléments pour définir le plan de taggage et offrir à votre site un monitoring sur-mesure de la performance du site.

Ces données seront hyper structurantes pour piloter vos campagnes d'acquisition payantes. Pour en savoir plus sur le sujet vous pouvez prendre connaissance de cet article "7 erreur à éviter dans vos campagnes google ads"

 

Nos outils préférés :

On aime travailler avec les outils de mapping et google sheet pour la définition plan. 

Ensuite pour la partie technique, Google est incroyablement bien armé avec sa suite ultra-complète:

Google Tag Manager, Google Analytics, Google Search

On ne reste pas indifférent devant

 

Étape 9 : UI design :

C’est l’ultime étape de conception qui permet de transformer les pré-maquettes (sketch, zoning, wireframe…) en maquettes définitives arborant fièrement votre charte graphique.

Ici le diable est dans le détail, couleurs, typo, taille des typos, style des éléments de navigation en survol ou non, en version mobile ou PC…

ui design

Il y a des bonnes pratiques poussées par les mastodontes du secteur, dont Google, qui permettent de standardiser les UI. Cela garantit un certain niveau de performance mais dessert votre identité. L’UI designer saura trouver le bon équilibre.  

L’ensemble des étapes précédentes sécurise cette production souvent exposée aux vents de la subjectivité.

Pour nos outils préférés, retour à l'étape 6

 

Étape 10 : Passer la main 😊

 

Maintenant il ne vous reste plus qu’à passer tous ces livrables à l’équipe de réalisation (PO, MOA, MOE, Dev front, Dev Back…) puis participer aux phases de test et de mise en ligne. 

Conclusion

La mise en place d'un nouveau site n'est pas une finalité mais le commencement d’un cycle d'amélioration continue qui vous permettra de capter des données pour développer votre connaissance client, améliorer vos parcours, votre performance et optimiser votre éco-système digital.

Vous pouvez tout réaliser vous-même ou vous faire aider par des tiers, comme une agence web spécialisée en refonte de site, afin d’aller plus vite. Si vous avez un contexte business particulier vous pouvez également nous contacter.

Si vous en voulez plus vous pouvez également télécharger notre Guide : Comment réussir sa refonte de site 👇.

Comment réussir sa refonte de site ?

Dans ce guide complet et gratuit vous trouverez une méthode, des conseils et des outils pour aborder ce projet sereinement et ainsi maximiser votre réussite !

> Télécharger le guide
Rédigé par
Auteur de l'article
Gwenaël Guilloux
August 24, 2021
COMMENTAIRES

Partager l'article

NEWSLETTER

vous souhaitez recevoir chaque semaine les dernières tendances en strategie digitale,  growth, ux...
S
> S'inscrire

LES Derniers ARTICLES

Vous avez un projet ?

> contactez-nous