Refonte de site web : 10 questions à se poser
Work’n Coffee— 06/03/2015
En introduction
Introduction
« … s’adapter pour survivre »
Extrait du livre : Repenser la relation client : s’adapter pour survivre,
Erik ...
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
Tech...
Refonte ou Mise à jour ?
VS
Mise à jour
technique
légère
(migration, nouvelle
fonctionnalité ect.)
Modifications
graphique...
COMMENT RÉUSSIR SA REFONTE ?
POUR BIEN DÉMARRER, SE POSER LES QUESTIONS FONDAMENTALES
10
POUR FAIRE QUOI ?
Quels sont mes nouveaux
objectifs stratégiqu...
Questions fondamentales :
quoi, comment, avec quoi, avec
qui
Conception,
définition de
l’expérience
utilisateur : UX
Desig...
Questions fondamentales :
quoi, comment, pourquoi,
avec qui
Conception,
définition de
l’expérience utilisateur
: UX Design...
LA CONCEPTION ET L’UX DESIGN
13
 Analyse de l’existant :
• Les visiteurs actuels : provenance, nombre, rythme des visites...
Wireframe page
d’accueil version
desktop
Wireframe page
d’accueil version
mobile
DESIGN
Une approche créative en perpétuelle évolution
18
 La révolution Mobile
• Disparition de la technologie flash
• Re...
Wireframe page
d’accueil version
mobile
Codage
Paris
DÉVELOPPEMENT
Objectif : optimiser votre budget présent et avenir
20
 Préférez si possible un CMS OPEN SOURCE
• Open Sour...
LES CONTENUS
Un élément trop souvent sous-estimé
22
 Rappel : définir en étape 1 qui fait quoi
• Qui agrège les sources t...
65 %du ranking de Google
est basé sur le contenu
de votre site
RECETTAGE : CONTRÔLER, TESTER, DEBUGGER
La dernière ligne droite…
24
 C’est quoi ?
