© Sogeti
SOGETI CONSULTING
Digital Cookbook
© Sogeti 2
01
Define
02
Plan
03
Execute
04
Track/Optimise
De l’idée à la mise en ligne
SOGETI vous accompagne dans votre d...
© Sogeti 3
DEFINE
01
 Positioning & context
 Concept
 Moodboard
 Fonctions
 Système & Architecture
© Sogeti 4
Define : Phase 01
Approfondir le contour de l’idée
Positioning & context : Cibler et Accrocher le marché
Self A...
© Sogeti 5
Define : Phase 01
Approfondir le contour de l’idée
Les concepts de communication
• Clairs sous forme de phrases...
© Sogeti 6
Define : Phase 01
Approfondir le contour de l’idée
Accompagner les phases créatives en mettant en œuvre des
mét...
© Sogeti 7
Define : Phase 01
Approfondir le contour de l’idée
La liste des fonctionnalités couvertes par le
service et une...
© Sogeti 8
Define : Phase 01
Approfondir le contour de l’idée
L’architecture de l’application doit
appréhender le Front et...
© Sogeti 9
Define : Phase 01
Approfondir le contour de l’idée
Le Moodboard ou planche de tendances ou planche
d'inspiratio...
© Sogeti 10
PLAN
02
 Master plan
 Navigation
 Storyboarding
 Maquettes
© Sogeti 11
Plan : Phase 02
Du concept à la modélisation
Regroupement dans un Plan Projet de
l’ensemble des outils nécessa...
© Sogeti 12
Plan : Phase 02
Du concept à la modélisation
Les points clés
Logigramme
Storyboarding
UX is how it
works and f...
© Sogeti 13
Plan : Phase 02
Du concept à la modélisation
Le logigramme permet de scénariser la
succession d’écrans nécessa...
© Sogeti 14
Plan : Phase 02
Du concept à la modélisation
Le zoning permet d’une part de structurer le
site / application m...
© Sogeti 15
Plan : Phase 02
Du concept à la modélisation
L’approche :
Recommandation du W3C, le
responsive web design est ...
© Sogeti 16
Plan : Phase 02
Du concept à la modélisation
 Respect des standards de développement,
