Refonte de site web : 10 questions à se poser

Work’n Coffee— 27/02/2015

En introduction

Introduction

« … s’adapter pour survivre »

Extrait du livre : Repenser la relation client : s’adapter pour survivre, Erik Campanini (BearingPoint) et Kyle Hutchins (West Monroe Partners)

, Les auteurs proposent aux organisations des idées pour survivre, et même prospérer, à l’ère digitale et centrée sur le consommateur.

Ils montrent notamment que ce ne sont pas les plus forts, mais bien les plus agiles qui survivront.

Internet, ça bouge tout le temps !

POURQUOI FAIRE UNE REFONTE ?

POURQUOI REFONDRE SON SITE WEB ?

Stratégie de l’entreprise ≠ site web

Le site ne performe pas ou plus

Design obsolète

Technologie dépassée, devenue instable, risque de sécurité

Évolution contextuelle, dans les usages (ex. le mobile), législative (loi de protection

du consommateur…)

L’entreprise gagne en maturité et souhaite mieux exploiter le potentiel du digital

8

Refonte ou Mise à jour ?

VS Mise à jour technique légère (migration, nouvelle fonctionnalité ect.)

Modifications graphique ou de texte légers

Version mobile dédiée

Délai court

Petit budget

Délai 3-4 mois minimum

refonte mise à jour

Changement de structure du site important (ergonomie, arborescence)

Version Responsive Design

Temps nécessaire

Mise à jour technique importante (changement CMS, etc.)

Engagement budgétaire important

COMMENT RÉUSSIR SA REFONTE ?

POUR BIEN DÉMARRER, SE POSER LES QUESTIONS FONDAMENTALES

11

POUR FAIRE QUOI ? Quels sont mes nouveaux objectifs stratégiques ? • Développer la notoriété ? • Augmenter le chiffre d’affaire ? • Travailler votre image de marque ?

COMMENT ? Quels sont mes nouveaux objectifs opérationnels ? • Plus de trafic ? (visibilité, référencement naturel et payant)

• Plus de contacts ? (développement de la transformation)

• Plus de ventes ? (optimisation du tunnel d’achat, politique prix, présence comparateurs prix)

• Plus d’interactions ? (présence et animation réseaux sociaux)

• Plus de fidélité ? (newsletter, parrainage, points fidélité)

AVEC QUOI ? Quels sont les moyens dont je dispose ? • Budget ? • Délais ? • Environnement existant ? (contraintes graphiques, techniques, hébergements,)

• Stratégie de communication existante ? (plateforme de marque etc.)

• Contenus à reprendre, à créer, par qui ?

AVEC QUI ? Quels vont être les acteurs de cette refonte ? • Equipe projet Interne ? • Prestataires externes ? • Process de validation ?

Questions fondamentales : quoi, comment, avec quoi, avec

qui

Conception, définition de l’expérience

utilisateur : UX Design

Design Développement Intégration

des contenus

Recettage

LES ÉTAPES D’UNE REFONTE

12

Cela vous permettra de définir précisément votre demande, mesurer et anticiper le travail à prévoir

Questions fondamentales : quoi, comment, pourquoi,

avec qui

Conception, définition de l’expérience

utilisateur : UX Design

(1 à 3 mois)

Design (2 à 8

semaines)

Développement (1 à 5 mois)

Intégration des

contenus (x jours)

Recettage (x jours)

RÔLES ET CHARGE DE TRAVAIL

Pré-projet, gestation, cahier des charges

Évaluation, itérations,

validations des maquettes

Intégration des contenus (si non

externalisée)

côté agence partenaire

côté client-annonceur

Préparation des contenus, ateliers

utilisateurs, itérations sur la conception

Interactions faibles sauf pour les équipes

IT

Préparation des contenus, rédaction, shooting, tournage vidéo, motion…

Recherches, études, challenger le brief

Maquettes Intégration des contenus (si non

externalisée)

Tests et validation pour mise en ligne

Pilotage et réalisation de la conception

Interactions faibles sauf pour les équipes

IT

Livrable : Mise en ligne

Livrable : site web sur adresse

temporaire

Tests et validation pour mise en ligne

Livrable : Maquettes des gabarits

Livrable : Wireframe et spécifications

Livrable : cahier des charges, brief

Préparation de la promotion, redirections d’URLs…

LA CONCEPTION ET L’UX DESIGN

14

Analyse de l’existant : • Les visiteurs actuels : provenance, nombre, rythme des visites, nouveaux visiteurs,

pays de consultation, support de consultation • Comportement des visiteurs : pages vues, taux de rebond, chemins de navigation • Analyse des données : ce qu’il faut conserver, faire évoluer… pour atteindre mes

