1. © Sogeti
SOGETI CONSULTING
Digital Cookbook

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. © Sogeti 3
DEFINE
01
 Positioning & context
 Concept
 Moodboard
 Fonctions
 Système & Architecture

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. © 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. © 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. © 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. © 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. © 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. © Sogeti 10
PLAN
02
 Master plan
 Navigation
 Storyboarding
 Maquettes

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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © Sogeti 20
Plan : Phase 02
Du concept à la modélisation
Prototypage dynamique : exemple d’outils
Axure
Balsamiq
Pencil
(freeware)

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. © 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. © 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. © 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. © 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. © Sogeti 26
EXECUTE
03
 Contenus
 Code
 Integrate
 Tests & checks

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. © 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. © 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. © 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. © 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. © Sogeti 32
TRACK&
OPTIMISE
04
 Tracking
 Optimise

33. © Sogeti 33
Track & Optimise : Phase 04
Et après …
Tracking
Configuration des outils

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. © Sogeti 35