de zoning et de nommage...
© Sogeti 17
Plan : Phase 02
Du concept à la modélisation
Attention, Google, Apple et Microsoft ne vous laissent pas faire ...
© Sogeti 18
Plan : Phase 02
Du concept à la modélisation
Le Storyboard définit le scénario du site, de
l’application, le p...
© Sogeti 19
Plan : Phase 02
Du concept à la modélisation
Une fois tous les écrans modélisés ils peuvent être replacés dans...
© Sogeti 20
Plan : Phase 02
Du concept à la modélisation
Prototypage dynamique : exemple d’outils
Axure
Balsamiq
Pencil
(f...
© Sogeti 21
Plan : Phase 02
Du concept à la modélisation
Prototypage dynamique : exemple d’outils
Le papier et le crayon :...
© Sogeti 22
Plan : Phase 02
Du concept à la modélisation
Pour permette au graphiste de réaliser les
maquettes, plusieurs é...
© Sogeti 23
Plan : Phase 02
Du concept à la modélisation
Possible en Word, mais préférez une description des écrans détail...
© Sogeti 24
Plateforme de
notification
Google
Plateforme de
notification
Appel
Recommandation
API
Mobile
API
Web
API dédié...
© Sogeti 25
Plan : Phase 02
Du concept à la modélisation
En synthèse : les livrables types
 Screenflow complet de l’appli...
© Sogeti 26
EXECUTE
03
 Contenus
 Code
 Integrate
 Tests & checks
© Sogeti 27
Execute : Phase 03
Les développements
Contenus
La liste des contenus à produire est issue
de l’arbre de naviga...
© Sogeti 28
Execute : Phase 03
Les développements
Code : Web coding & IHM riche & Appli Native
Java Objectif C ou swift C#...
© Sogeti 29
Execute : Phase 03
Les développements
Integrate : Contenus adaptés aux tailles d’écrans
L’Intégration de conte...
© Sogeti 30
Execute : Phase 03
Les développements
Tests
Les 3 niveaux d’exécution sont validés conjointement
 Informatiqu...
© Sogeti 31
Execute : Phase 03
Les développements
Publication en Prod : les points à anticiper
 Routage des noms de domai...
© Sogeti 32
TRACK&
OPTIMISE
04
 Tracking
 Optimise
© Sogeti 33
Track & Optimise : Phase 04
Et après …
Tracking
Configuration des outils
© Sogeti 34
Track & Optimise : Phase 04
Et après …
Optimise
L'optimisation numérique est un double
processus
 Ajustements...
© Sogeti 35
Prochain SlideShare
Chargement dans…5
×

201502_SOGETI_Support_Digital_2.0_V1.1

36 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
36
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

201502_SOGETI_Support_Digital_2.0_V1.1

  1. 1. © Sogeti SOGETI CONSULTING Digital Cookbook
  2. 2. © Sogeti 2 01 Define 02 Plan 03 Execute 04 Track/Optimise De l’idée à la mise en ligne SOGETI vous accompagne dans votre démarche Responsive Web Design MoodBoard HTML5 Internet des objets Natif Hybrid CSS 3 Android IOS Windows WEB Mobile Multi-canal
  3. 3. © Sogeti 3 DEFINE 01  Positioning & context  Concept  Moodboard  Fonctions  Système & Architecture
  4. 4. © Sogeti 4 Define : Phase 01 Approfondir le contour de l’idée Positioning & context : Cibler et Accrocher le marché Self Analysis Target Analysis Competitive Analysis Redefine the message Broadcast & Media Identité de marque, les associations vs positions précédentes de la marque Qui sont les concurrents ? Comment se démarquer ? Identifier la cible de consommateurs Identifier les éléments clés qui illustreront le message Utiliser les médias / Communiquer (moteurs de recherche, twitter, facebook, blog, communication, …)
  5. 5. © Sogeti 5 Define : Phase 01 Approfondir le contour de l’idée Les concepts de communication • Clairs sous forme de phrases courtes • Les points clés à préciser Concepts : cibler la stratégie globale Amélioration de service Nouveau service Nouvel accès au service Branding & image Finalité Bénéfice du service Cibles utilisateurs Contexte d’usage Différence existants
  6. 6. © Sogeti 6 Define : Phase 01 Approfondir le contour de l’idée Accompagner les phases créatives en mettant en œuvre des méthodes structurées Brainstorming Ne repousser aucune idée, aussi saugrenue soit-elle, se laisser aller, laisser parler sa pensée sans s’auto- censurer, produire des embryons d’idées, en quantité, faire participer tout le groupe La carte heuristique (mind map en anglais), également appelée carte des idées, carte conceptuelle ou carte mentale, sorte de diagramme qui représente les connexions sémantiques entre différentes idées, les liens hiérarchiques entre différents concepts intellectuels Mind Mapping Approfondir le contour de l’idée La technique des Personas Rendre concret l’usage du service Préciser les différentes catégories de cibles Identifier les cibles par différentes informations : prénom, âge, profession, compétences, traits de personnalité, environnement de vie/travail, le tout personnalisé pour leur donner une réalité Etudier les solutions concurrentes déjà existantes pour affiner le positionnement Etude de marché
  7. 7. © Sogeti 7 Define : Phase 01 Approfondir le contour de l’idée La liste des fonctionnalités couvertes par le service et une rapide description permet de valider plus en détail les fonctions principales et secondaires du service digital Cette liste de fonction peut également permettre une réflexion sur le lotissement éventuel des développements et des montées en version Fonctions : ce que doit offrir la solution Title Scope Description Publishing Features Stapling Farm Staple Publishing features Site status bar Farm Creates a Microsoft OneNote2010notebookin the SharedDocuments library and places a link toit ontheQuick Launch.This feature requires a properly configured WOPI application serverto create OneNote 2010notebooks. Basic Web Parts Site Makes the following Web Parts available in thesite collectionWeb Part catalog: Page Viewer,Content Editor, Image,Form, XML andSite Users list. XML Form Libraries Web Provides support for XML form libraries for a site. Links Lists Web Provides support for links lists for a site. WorkflowProcessList Feature Web This feature provides theabilityto create a listto supportrunning custom form actions. Grid Lists Web Provides support for editing customlists in a grid for a site. Workflow History Lists Web Provides support for workflow history lists for a site. Team CollaborationListsWeb Provides team collaborationcapabilities for a siteby making standard lists, such as documentlibraries and issues, available. Gantt Chart Tasks Lists Web Provides support for Gantt-charttasks lists for a site. Picture Libraries Web Provides support for picture libraries for a site. Issues Lists Web Provides support for issues lists for a site. Discussion Lists Web Provides support for discussion boards for a site. Contacts Lists Web Provides support for contacts lists for a site. External Lists Web Provides support for external lists for a site. Tasks Lists Web Provides support for tasks lists for a site. Wiki Page Library Web An interconnected set of easily editableweb pages,which cancontain text, images and webparts. Announcements Lists Web Provides support for announcements lists for a site. Wiki Page HomePage Web This site feature willcreatea wikipage and set itas your sitehome page. Cette liste de premier niveau permettra par ailleurs aux équipes « Architecture » d’envisager les principes de l’architecture technique permettant de réaliser les fonctions (tant au niveau logique qu’au niveau des données) Les éléments de contenus à produire sont identifiés et précisés
  8. 8. © Sogeti 8 Define : Phase 01 Approfondir le contour de l’idée L’architecture de l’application doit appréhender le Front et le Back ainsi que les couches de services associés 3 dimensions à prendre en compte (MVC/MVVM) • Interface • Logique • Données Système et architecture : les bases de la solution L’infrastructure doit également être pensée dès la conception pour permettre le déploiement de l’application, son servicing avec une performance et une sécurité adaptée aux enjeux et au contexte La mise en œuvre de solutions Cloud peut permettre d’accélérer le déploiement tout en autorisant une croissance forte de la capacité Data Logic Security,etc User Interface Storage Web Services Data Logic Security,etc Service Interface Storage Services
  9. 9. © Sogeti 9 Define : Phase 01 Approfondir le contour de l’idée Le Moodboard ou planche de tendances ou planche d'inspiration est un document constitué de morceaux choisis : screenshots, coupures de magazine, photos, typos, pictos… Moodboard : la direction artistique Ces "coupures" sont associées pour construire une tendance graphique. On supprime alors totalement le fond pour ne travailler que sur la forme. Cela permet donc de mener une réflexion graphique en amont d'une création. Le moodboard est un document structurant pour la conduite du projet puisqu’il fixe la ligne graphique générale d’un concept de communication
  10. 10. © Sogeti 10 PLAN 02  Master plan  Navigation  Storyboarding  Maquettes
  11. 11. © Sogeti 11 Plan : Phase 02 Du concept à la modélisation Regroupement dans un Plan Projet de l’ensemble des outils nécessaires à la réalisation du projet : • Les données initiales des phases conceptuelles • Un storyboard détaillé des pages du site • Une arborescence des contenus • Un rétroplanning détaillé des phases de développement, tests et validations • Un plan de travail éditorial pour la production des contenus • Un cahier de recette et des jeux de tests • Un plan de lancement • Un dossier de pilotage général • Un suivi de la qualité Master plan : Organiser les prochaines étapes
  12. 12. © Sogeti 12 Plan : Phase 02 Du concept à la modélisation Les points clés Logigramme Storyboarding UX is how it works and feels UI is how it looks MaquettesScreenFlow
  13. 13. © Sogeti 13 Plan : Phase 02 Du concept à la modélisation Le logigramme permet de scénariser la succession d’écrans nécessaires pour réaliser les services proposés par l’application Chaque écran est décrit en texte court et les liens importants (logiques) sont signalés par soulignement et leur pointage signifié par une flèche Navigation : UX Logigramme
  14. 14. © Sogeti 14 Plan : Phase 02 Du concept à la modélisation Le zoning permet d’une part de structurer le site / application mobile avec le client. Souvent cette étape est faite au moment du brief client, afin de définir la meilleure zone de contenu et d’optimiser la pertinence dans l’espace, en fonction des zones chaudes d’un site. Dans le cas d’un projet Responsive Web Design, la phase de zoning est critique pour appréhender les « break points » Navigation : Le zoning
  15. 15. © Sogeti 15 Plan : Phase 02 Du concept à la modélisation L’approche : Recommandation du W3C, le responsive web design est une approche de conception d’IHMs Web dont l’affichage s’adapte en fonction de la résolution de l’écran du terminal qui consomme le service. Responsive Degradation Du web vers le mobile, sélection des éléments à supprimer Mobile First Du mobile vers le web, enrichissement d’information Navigation : Responsive Web Design
  16. 16. © Sogeti 16 Plan : Phase 02 Du concept à la modélisation  Respect des standards de développement, de zoning et de nommage  Respect des normes et des standards W3C  Prise en compte de l’accessibilité par tous  Prise en compte des contraintes de référencement naturel dès la conception  Mise en œuvre des outils de tracking et d’analytics Conception : Prise en compte des normes du Web Module Animation 460 Module A la Une Module Promotion Module A la Une Module A lire également Module En bref 10 10 10 180 110 20 150 150 20 101801027010
  17. 17. © Sogeti 17 Plan : Phase 02 Du concept à la modélisation Attention, Google, Apple et Microsoft ne vous laissent pas faire ce que vous voulez Conception : Prise en compte des normes des stores https://developer.apple.com/ap p-store/review/guidelines/ Prêt de 180 règles, réparties en 29 catégories à respecter pour voir son application publier sur le store Apple https://play.google.com/intl/ALL_f r/about/developer-distribution- agreement.html Prêt de 60 règles, réparties en 15 catégories à respecter pour voir son application publier sur le store Google Play https://support.google.com/googleplay/andr oid-developer/answer/4430948?hl=en Et d’autres règles complémentaires https://msdn.microsoft.com/fr- fr/library/windows/apps/hh694083.aspx Prêt de 80 règles, réparties en 7 catégories à respecter pour voir son application publier sur le store Windows Store
  18. 18. © Sogeti 18 Plan : Phase 02 Du concept à la modélisation Le Storyboard définit le scénario du site, de l’application, le parcours utilisateur, par un fil de fer ou tout simplement illustré avec le wireframe Chaque écran correspondant à une étape du logigramme est alors modélisé dans le détail Des composants standards permettent d’illustrer le fonctionnement de l’écran et de donner une impression fidèle de son fonctionnement et des liens de pointage Storyboarding : Modélisation de l’expérience utilisateur
  19. 19. © Sogeti 19 Plan : Phase 02 Du concept à la modélisation Une fois tous les écrans modélisés ils peuvent être replacés dans le logigramme pour vérifier la cohérence globale de l’expérience utilisateur Dans PENCIL on exportera la solution modélisée vers le type «Single page HTML » qui génère les images des pages modélisées dans un répertoire. Un simple collage des images permet de finaliser un Screenflow à partir du logigramme. Storyboarding : UX- ScreenFlow
  20. 20. © Sogeti 20 Plan : Phase 02 Du concept à la modélisation Prototypage dynamique : exemple d’outils Axure Balsamiq Pencil (freeware)
  21. 21. © Sogeti 21 Plan : Phase 02 Du concept à la modélisation Prototypage dynamique : exemple d’outils Le papier et le crayon : sketch paper Just In Mind POP App
  22. 22. © Sogeti 22 Plan : Phase 02 Du concept à la modélisation Pour permette au graphiste de réaliser les maquettes, plusieurs éléments sont à sa disposition  Le concept  Le moodboard  Les storyboards  Le screenFlow Eventuellement une charte graphique pré existante peut être prise en compte Les écrans les plus complexes feront l’objet d’un maquettage complet (en particulier la page d’accueil) La MOA vérifiera que tous les composants ont au moins été maquettés une fois Maquettes : UI
  23. 23. © Sogeti 23 Plan : Phase 02 Du concept à la modélisation Possible en Word, mais préférez une description des écrans détaillés abordant les actions possibles de l’utilisateur, les échanges de données, les interactions avec des briques techniques, les conditions, … Spécification fonctionnelle : version digitale Support à l’élaboration de stratégie de tests et aux cahiers de recette
  24. 24. © Sogeti 24 Plateforme de notification Google Plateforme de notification Appel Recommandation API Mobile API Web API dédiée Catalogue Authentification Recherche Calendrier API dédiéeAPI dédiée Internet Catalogue de contenus CMS BDD App App Mobile App Desktop Serveur OAUTH V2 Middle Office BugSense SMTP Courriels Flux HTTPS Flux Socket / HTTP (notifications push) Périmètre Sogeti Périmètre Client Flux inter composant du SI Client (HTTP) Flux Socket dans le SI Client Flux SMTP Notifications push Notifications Web socket Plan : Phase 02 Du concept à la modélisation Dossier d’architecture technique : version digitale Bugsense Google Analytics Plateforme de notification Apple Plateforme de notification Google Site Web CMS Application serveur Moteur de recommand ation Catalogue de contenu APP Mobile Serveur SMTP Base de données Architecture macro Sommaire (exemple) Architecture plus détaillée Complète la stratégie de tests et cahiers de recette
  25. 25. © Sogeti 25 Plan : Phase 02 Du concept à la modélisation En synthèse : les livrables types  Screenflow complet de l’application, matérialisant l’expérience utilisateur  Des maquettes d’écran (design, ergonomie, Storybording)  Des spécifications fonctionnelles  Dossier d’architecture technique initialisé  Stratégie de tests et cahiers de recette pré- établis
  26. 26. © Sogeti 26 EXECUTE 03  Contenus  Code  Integrate  Tests & checks
  27. 27. © Sogeti 27 Execute : Phase 03 Les développements Contenus La liste des contenus à produire est issue de l’arbre de navigation et de la liste des fonctionnalités Les contenus doivent prendre en compte les délais de rédaction, de correction et de validation Les budgets associés d’achats de droits photographiques, de montage et retouche photos, de production vidéos ne doivent pas être sous estimés au risque d’être dans l’incapacité de livrer les contenus prévus
  28. 28. © Sogeti 28 Execute : Phase 03 Les développements Code : Web coding & IHM riche & Appli Native Java Objectif C ou swift C# Le code d’un site web actuel Le code d’une application mobile Native Contenu Présentation Interaction 3 compétences  Connaissance des framework/CMS retenu  Connaissance du langage de développement retenu (php, JAVA, .Net)  Connaissances des IMH riches HTML5/CSS3/JavaScript Les points à retenir  Compétences spécifiques, mutualisation difficile  Duplication des développements en cas de déploiement de l’appli sur les devices Apple, Android, Windows Phone  Augmentation du coûts/délais  Alternative : dev cross plateforme Xamarin L’hybridation, l’alternative ? Compétences spécifiques  Connaissance des frameworks
  29. 29. © Sogeti 29 Execute : Phase 03 Les développements Integrate : Contenus adaptés aux tailles d’écrans L’Intégration de contenu dans le CMS moderne est un art qui exige une expérience de rendu de taille multi écran Le « Pixel Perfect » peut générer une lourde charge de travail Anticiper l’intégration et les tests dès que les premiers templates du CMS sont disponibles
  30. 30. © Sogeti 30 Execute : Phase 03 Les développements Tests Les 3 niveaux d’exécution sont validés conjointement  Informatique  L’équipe projet développe un cahier de recette et un jeu de test  Ce plan de test permet de contrôler la conformité au cahier des charges et l’absence de bugs  C’est l’occasion de revoir certains axes fonctionnels et de procéder à des améliorations ergonomiques qui apparaissent dès les premiers tests  Les types de tests réalisés sont :  Tests fonctionnels  Tests de compatibilités  Tests de performances  Tests de sécurité  Contenus  Validation par autorités compétentes de l’ensemble des contenus après intégration et publication  Conformité  Validation par tests et audits du respect des normes Web retenues (W3C, Accessibilité, SEO, etc.)  Validation par checks list du respect des règles des stores (Apple, Google, …)
  31. 31. © Sogeti 31 Execute : Phase 03 Les développements Publication en Prod : les points à anticiper  Routage des noms de domaine / re-routage des anciennes urls  Déploiement serveurs, dossier d’exploitation, dossier d’installation  Publication et validation par le store Anticiper les délais de validation et prise en compte des retours Web Mobile
  32. 32. © Sogeti 32 TRACK& OPTIMISE 04  Tracking  Optimise
  33. 33. © Sogeti 33 Track & Optimise : Phase 04 Et après … Tracking Configuration des outils
  34. 34. © Sogeti 34 Track & Optimise : Phase 04 Et après … Optimise L'optimisation numérique est un double processus  Ajustements à court terme sur la base de la surveillance en temps quasi réel  Moyen terme et à long terme sur la base des optimisations Analytics Launch Monitor AdjustMeasure Optimise
  35. 35. © Sogeti 35

×