nouveaux objectifs • Concurrents

Définition des besoins utilisateurs en fonction de vos

objectifs

Définition de l’arborescence en fonction de ces besoins

Définition de la structure des gabarits principaux en version desktop, mobile, tablette

UX DESIGN comment

concevoir une expérience utilisateur optimale

Une discipline qui s’impose : User eXperience Design

DESIGN

Une approche créative en perpétuelle évolution

16

La révolution Mobile • Disparition de la technologie flash • Retour à la simplicité pour faciliter la navigation sur mobile • Nécessité de penser le design pour plusieurs interfaces pour la compatibilité mobile :

Responsive Web Design

Attention au j’aime/ j’aime pas • Le design doit servir à sublimer l’expérience utilisateur et non pas la complexifier • Le « waouh effect » ne servira à rien si au final la refonte ne permet pas

d’atteindre les objectifs fixés

Nécessité d’un créatif véritablement « digital » • Contraintes radicalement différentes du « print » • Nombreuses contraintes à prendre en compte (ergonomie, normes, résolution

d’écran, police etc.) • Nécessité d’un travail en binôme avec l’UX Designer

DESIGN

DÉVELOPPEMENT

Objectif : optimiser votre budget présent et avenir

17

Préférez si possible un CMS OPEN SOURCE • Open Source = code accessible, communautés importantes de développeurs… • CMS = Content Management Système = outil de gestion du site • Éviter d’être captif d’un développement propriétaire • Limiter les coûts en capitalisant sur de l’existant • Orienter le choix vers un CMS connu afin de pouvoir trouver des prestataires en

nombre et de qualité (Drupal, Wordpress…)

Identifiez l’environnement technique • Hébergement, ERP, CRM, BDD existantes, Webservices voir votre IT • Peut impacter la faisabilité d’une refonte et le temps de développement

Le développement frontoffice (ce que l’internaute voit) évolue • Inflation des temps de développement du fait du Responsive

et de l’évolution du design d’interaction

DÉVELOPPEMENT

LES CONTENUS

Un élément trop souvent sous-estimé

18

Rappel : définir en étape 1 qui fait quoi • Qui agrège les sources texte, image, vidéo ? • Qui rédige les contenus ? • Qui retouche les visuels ? • Qui opère la réécriture pour le référencement ? • Qui intègre les contenus dans le site ?

Dans le cas où vous intégrez le contenu • Anticiper la formation pour apprendre à intégrer les contenus • Prévoir beaucoup de temps car c’est une tâche chronophage

Dans le cas où le prestataire intègre le contenu • Anticiper l’envoi des contenus • Transmettre les contenus validés et définitifs • Grouper les envois • Planifier aussi les phases de traductions et relecture

CONTENUS

RECETTAGE : CONTRÔLER, TESTER, DEBUGGER

La dernière ligne droite…

19

C’est quoi ? • Étape de finalisation du site où vous serez encore bien sollicité • S’effectue sur un site non visible • Nombreux tests effectués par les 2 parties • Relecture, correction de bugs • Redirection des URLs • Validation pour passage en ligne

A noter que : • Il est possible de faire des modifications de texte rapidement. • Une fois la date de mise en ligne prévue, il faut s’y tenir au maximum. • En revanche, il ne faut pas attendre la dernière minute pour faire ces contrôles • Il est possible de lancer un site même incomplet et d’évoluer • D’autres éléments dépendent directement de cette étape (SEO, Adwords, Community

Management etc.).

RECETTAGE

LE SITE EST EN LIGNE…

… mais ce n’est pas fini !

20

PROMOTION SUIVI /

MAINTENANCE

Évolutions du site

(nouvelles fonctionnalités,

nouvelles rubriques)

Animation du site

(mise à jour des contenus, Newsletters,

Evènements…)

Référencement payant,

Community Management,

display, affiliation

Référencement naturel, SEO

Pour lancer le site

Pour faire vivre le site

Publicité et promotion

CERCLE VERTUEUX : AMÉLIORATION CONTINUE

21

0 1 2 3

Volume des investissements

Années

Refonte Refonte Animation et maintenance du site

Une refonte ne veut pas dire plus d’investissement sur le site pendant 3 ans

Soyez prêt !

CAHIER DES CHARGES

24

Brief / Cahier

des charges précis

Aidez-vous des étapes qui constituent la refonte du site web • Questions fondamentales : objectifs, délai, ressources… • Conception : donner le maximum d’infos sur les cibles / utilisateurs • Design : envoyer le maximum de sources dont vous disposez (charte, visuels etc.) • Développement : préciser l’environnement technique (hébergement, nom de domaine, technologie

PHP etc.) et le CMS souhaité si possible (Drupal, Wordpress, Magento, Prestashop…) • Intégration des contenus : bien définir en amont qui fait quoi et envoyer les éléments le plus tôt

