Le web design en pratique avec Fabienne Schouler

Partager :

Le 26 juin dernier s’est déroulée la deuxième intervention sur le web design de Fabienne Schouler.

Après un rapide brief de Fabienne Schouler sur l’exercice proposé, il s’agissait de mener tambour battant en deux heures un projet de refonte de la partie “éducation/élèves” du site web du Cnam.

Consigne-26juin2014
Le web design en pratique

Nous sommes ravis d’une mise en pratique de l’intervention précédente sur le co-design.

Répartis en 5 groupes de 5 personnes environ, nous étions en mode projet. Pas moins de deux heures ont été nécessaires aux groupes pour envisager la refonte en imaginant les possibilités de collaboration et d’interaction des outils 2.0.

26 Juin 14 Groupe de travail
Groupes de travail 26 juin 2014

L’analyse de l’existant est partagée par tous, consternant.

Une étude est proposée collectivement.

Tous les groupes ont fait de bonnes propositions mais à dix minutes de la fin, une nouvelle consigne de Fabienne Schouler frappe directement le budget. La présentation devra préciser l’abandon de certains choix.

La chute est dure, “délirer” soit mais demander la lune à un prestataire ferait ajouter plusieurs 0 au devis.

Il est fortement conseillé d’avoir plusieurs prestataires, une agence de communication n’est pas une SSII, rares sont les prestataires cumulant toutes les compétences mais il sera nécessaire d’avoir un chef de projet “chef d’orchestre” faisant le lien entre eux.

Autre déconvenue possible pour le chef de projet, le design intervient souvent en variable d’ajustement. Une tuile si l’on veut garder une approche “User Centric” : utile, utilisable, désirable.

Il faudra se montrer habile et éviter cet écueil sinon on se sera trompé de cours.

Billet rédigé par Michèle Clément – Lucile Lasveaux – Eloise Baïlle.

Lire aussi article précédemment publié « Innovation et design de service – retour sur la précédente intervention de Fabienne Schouler«  rédigé par Lucile Lasveaux avec le soutien de Marie-France Deriau et Michèle Clément.

Quelques références compilées dans le groupe dédié sur DIIGO.

Ci-après quelques slides de la présentation d’un groupe de travail.

groupe de travail webdesign 26 juin 2014

groupe de travail webdesign 26 juin 2014

Espace-de-connaissanceProjet-Réseau-social

 

Partager :

Design de Services et Innovation – Suite et fin (résumé par Mehdi CHEBIRA et Suzanne KAN)

Partager :

Une deuxième séance de travail sous forme de cas pratique

Le design de service en mode « cas pratique », tel était le thème de la deuxième séance proposée par Fabienne SCHOULER qui a une nouvelle fois pu s’éclipser de chez Orange Labs le 29 novembre après-midi.

 

Petit rappel de la 1ère séance

Pour ceux qui ne s’en souviennent pas ou qui ne l’ont pas encore lu, Sylvie et Suzanne nous ont synthétisé tout ce qu’il faut savoir pour comprendre le design de service à travers un billet de blog bien complet : http://www.gestionprojet20.com/design-de-services-et-innovation

Dans ce second billet, on va présenter entre autre celui qui nous fait tant suer : l’UTILISATEUR, ou comment le caricaturer par un personnae et l’enfermer dan un segment…. Le client, c’est bien lui la clé de tout, la véritable « richesse de l’entreprise » !

Cette vision qui met l’utilisateur au centre de tout s’appelle « User-Centric », et tout le reste de la démarche va découler de cette vision qui demande effectivement une analyse poussée de l’utilisateur et de ses personae, mais permet de réagir au plus près de son usage.

Cette vision concrétise également l’aspect 2,0 d’un projet puisque l’utilisateur est amené à devenir un ACTEUR. Cette intégration et prise en compte de l’usager se traduit par 4 formes d’interventions :

  • le Déplacement : il s’agit de garder l’esprit ouvert à d’autres usages que ceux initialement prévus
  • l’Adaptation : ou les modifications nécessaires
  • l’Extension : on enrichit les fonctionnalités
  • le Détournement : ou la modification des usages prévus

Revenons-en aux users, nos fameux utilisateurs. Le travail d’analyse sur leurs besoins est une phase clé du double diamant. Le défi est de taille, puisqu’il s’agit de créer une interface qui réponde aux besoins de chacun, alors que chaque utilisateur est différent.

S’ensuit alors un chemin de réflexion qui comment par l’identification des utilisateurs à travers la segmentation (vue macroscopique indispensable pour une définition abstraite et la quantification des besoins) ; et les personas (l’aspect « qualitatif » : descriptions archétypiques, expérience personnelles..).

