1. SCÉNARIOS STORYBOARDS ZONING Antoine visonneau – antoine@ooda.fr METHODES

2. Scénario # 1 Accueil (recherche simple)‏ Liste des résultats Auto-biographie Contacter concessionnaire Merci Marc, 43 ans cadre Objectif : trouver rapidement un véhicule d’occasion

3. Marketing - Flash Push marketing Recherche par points de vente Trouvez votre véhicule Nous recherchons pour vous Vous souhaitez être alerté par mail dès qu’un véhicule correspond à vos critères de recherche ? Créer une alerte e-mail Cette semaine : 355 occasions de la semaine vous attendent dans le réseau Peugeot > Consulter les Occasions de la semaine Visualisez les points de vente et leur stock par département : 54023 véhicules disponibles. Mise à jour : mercredi 16 Janvier. Vous recherchez un véhicule en particulier ? renseigner plus de critères Imprimer Sélectionnez un ou plusieurs critères puis appuyez sur rechercher. Rechercher Push marketing Marc arrive sur la page d’accueil. Dans le bloc de recherche, il renseigne plusieurs critères et clique sur Rechercher IDENTITÉ VISUELLE Trouvez votre véhicule Le Label ODL Le guide d’achat Trouvez votre concessionnaire Département Énergie Budget Modèle Département

4. Liste des résultats Pour visualiser les détails d’un véhicule, cliquer sur la ligne correspondante. Pour trier la liste, cliquez sur l’intitulé correspondant. Pour ajouter des véhicules à votre sélection, cochez les cases correspondantes aux véhicules de votre choix puis appuyez sur ‘ajouter à ma sélection’. La comparaison s’effectue depuis votre sélection Ajouter à ma sélection 1 2 3 4 5 6 7 Suite 237 Résultats de la recherche : Nouvelle recherche Créer une alerte mail Véhicules Votre Sélection contient Consulter la sélection 0 véhicule(s)‏ 1) Rechercher 2) Trouver 3) Contacter Affiner la recherche Vos critères : Prix inférieur à 30,00e, 3 portes, 5 vitesses, première main Imprimer Il consulte la liste des résultats, et identifie un véhicule intéressant. Il clique sur la ligne correspondante IDENTITÉ VISUELLE Trouvez votre véhicule Le Label ODL Le guide d’achat Trouvez votre concessionnaire 75 7,200 26 000 2007 Xline 1.4e 206 Peugeot 12 75 7,200 26 000 2007 Xline 1.4e 206 Peugeot 13 75 7,200 26 000 2007 Xline 1.4e 206 Peugeot 14 Peugeot Peugeot Peugeot Peugeot Peugeot Peugeot Peugeot Peugeot Peugeot Citroen Smart Peugeot Marque 75 7,200 26 000 2007 Xline 1.4e 206 4 75 7,200 26 000 2007 Xline 1.4e 206 6 75 7,200 26 000 2007 Xline 1.4e 206 7 75 7,200 26 000 2007 Xline 1.4e 206 15 75 7,200 26 000 2007 Xline 1.4e 206 11 75 7,200 26 000 2007 Xline 1.4e 206 10 75 7,200 26 000 2007 Xline 1.4e 206 9 75 7,200 26 000 2007 Xline 1.4e 206 8 75 7,200 26 000 2007 Xline 1.4e 206 5 75 23450 6 000 2007 1.6 HDi110 C4 Picasso 3 92 9,290 23 000 1998 Smart&Pure Cabrio 2 75 7,200 26 000 2007 Xline 1.4e 206 1 Dpt Prix Km Année Version Modèle P n

5. Fiche Véhicule Contacter le concessionnaire Ajouter à ma sélection Envoyer à un ami CITROEN C4 Picasso 1.6 HDi110 Pack Ambiance FAP 5420 km Garanti 23450 € Descriptif Carrosserie : Monospace Mise en circulation : 28/08/2007 Nombre de portes : 5 Nombre de places : 5 Couleur : Gris Clair Métal Origine : Achat Direct S.I.A NAZAIRIENNE S.A. Route de la Côte d'Amour 44600 SAINT NAZAIRE Horaires : n/c Contact : Patrick PERROT Patrick @sinazair.peugeot.fr Tel : 02 40 53 88 73 Fax : 02 40 00 87 63 www.sinazair.peugeot.fr Contacter le concessionnaire 1) Rechercher 2) Trouver 3) Contacter Imprimer Votre Sélection contient Consulter la sélection 0 véhicule(s)‏ Motorisation Énergie : Diesel Boîte : Manuelle 5 rapports Puissance fiscale : 6 cv Puissance DIN : 110 ch Cylindrée (cm 3 ) : 1560 Consommation (en l/100km) : 5,9 Consommation urbaine : 7,3 Consommation extra urbaine : 5,1 Équipements Peinture métal, Pack Nord, Clim automatique, Régulateur de vitesse, Pack électrique, Radio CD, 6 Airbags, ESP Marc arrive sur fiche véhicule ou Autobiographie. Il regarde les photos, lit les détails de la fiche. Intéressé, il clique sur Contacter le concessionnaire . IDENTITÉ VISUELLE Trouvez votre véhicule Le Label ODL Le guide d’achat Trouvez votre concessionnaire << retour à la liste