possible pour pouvoir être prêt lors de l’étape d’intégration. Définir également la/les personnes à former sur le backoffice pour l’intégration.

• Recettage : définir une date de mise en ligne souhaitée et préciser les actions offline prévues pour le lancement (évènement, conférence…)

• Promotion et animation : préciser si possible ce que vous estimez important (réseaux sociaux, SEO, Newsletters, jeux concours etc.)

Appuyez-vous sur les propositions de sommaire de cahier des charges (ci-après)

• Site de type « vitrine » • Site de type « e-commerce »

SOMMAIRE CAHIER DES CHARGES : « SITE VITRINE »

25

1. Présentation de la société 1.1. Secteur d'activité et métier(s) 1.2. Offres commerciales et services proposés 1.3. Positionnement / points différenciateurs par rapport à la concurrence 1.4. Stratégie marketing actuelle 1.5. Historique en matière de communication globale 1.6. Historique en matière de communication web

2. Présentation du projet 2.1. Contexte du projet 2.2. Type de projet web et description succincte 2.3. Périmètre du projet 2.4. Acteurs du projet 2.5. Objectifs stratégiques et retours sur investissement attendus

3. Orientations stratégiques 3.1. Public cible 3.2. Style et ton 3.3. Concurrents sur le web 3.4. Ce qui est apprécié / pas apprécié sur le web 3.5. Perspectives d'évolution

Cahier des charges complet disponible à la demande

4. Spécifications fonctionnelles et graphiques 4.1. Contenus du site 4.2. Arborescence du site 4.3. Fonctionnalités 4.4. Charte graphique

5. Spécifications techniques 5.1. Langues et marchés 5.2. Back-office - Outil de Mise à Jour 5.3. Optimisation 5.4. Développement 5.5. Hébergement et noms de domaine 5.6. Référencement 5.7. Autres questions

6. Délais & budget 6.1. Livraison du projet 6.2. Budget 6.3. Livrables attendus

7. Annexes : charte, brand book, documentations, benchmark concurrents…

SOMMAIRE CAHIER DES CHARGES POUR : « SITE E-COMMERCE »

26

2. Présentation du projet 2.1. Objectifs quantitatifs 2.2. Objectifs qualitatifs

5. Spécifications fonctionnelles, techniques et contenu rédactionnel

5.5. Catalogue et données produits 5.6. Exigences techniques 5.7. Politique tarifaire 5.8. Gestion des stocks 5.9. Paiements et sécurité 5.10. Logistique / Livraison 5.11. Compatibilités 5.12. Intégration et système information 5.13. Logiciels tiers et flux (ERP, CRM…)

6. Délais & budget 6.1. Budget pour la réalisation du site 6.2. Budget pour l’acquisition trafic 6.3. Budget pour la fidélisation, CRM

Idem que « site vitrine » mais en ajoutant :

CONSULTATION

27

Bien choisir ses

partenaires

En consultation : • 3-4 agences maximum : ça demande de l’énergie de briefer, recevoir les agences, analyser

chaque proposition. • Même typologie d’agences si possible, pour pouvoir comparer de manière cohérente

Grandes typologies de partenaires pour votre refonte :

• SSII : profil technique mais peu marketing • Agence de communication globale : bon en com’ mais peu technique • Agence digitale : parfois fragiles en com’ mais maîtrise du digital et du technique • Freelance : tous les profils possibles et moins onéreux mais risqué (pérennité, compétence,

garanties…)

A NE PAS SOUS-ESTIMER !

28

Prévoir du temps et des ressources

Ne pas pratiquer la politique de la patate chaude ! • Même confié à une agence, le projet vous mobilisera beaucoup d’énergie !

Anticiper les ressources dont vous aurez besoin à chaque étape du projet

• Personnes (marketing, service informatique, direction etc.) • Contenus : images, textes, vidéos, brochures, charte graphique etc.

Prévoir de dégager du temps pour chaque acteur interne du projet

• Définir le plus tôt possible vos plages de disponibilités pour planifier les réunions et les temps de travail sur chaque phase

UN PROCESS SIMPLE + CHAÎNE DE VALIDATION COURTE = + DE REUSSITE

29

Définir le process

de validation et les rôles de

chacun

Qui valide quoi ? • En vous aidant des étapes du projet de refonte, définir qui aura l’autorité de valider

chaque phase.

Qui parle à qui ?