Une fois les personaes créées et la segmentation faite, on peut alors se pencher les cas d’usages, d’opportunités, de concepts, et enfin, la création des scénarios utilisateurs et l’identification des expériences clés. C’est à travers toutes ces notions que nous avons construit notre réflexion autour du cas pratique proposé par Fabienne.

Le personae, comment le définir : la boite à outils

 

La méthodologie et les outils utilisés pour construire notre étude de cas

Fabienne propose de nous partager en trois groupes pour une mise en situation professionnelle : chaque groupe a pour mission de refondre la partie « Élèves » du site Internet du CNAM. L’objectif recherché est d’améliorer les services pédagogiques proposés aux anciens et nouveaux étudiants (échanges, cours à distance, en visio, etc.). Elle nous remet des copies d’écran du site actuel et nous donne 1h pour lui présenter en 15 minutes un plan d’action par groupe.

Pas de temps à perdre, chaque groupe se concerte pour définir la méthodologie, le périmètre des évolutions et un rétro-planning qui serviront à élaborer le cahier des charges techniques. Tout le monde commence par prendre connaissance des documents et à relire les objectifs recherchés, définir les problématiques ou encore identifier les risques, contraintes, opportunités et faiblesse (méthode SWOT). Je parie qu’avant la formation, chacun se serait projeté sur les questions d’outils : lequel je prends ? Quelles fonctionnalités je développe ? Est-ce que je le relie aux réseaux sociaux ?

Bon j’avoue que dans notre groupe on a été tenté mais on est s’est vite raisonné à appliquer les méthodes apprises lors des cours précédents notamment celui de Fabienne…mais aussi celle de Marc Lippa que l’on venait de voir le matin même :

  • La méthode des 5W
    • Who : qui est notre cible, qui va mener le projet.
    • Why : pour répondre à quels besoins.
    • HoW : quels sont les différentes étapes à respecter
    • What : quels sont les services à proposer, quels sont les contraintes ou les leviers
    • When : quand dois-je le finir pour respecter le détail
  • La méthode du double diamant
    • Explorer : le périmètre, les objectifs, le contexte
    • Définir : les profils d’utilisateurs, les cas d’usages, les scénarii, les concepts
    • Concevoir : Création, fonctionnalités, Use cases, Storyboard, Wireframes, maquettes, mockup, design graphique
    • Développer : les services,
    • Les deux dernières étapes nécessitent beaucoup d’étapes.
  • Les étapes clés de gestion d’un projet 2.0 (notamment intranet)
    •  Cadrage stratégique
    • Étude des besoins
    • Spécifications
    • Réalisation
    • Recette
    • Déploiement
  • La méthode agile qui vise à créer des groupes de pratiques ou d’utilisateurs notamment sur des projets de développement informatique (conception de logiciel, refonte de site, etc). Elle implique au maximum le demandeur et permettent une grande réactivité à ses demandes.
  • La méthode de développement de logiciel (cycle en V)

Pour répondre à toutes ces questions, on a d’abord analysé l’existant à savoir le site intranet du CNAM. Et ensuite, on a tous bien réfléchi avec succès (ou pas) à poser le cadre du pilotage du projet et de la définition des rôles de chaque instance :

  • la Maitre d’Ouvrage (MOA) : c’est l’entité porteuse du besoin, définissant l’objectif du projet, son calendrier et le budget consacré à ce projet. Ici, c’est le CNAM.
  • L’Assistant à Maitrise d’Ouvrage (AMOA) : c’est la personne (ou le groupe projet) qui a pour mission d’aider le maître d’ouvrage à définir, piloter et exploiter, le projet réalisé par le maître d’œuvre. L’assistant a un rôle de conseil et de proposition, le décideur restant le maître d’ouvrage. Il facilite la coordination de projet et permet au maître d’ouvrage de remplir pleinement ses obligations au titre de la gestion du projet. Ici, c’est nous les étudiants.
  • la Maitrise d’œuvre (MOE) : ce sont ceux qui sont chargés de la conduite opérationnelle des travaux. Chaque groupe a fait divers propositions allant de l’ergonome au designer (ou web agency) en passant par une société de service informatique.

 

La présentation des travaux

Chaque groupe a présenté de manières différentes ses travaux : du plus original sous forme de posthite au plus numérique sous Word ou Powerpoint.