6. Vos coordonnées Dossier contact S.I.A NAZAIRIENNE S.A. Route de la Côte d'Amour 44600 SAINT NAZAIRE Horaires : n/c Contact : Patrick PERROT Patrick @sinazair.peugeot.fr Tel : 02 40 53 88 73 Fax : 02 40 00 87 63 www.sinazair.peugeot.fr Contacter le concessionnaire 1) Rechercher 2) Trouver 3) Contacter Imprimer Votre Sélection contient Consulter la sélection 0 véhicule(s)‏ CITROEN C4 Picasso 1.6 HDi110 Pack Ambiance FAP 5420 km Garanti 23450 € Reprise de votre véhicule Si vous avez un véhicule à reprendre, renseignez les informations suivantes Il renseigne ses coordonnées et fait défiler la page avec l’ascenseur IDENTITÉ VISUELLE Trouvez votre véhicule Le Label ODL Le guide d’achat Trouvez votre concessionnaire Monsieur Madame Mademoiselle Prénom Nom E-mail Message

7. Vos coordonnées Dossier contact S.I.A NAZAIRIENNE S.A. Route de la Côte d'Amour 44600 SAINT NAZAIRE Horaires : n/c Contact : Patrick PERROT Patrick @sinazair.peugeot.fr Tel : 02 40 53 88 73 Fax : 02 40 00 87 63 www.sinazair.peugeot.fr Contacter le concessionnaire Votre Sélection contient Consulter la sélection 0 véhicule(s)‏ Vous souhaitez : plus d’information essayer un véhicule un rendez-vous CITROEN C4 Picasso 1.6 HDi110 Pack Ambiance FAP 5420 km Garanti 23450 € Reprise de votre véhicule Si vous avez un véhicule à reprendre, renseignez les informations suivantes (suite de la fiche véhicule)‏ Envoyer Il termine de renseigner le dossier contact puis clique sur envoyer . Monsieur Madame Mademoiselle Prénom Nom E-mail Message Département Énergie Budget Modèle

8. Merci ! S.I.A NAZAIRIENNE S.A. Route de la Côte d'Amour 44600 SAINT NAZAIRE Horaires : n/c Contact : Patrick PERROT Patrick @sinazair.peugeot.fr Tel : 02 40 53 88 73 Fax : 02 40 00 87 63 www.sinazair.peugeot.fr Contacter le concessionnaire 1) Rechercher 2) Trouver 3) Contacter IDENTITÉ VISUELLE Trouvez votre véhicule Le Label ODL Le guide d’achat Trouvez votre concessionnaire Imprimer Votre Sélection contient Consulter la sélection 0 véhicule(s)‏ Votre demande a été envoyée avec succès. Votre concessionnaire (rappel du concessionnaire) vous contactera dans les 3 jours. (Récapitulatif du véhicule & de la demande)‏ imprimer Le message lui confirme que sa demande a été envoyée. Il a terminé, il referme le navigateur.

9. Mot de passe Oublié ? Principe de L’inscription Principe de La recherche avancée Ecran supplémentaires Scénario 3 Scénario 2 Scénario 1 Format du document Etc … Fiche persona Scénario 1 Objectif:……. Le persona a accompli son objectif Ecran 3 Ecran 3 Ecran 2 ECRAN 1 Scénario +/ = 5 écrans Fiche persona Scénario 2 Objectif:……. Le persona a accompli son objectif Ecran 3 Ecran 3 Ecran 2 ECRAN 1 Scénario +/ = 5 écrans Fiche persona Scénario 3 Objectif:……. Le persona a accompli son objectif Ecran 3 Ecran 3 Ecran 2 ECRAN 1 Scénario +/ = 5 écrans

11. Objectif de convergence 3 points de vue USER AUTEUR MARKETING Benchmark Personas avec objectifs Concept créatif

13. pourquoi dessiner ? Croquis au marqueur 20 itérations / heure Wireframe powerpoint 2 itérations / heure Graphisme dans Photoshop 0.3 itérations / heure

14. 3 Prototyper : visualiser la cinématique Une visualisation dynamique : mettre en scène l’utilisateur dans son contexte permet de visualiser l’interface au travers des actions nécessaires à la réalisation des objectifs. Ex. scénario

15. Storyboard dessiné

16. Storyboard powerpoint

17. Graphic design

18. Design process Description des étapes Storyboard Dessiné Storyboard Powerpoint Graphic design Personas & scénarios Utilisateur et objectif Approche « user experience »

19. Multiplier les approches Pour un design optimal Personas & storyboards Zoning Arborescence Approche Top bottom (du haut vers le bas)‏ Approche Bottom up (du bas vers le haut)‏ Utilisateur & usage Architecture de l’information