• Répartir les rôles en séparant le stratégique (positionnement du site, stratégie de promotion et d’animation) de l’opérationnel (réalisation du site)

SYNTHÈSE

31

Les 10 questions clés à vous poser :

1- Pour quel objectif stratégique faire une refonte ? (ex : développer la notoriété)

2- Pour quel(s) objectif(s) opérationnel(s) faire une refonte ? (ex: augmentation du trafic)

3- De quel délai je dispose ?

4- De quel budget je dispose ?

5- De quelles ressources je dispose ? (acteurs internes, disponibilités, autorités)

6- Mon site doit-il être compatible mobile ?

7- Sur quel CMS et environnement technique je souhaite développer la refonte ? (CMS Drupal, hébergement interne, nom de domaine à récupérer)

8- Mon référencement naturel actuel est-il stratégique ?

9- Avec quels partenaires ?

10- Comment je souhaite faire vivre mon site ? (promotion, animation, community management)

LEXIQUE

33

Le lexique : partie 1 BDD : base de données (de contacts, de produits).

Campagne d’affiliation : campagne de publicité sur Internet via bannières ou emailings, sur un réseau de sites partenaires. Paiement à la performance : vous achetez des clics, des contacts ou des ventes.

Campagne display : campagne de publicité sur Internet via bannières sur des sites vendant leur espace. Paiement à l’affichage de la bannière.

CMS : Content Management System : outil pour vous aider à développer et gérer votre site Internet.

Community Management : gestion de vos communautés présentes notamment sur les réseaux sociaux. Dans cette gestion, on inclut généralement la définition de la charte éditoriale, la planification des articles, la rédaction des articles, la modération des articles. CRM : Customer Relationship Management : outil de gestion de vos contacts / clients.

Design : anglicisme qui signifie création graphique dans notre contexte.

Digital : anglicisme qui signifie numérique, c’est-à-dire tout ce qui est lié à Internet

Drupal / Wordpress / Magento / Prestashop : CMS les plus utilisés dont l’accès au code est libre (pas de paiement de licence). Drupal et Wordpress sont en général utilisés pour des sites de type vitrine. Magento et Prestashop sont utilisés pour des sites de type e-commerce.

Frontoffice / Backoffice : dans notre contexte frontoffice signifie la partie visible d’un site web par l’internaute. En opposition, le backoffice est la partie d’administration du site, visible uniquement par les administrateurs.

Google Adwords : système publicitaire de Google qui permet de s’afficher dans les liens payants du moteur de recherche. Paiement à la performance et aux enchères : vous achetez des clics et le prix varie en fonction de la concurrence.

Google Analytics : outil de statistiques de Google. S’installe sur vos sites et permet de récolter de nombreuses informations sur les visiteurs, leur provenance, leur comportement etc.

34

Le lexique : partie 2

Open Source : désigne un logiciel dans lequel le code source est à la disposition du grand public, et c'est généralement un effort de collaboration où les programmeurs améliorent ensemble le code source et partagent les changements au sein de la communauté.

Promotion : dans notre contexte, ensemble des actions qui permettent de promouvoir le site comme le référencement naturel, la publicité etc.

Responsive Web Design : le Responsive Web Design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, moniteurs d'ordinateur de bureau). Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.

SEO : Search Engine Optimization : il s’agit du référencement naturel d’un site, c’est-à-dire la présence du site dans les résultats naturels (par opposition aux résultats payants) des moteurs de recherche et plus spécifiquement Google.

URL : Uniform Resource Locator : adresse d’un site Internet.

UXD : User eXperience Design : le UX design est une étape très importante dans la réalisation d’un site Web. Elle consiste à penser et à concevoir un site web de manière à ce que l’expérience utilisateur soit la meilleure possible : apparence du site et ergonomie, capacité à rassurer l’utilisateur sur sa crédibilité, efficacité du site : on doit trouver intuitivement et facilement les informations recherchées, référencement, qui doit permettre aux utilisateurs de trouver ou retrouver le site facilement depuis les moteurs de recherche, facilité d’utilisation capacité à s’adapter aux différents terminaux mobile, tablette, portable.

Version Desktop / Mobile / Tablette : dans notre contexte, version du site optimisé pour ordinateur de bureau, smartphone et tablette.

Webservice : il s'agit d'une technologie permettant à des applications de dialoguer à distance via Internet, et ceci indépendamment des plates-formes et des langages sur lesquelles elles reposent.

MERCI

ANNECY ZAC de Valparc,74330 Poisy T. : +33 (0)4 50 244 244

GENEVE Rue du Village-Suisse, 10 1205 Genève T. : +41 (0) 22 320 75 11

www.agencenetdesign.com

02/03/2015