Voici un exemple de présentation d’un groupe :

  1. Cadrage stratégique du projets (réunion des acteurs, réunion des équipes projets, définition MOA)
  2. Analyse de l’existant (organisation, outils)
  3. Cibles/Users
  4. Étude/Définition des besoins
  5. Étude de faisabilité (délais, budget)
  6. Définition des fonctionnalités
  7. Rédaction du cahier des charges
  8. Lancement des appels d’offres
  9. Sélection des prestataires (ergonome, web agency, designer, SSII)
  10. Désignation de la MOE
  11. Planning réel et délai de réalisation
  12. Conception / Trame et zoning
  13. Proposition de scénarii (storyboard)
  14. Développement technique et tests
  15. Recettes
  16. Conduite du changement / déploiement (formation, accompagnement de communautés, assistance utilisateurs)

 

Les retours de Fabienne

Après chaque présentation, elle est intervenue pour nous faire part de ses observations. Voici l’essentiel à retenir :

  1. Point n°1 : l’importance que l’on doit porter à l’utilisateur qui doit être placé au centre de toutes nos interrogations (user centric).
  2. Point n°2 : elle a également rappelé tout le sérieux qu’il fallait accorder aux différents outils de dialogue à définir entre les différentes parties du projet (MOA/MOE)
  3. Point n°3 : enfin, bien évidemment, ne pas négliger les trois fondamentaux du design qu’il faudrait apporter à chaque objet pour soit utile, utilisable et désirable.

 

Webographie

Partager :

Design de Services et Innovation – Sylvie Dalmau / Suzanne Kan

Partager :

Souvenez-vous, le 22 novembre dernier, Fabienne Schouler a réussi à s’échapper quelques heures de sa fonction de Design Lead au Technocentre Orange Labs pour venir nous parler de sa vision du Design de Service.

Avant de parler de design de service, il faut déjà comprendre ce que c’est que le design tout court.. Le très officiel CISDI – Conseil International des Sociétés de Design Industriel nous donne la définition officielle :

 » Le design est une activité créatrice qui consiste à déterminer les propriétés formelles des objets que l’on veut produire industriellement »

Le designer n’est pas un artiste, mais celui qui va rendre un objet à la fois Utile, Utilisable, et Désirable.

C’est en se basant sur ces 3 piliers que le designer va permettre à l’utilisateur d’un service de fluidifier son parcours de sauts d’obstacles lors de l’utilisation d’un service : c’est « l’organisation des informations et des situations afin d’en augmenter l’efficacité, la perception et la qualité ».

Ce que nous proposait donc Fabienne Schouler, c’était d’ouvrir nos chakras et de comprendre qu’une réflexion poussée sur le design d’un service amène à une méthodologie de conception User-Centric. Cette démarche globale va permettre de :

  • Comprendre l’utilisateur de façon globale, l’individu avec ses différentes facettes
  • Trouver de nouvelles opportunités, les comprendre
  • Créer des scénarios adaptés en fonction du contexte et des utilisateurs
  • Co-créer des solutions (intelligence collective)
  • Obtenir des retours d’expérience

Souvenez-vous, notre grande prêtresse du design nous a ensuite longuement parlé du processus dit du Double Diamant, grâce auquel nous pouvons mieux articuler la démarche globale de définition du problème.

Processus du double Diamant

Le Double diamant décrit les 4 phases du processus de conception : découvrir, définir, développer et livrer.

1. Découvrir : Aaaaaaah, c’est la phase de l’inspiration ! L’idée est arrivée, le besoin s’est fait sentir, alors, dans la pratique, il s’agit de :

• Définir le périmètre et clarifier les objectifs
• Souligner le contexte (veille, tendances, études de marché …)
• Dessiner les portraits d’utilisateurs à travers les personnas et en les segmentant*
• Rassembler les cas d’usage : mise en lumière des besoins, des circonstances d’utilisations….

2. Définir : Après avoir bien brainstormé sur les 5W (Who What Why How When), on passe à du concret.
L’écriture des scénaris : aux cas d’usages, on a ajouté et identifié les problèmes potentiels et la création d’expériences idéales
• La définition de la vision : C’est le moment de « converger »! On met sur la table ce que l’on a , ce que l’on peut, et ce que l’on veut.

3. Développer : Enfin, là on s’éclate! On va enfin pouvoir s’amuser à étaler nos compétences techniques et notre créativité :
• Les tests
• Les story boards
• Le Graphic design….

4. Livrer : Là, on stresse : c’est la Deadline! Bon, peut-être un peu moins si on a utilisé le cycle en V qui consiste à faire plusieurs ping-pong (tests / retours). Quoique….

Phase Aval Double Diamant
Phase Aval Double Diamant

 

Pfffiou…..

Allez, dans le prochain épisode, on vous parlera justement de celui qui nous fait tant suer : l’utilisateur, ou comment le caricaturer par un personnae et l’enfermer dan un segment….

 

Infographie - source http://uxplus.pl
Infographie - source http://uxplus.pl

Partager :