• Étape de finalisation du site où vou...
Pour une bonne conduite de
projet, privilégier un nombre
restreint d’interlocuteurs
avec des rôles bien définis.
LE SITE EST EN LIGNE…
… mais ce n’est pas fini !
26
PROMOTION
SUIVI /
MAINTENANCE
Évolutions
du site
(nouvelles
fonctionna...
Publicité et promotion
CERCLE VERTUEUX : AMÉLIORATION CONTINUE
27
0 1 2 3
Volume des
investissements
Années
Refonte Refont...
Soyez prêt !
CAHIER DES CHARGES
29
Brief /
Cahier
des
charges
précis
 Aidez-vous des étapes qui constituent la refonte du site web
• Q...
SOMMAIRE CAHIER DES CHARGES : « SITE VITRINE »
30
1. Présentation de la société
1.1. Secteur d'activité et métier(s)
1.2. ...
SOMMAIRE CAHIER DES CHARGES POUR : « SITE E-COMMERCE »
31
2. Présentation du projet
2.1. Objectifs quantitatifs
2.2. Objec...
CONSULTATION
32
Bien choisir
ses
partenaires
 En consultation :
• 3-4 agences maximum : ça demande de l’énergie de briefe...
A NE PAS SOUS-ESTIMER !
33
Prévoir du
temps et des
ressources
 Ne pas pratiquer la politique de la patate chaude !
• Même...
UN PROCESS SIMPLE + CHAÎNE DE VALIDATION COURTE = + DE REUSSITE
34
Définir le
process
de validation
et les rôles de
chacun...
SYNTHÈSE
36
Les 10 questions clés à vous poser :
1- Pour quels objectifs stratégiques faire une refonte ? (ex : développer la notor...
POUR ALLER PLUS LOIN…
38
Webographie
http://repenser-la-relation-client.fr/
Partie introduction : le digital au cœur des stratégies de relation ...
39
Webographie
http://theultralinx.com/2012/10/best-cms.html
Partie développement : le CMS
What Is A CMS And What Are Some...
MERCI
ANNECY
ZAC de Valparc,74330 Poisy
T. : +33 (0)4 50 244 244
GENEVE
WTC II – Route du Pré-Bois 29
1215 Genève
T. : +41...
Workn coffee _Refonte_de_site_web_10_questions_à_se_poser
Workn coffee _Refonte_de_site_web_10_questions_à_se_poser
Workn coffee _Refonte_de_site_web_10_questions_à_se_poser
Workn coffee _Refonte_de_site_web_10_questions_à_se_poser
Prochain SlideShare
Chargement dans…5
×

Workn coffee _Refonte_de_site_web_10_questions_à_se_poser

780 vues

Publié le

Le web se renouvelle tous les jours : fonctionnalités, technologies, cadre légal, standards ergonomiques et graphiques. A cela s’ajoute de profondes mutations dans les usages utilisateurs telles que la transition mobile.

Dans ce contexte, à quel moment et comment dois-je envisager la refonte de mon site web ? 10 astuces pour vous aider.

Publié dans : Internet
  • Soyez le premier à commenter

Workn coffee _Refonte_de_site_web_10_questions_à_se_poser

  1. 1. Refonte de site web : 10 questions à se poser Work’n Coffee— 06/03/2015
  2. 2. En introduction
  3. 3. 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.
  4. 4. Internet, ça bouge tout le temps !
  5. 5. POURQUOI FAIRE UNE REFONTE ?
  6. 6. 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 7
  7. 7. Refonte ou Mise à jour ? VS Mise à jour technique légère (migration, nouvelle fonctionnalité ect.) Modifications graphique ou de texte légères 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
  8. 8. COMMENT RÉUSSIR SA REFONTE ?
  9. 9. POUR BIEN DÉMARRER, SE POSER LES QUESTIONS FONDAMENTALES 10 POUR FAIRE QUOI ? Quels sont mes nouveaux objectifs stratégiques ? •Développer la notoriété ? •Augmenter le chiffre d’affaires ? •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 ?
  10. 10. 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 11 Cela vous permettra de définir précisément votre demande, mesurer et anticiper le travail à prévoir
  11. 11. 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…
  12. 12. LA CONCEPTION ET L’UX DESIGN 13  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
  13. 13. Wireframe page d’accueil version desktop Wireframe page d’accueil version mobile
  14. 14. DESIGN Une approche créative en perpétuelle évolution 18  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
  15. 15. Wireframe page d’accueil version mobile Codage Paris
  16. 16. DÉVELOPPEMENT Objectif : optimiser votre budget présent et avenir 20  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
  17. 17. LES CONTENUS Un élément trop souvent sous-estimé 22  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
  18. 18. 65 %du ranking de Google est basé sur le contenu de votre site
  19. 19. RECETTAGE : CONTRÔLER, TESTER, DEBUGGER La dernière ligne droite… 24  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
  20. 20. Pour une bonne conduite de projet, privilégier un nombre restreint d’interlocuteurs avec des rôles bien définis.
  21. 21. LE SITE EST EN LIGNE… … mais ce n’est pas fini ! 26 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
  22. 22. Publicité et promotion CERCLE VERTUEUX : AMÉLIORATION CONTINUE 27 0 1 2 3 Volume des investissements Années Refonte RefonteAnimation et maintenance du site Une refonte ne veut pas dire plus d’investissement sur le site pendant 3 ans
  23. 23. Soyez prêt !
  24. 24. CAHIER DES CHARGES 29 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 »
  25. 25. SOMMAIRE CAHIER DES CHARGES : « SITE VITRINE » 30 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…
  26. 26. SOMMAIRE CAHIER DES CHARGES POUR : « SITE E-COMMERCE » 31 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 :
  27. 27. CONSULTATION 32 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…)
  28. 28. A NE PAS SOUS-ESTIMER ! 33 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
  29. 29. UN PROCESS SIMPLE + CHAÎNE DE VALIDATION COURTE = + DE REUSSITE 34 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)
  30. 30. SYNTHÈSE
  31. 31. 36 Les 10 questions clés à vous poser : 1- Pour quels objectifs stratégiques 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- Quelles exigences vis-à-vis de l’expérience mobile / tablette ? 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)
  32. 32. POUR ALLER PLUS LOIN…
  33. 33. 38 Webographie http://repenser-la-relation-client.fr/ Partie introduction : le digital au cœur des stratégies de relation client. Erik Campanini & Kyle Hutchins Erik Campanini est responsable de l’offre Digital chez BearingPoint et Kyle Hutchins est directeur de l’activité Customer Experience chez West Monroe Partners. http://www.amazon.fr/Design-dexp%C3%A9rience-utilisateur-Sylvie-Daumal- ebook/dp/B008UWAXT8/ref=sr_1_1?s=books&ie=UTF8&qid=1425890713&sr=1- 1&keywords=experience+utilisateur Partie UX : comprendre le design d’expérience utilisateur Design d’expérience utilisateur Le design d'expérience utilisateur (ou UX design) est un travail sur la qualité de l'expérience vécue lors de l'usage d'un site web… http://www.amazon.fr/Ergonomie-web-Pour-sites- efficaces/dp/2212132158/ref=sr_1_1?s=books&ie=UTF8&qid=1425890686&sr=1-1&keywords=ergonomie+web Partie UX : les bonnes pratiques ergonomiques web Ergonomie Web Quelles règles pour séduire et fidéliser votre internaute ? Tout site Internet doit réussir le pari difficile de satisfaire ses visiteurs. Mais comment connaître ces derniers ? Comment concevoir un site si agréable et efficace qu'il donne envie d'y rester et d'y revenir ?
  34. 34. 39 Webographie http://theultralinx.com/2012/10/best-cms.html Partie développement : le CMS What Is A CMS And What Are Some Popular CMS Découvrez une infographie concise qui vous permettra de d’approfondir votre compréhension de cet outil.
  35. 35. MERCI ANNECY ZAC de Valparc,74330 Poisy T. : +33 (0)4 50 244 244 GENEVE WTC II – Route du Pré-Bois 29 1215 Genève T. : +41 (0) 22 320 75 11 www.agencenetdesign.ch

×