20. Multiplier les approches Pour un design optimal Approche Top Bottom (du haut vers le bas)‏ SPECS Storyboard E3 Storyboard E2 Storyboard E1 Storyboard E4 descriptions UML Règles de gestion Liste des Fonctions PERSONAS UCD ARBO Userflow iterations Architecturer Rationnaliser Optimiser Décrire L’utilisateur atteind son objectif Approche Bottom up (du bas vers le haut)‏

21. Identité visuelle Navigation Info & Fonctions Contenu Niv 2 Actions et navigation (pagination…)‏ Contenu Niv 3 Contenu principal Titre Zoning Éléments d’organisation de l’écran

23. Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectus Lobortis 10.01.2009 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectus. Duis sed mi vel odio congue commodo. Quisque eget magna volutpat nulla interdum euismod. Nullam velit. Integer sem. Maecenas quis tellus. Maecenas ut est pharetra ipsum imperdiet molestie. Ut eu libero. Praesent pretium. Etiam velit velit, facilisis et, dignissim eu, viverra at, est. Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet nunc. Vestibulum vitae velit eu lacus nonummy feugiat. Donec ac libero eu lorem bibendum fermentum. Suspendisse tempor tellus eget purus. Maecenas in orci at felis adipiscing imperdiet. Nunc adipiscing massa ac leo. Aliquam vel lorem vel augue pretium pharetra. Sed eu sapien vitae enim blandit consectetuer. Quisque id lorem quis ligula volutpat elementum. Morbi lobortis. Vestibulum elit. Integer vehicula adipiscing lectus. Proin tellus nibh, commodo vel, rutrum at, facilisis a, justo. Quisque in arcu. Phasellus ac quam non est molestie condimentum. Cras at nibh. Aliquam a purus. Quisque ultricies sapien sed turpis. Morbi tristique. Mise en scène des mots Multiplier les points d’entrées pour l’oeil Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet nunc. LOREM IPSUM dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectus LOBORTIS 10.01.2009 L orem ipsum dolor sit amet , consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectus. Duis sed mi vel odio c ongue commodo. Quisque eget magna volutpat nulla interdum euismod. Nullam velit. Integer sem. Maecenas quis tellus. Maecenas ut est pharetra ipsum imperdiet molestie. Ut eu libero. Praesent pretium. Etiam velit velit, facilisis et, dignissim eu, viverra at, est. Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet elementum. Morbi lobortis. Vestibulum elit. Integer vehicula adipiscing lectus. Proin tellus nibh, commodo vel, rutrum at, facilisis a, justo. Quisque in arcu. Phasellus ac quam non est molestie condimentum. Cras at nibh. Aliquam a purus. Quisque ultricies sapien sed turpis. Morbi tristique. Vestibulum vitae velit eu lacus nonummy feugiat. Donec ac libero eu lorem bibendum fermentum. Suspendisse tempor tellus eget purus. Maecenas in orci at felis adipiscing imperdiet. Nunc adipiscing massa ac leo. Aliquam vel lorem vel augue pretium pharetra. Sed eu sapien vitae enim blandit consectetuer. Quisque id lorem quis ligula volutpat “ Maecenas in orci at felis adipiscing imperdiet. Nunc adipiscing massa Romulus

24. Valorisation Ligne de flotaison Valeur max Valeur moindre Identité visuelle # 1 # 2 # 3 pub Ligne de flottaison

25. &quot;JE VEUX PLUS DE LA MÊME CHOSE&quot; L'espace utile est très faible…si chaque élément est navigable, cela revient à agrandir l'espace de la page. Narration dans la page Exploration en profondeur # 1 # 2 # 3 pub

26. A la moitié, tu relances ta page […] je mets les programmes TV tout en bas pour qu'il aille les chercher “ Narration dans la page Créer du rythme

28. ZONING sur les autres supports (exemple de projets CRMA)

29. MU Structure narrative Gobelins CRMA 2008 Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury

30. MU Fiche activité Gobelins CRMA 2008 Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury

31. MU Zoning : table interactive Gobelins CRMA 2008 Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury

32. Gobelins CRMA 2008 Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury

33. TEIGO Zoning : dale tactile Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

34. TEIGO Zoning : dale tactile Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

35. TEIGO Zoning : dale tactile Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

36. TEIGO Zoning : iPhone Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

37. TEIGO Zoning : iPhone Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

38. Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron TEIGO Zoning : iPhone

39. Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron TEIGO Zoning : iPhone

40. Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron TEIGO Zoning : iPhone

41. TEENIZ Wireframe d’un projet graphique Gobelins CRMA 2010 - Soiny DUVAL - Elsa PRIETO - Bertrand RICHE - Lucie SEBILLE

42. TEENIZ Wireframe d’un projet graphique Gobelins CRMA 2010 Soiny DUVAL Elsa PRIETO Bertrand RICHE Lucie SEBILLE

43. TEENIZ Wireframe d’un projet graphique Gobelins CRMA 2010 Soiny DUVAL Elsa PRIETO Bertrand RICHE Lucie SEBILLE