UX / site manager Simon White, 23/05/2011 revu 05/04/2012

Vision d’origine partagé avec JFO implementé en partie

Axes amélioration process : UX <-> VSCT de 2009 Intégrer intelligemment les acteurs IHM Etablir une voie de communication avec les architectes IHM. Leur appréciation de certaines demandes permet d’articuler le design sur une voie moins coûteuse mais tout aussi efficace. Les développeurs IHM sont une mine de créativité technique – notamment sur l’interactivité - aujourd’hui sous exploitée. Fluidifier les process lourds Lutter contre l’actuelle volonté d’avoir les maquettes finies pour l’ensemble des états de pages; le premier jalon a déjà été posé – la généralisation de l’outil Axure. Accompagner un processus de design « agile » avec itérations combinant design graphique et design interactif au fil des devs (cf. bench Darwin à Levallois) Embarquer la recette utilisateur en amont pour apprécier l’esprit d’une nouvelle interface à travers le processus de design et non avec des maquettes à plat Travailler ensemble sur une vision CMS La gestion de contenu n’a rien à voir avec l’outil. Tout est à voir avec le discours qu’on veut porter sur le site, et l’industrialisation du contenu pour animer le site de façon efficace, friendly et humain. implementé en partie

Loveteam / qualité + UX Site Management : prendre « ownership » des sujets de petites évolutions souvent appelés « quick win » Assurer une cohérence dans l’ensemble des modifications Gérer un site map, proposer une élagage et mise en cohérence de la navigation transverse Planifier mieux les interventions UX et améliorer la visibilité de l’état des demandes Assurer le respect des référentiels (charte graphique, charte accessibilité, best practices UX en place, charte iconographique) Centraliser le savoir & formaliser les annonces de MEP Remonter les informations de modifications de façon structuré en reporting hebdomadaire Suivre les évolutions et leur impact sur l’expérience client Exemple 1 : mise en place de bouton « acheter un billet de train » dans le compte client => augmentation direct de nombre de réservations par clients connectés Exemple 2 : rajout d’un lien « modifier d’autres critères » dans la zapette en page de proposition => 70.000 clics/jours => Réduction de clients insatisfaits « je dois tout reprendre depuis le début » Créer un lien fort avec la recette

Le Zone du Muret Casser le muret IHM Fonc UX Marque Suivi de prod Zone Équipes multi-disciplinaires, nouvelle organisation d’espace ? (exemple: Bench Darwin) Zone « muret » Casser le muret

Idées et Instances pour mise en place Rôle site manager à créer (cf. orga déjà discuté) UX / Design day à planifier avant grandes vacances. Ateliers & présentations en cours d’élaboration. Audience : key players VSC / VSCT Création d’une espace design / salle de réu polyvalente avec disposition chaises / écran / whiteboard plus propice aux sessions « design collaboratif » Recentrer la méthodologie design. Avec une équipe correctement staffé et la notion de site manager on est aptes à pouvoir bien faire avancer Takehomes Design methodology saves money and improves results AB testing & usability testing will become a focus Better planning for the team will increase productivity Better centralisation of change requests & mockups / prototypes will help us move forward

SCHEMA directeur structure équipe Customer Experience Concept Delivery Connaissance client, Etudes (+ Recherche Innovation) IHM UX Design Visual Design Site Management Architecture d’Information Direction Artistique Edito Ergonomie Design d’Interaction Planning Stratégique Tactique

SCHEMA directeur structure équipe Customer Experience Concept Delivery Connaissance client, Etudes (+ Recherche Innovation) IHM UX Design Visual Design Site Management David Serrault Fabien Quinaud Site Manager (à recruter) CDI Ergonome (à recruter) CDI Graphiste (à recruter) Chef de projet graphique jnr (à recruter) Stratégique Tactique + Budget prestataires (mobile notamment) et débordement graphique + Budget études (web analytics, testing)

D’une presentation studio

Organisation studio Marketing Stratégique UX & Design Contenu Concepts Co-écriture Concepts Édito & Ton Image Marque UX & Design Architecte Information Ergonomie Designer d’Interaction / DA Graphiste CDI Stagiaire + Freelances / Prestas / Agences spécialisés

Promesses Assurer la cohérence de nos graphismes vis-à-vis de la charte Challenger les couts et les créations agence Permettre aux équipes marketing une plus grande souplesse de travail et donc une meilleure réactivité. Elargir le champs d’action et la créativité graphique Savoir déborder chez les ressources externes au besoin pour soutenir ces promesses Travailler avec le marketing stratégique pour améliorer la rédaction des briefs

Process d’une créa site Input business + Charte Web + Calendrier merch Concept Business sponsor ou merch manager (et agences) Rédaction Brief Besoin accompagnement projet? Correction brief & soumission créa Basecamp Retour User Ex Validé business sponsor Intégration HTML Version / Suivi Prod Publication User testing / pistes alternatives externes

Normes de création Utilisation de Photoshop CS4 ou CS5 pour la création de maquettes graphiques Respect de la charte sans rentrer les éléments à la chausse-pied – de nouveaux contextes / nouveaux éléments graphiques et design à valider avec le DA Concepts approuvés en amont; créas « master » approuvés par DA en v1 et visés en version définitive; déclinaisons à gérer par l’équipe marketing sans besoin de chaîne de validation longue. Brief en amont très important : le processus de création de briefs est à optimiser. Pas de livraison graphique avant brief clair avec wordings quasi définitives. La réactivité du studio pour faire beaucoup d’itérations ne doit pas se substituer aux manquements d’un brief paresseux !

D’une presentation UX

Qu’est-ce que l’experience utilisateur ? L’expérience utilisateur représente la qualité d’une expérience globale perçue par une personne (utilisateur) qui interagit avec un système. Cette expérience d’un produit/service/interface se fait sur une relation durable et donc globale car elle tient compte de TOUS les moments d’utilisation, avant/pendant/après l’acte d’achat : la prise de conscience, la découverte, la commande, l’achat, l’installation, le service, le support, l’évolution, la fin d’utilisation… http://www.use-design.com/fr/design/experience_utilisateur.php L’équipe est un maillage de plusieurs disciplines & expertises. Les prochaines slides listent les disciplines suivi d’un maillage équipe. Une bonne expérience utilisateur ne laisse pas de trace en mémoire

Architecte de l’information Un constat : avec le grossissement des sites Web, l'augmentation de la quantité d'information qu'ils contiennent, et la complexification des techniques, il est devenu clair que concevoir un site Web efficace échappe à la compétence des seuls techniciens ou graphistes. Un chaînon manquant apparaît, à l'intersection de La production de contenu (compétences éditoriales) et La mise en oeuvre technique et graphique (compétences informatiques et design). Ce chaînon manquant, c'est l'architecte de l'information. http://www.figoblog.org/document195.php

Ergonome Multidisciplinaire, l'ergonomie prend sa source aussi bien dans le domaine de la médecine qu'en psychologie, en sociologie ou en linguistique (sciences cognitives) . Ce qui fait la spécificité de l'ergonomie est son objectif, à savoir : Modifier les outils pour qu'ils soient plus adaptés à leurs utilisateurs. Le travail de l'ergonome sera guidé par l'idée de concevoir pour un cible : le plus grand nombre d'utilisateurs, ou pour un groupe d'utilisateurs donné avec des caractéristiques propres. Au-delà de cette définition générale, on peut distinguer plusieurs types de questions en ergonomie. ergonomie physique (adaptation de l'outil aux caractéristiques physiologiques et morphologiques de l'être humain ou d'une certaine population), ergonomie organisationnelle (organisation du travail collectif ou individuel - prévenir les difficulté d’adaptation, les erreur, les incidents) ergonomie cognitive (adaptation des outils au fonctionnement cognitif ou représentations mentales des utilisateurs). http://www.ergolab.net/articles/ergonomie-informatique.php

Designer graphique D’interaction Avec de bonnes notions de design et graphisme, le rôle du designer graphique va au-delà du simple créateur de maquette : il est influencé par l’architecture de l’information et l’ergonomie (d’où « design d’interaction »). Il emprunte de la direction artistique, applique les principes d’une charte graphique, mais travaille également de pair avec les autres disciplines d’expérience utilisateur. La spécificité du « designer d’interaction » est sa capacité non seulement à faire preuve de créativité mais aussi à porter une attention particulière à l’usager et au client, à appréhender son expérience, à prendre en compte ses besoins et à s’assurer de la bonne prise en main des outils numériques qui lui sont destinés « Les metiers du design numérique 2009 » Designers Interactifs p.9 A noter qu'en francophonie, le terme web design est souvent utilisé à contre-sens de son acception initiale et confondu avec la seule création graphique. Or ce qui le définit n'est pas tant l'expression visuelle et/ou artistique que la formalisation de l'interaction dans la page-écran. http://fr.wikipedia.org/wiki/Web_design

Maillage équipe ARCHITECTE D’INFORMATION Le rôle leader au niveau du design est en l’occurrence l’architecte de l’information, mais ce titre s’allie à plusieurs autre disciplines : directeur artistique interactif directeur de création C’est-à-dire qu’il définit ou collabore au niveau de la méthodologie, la planification; prévoit les interventions en amont, co-définit et maintient la stratégie design, et porte une expertise métier voyage DESIGNER GRAPHIQUE D’INTERACTION Gardien et référent de la charte graphique, il aide son évolution en collaboration avec les interlocuteurs marque. Il s’allie également aux disciplines croisés avec l’architecte de l’information : designer d’interaction

Maillage équipe II CONSULTANT ERGONOME Actuellement (et historiquement) un rôle d’expert en prestation, qui apporte un bénéfice d’expérience dans divers disciplines et travaille de pair avec l’architecte de l’information & le designer d’interaction L’ergonome étudie en détail les cinématiques, a une affinité forte avec l’architecte de l’information, et se repose surtout sur l’adaptation des interfaces aux attentes utilisateurs et propose des méthodologies de test INTERACTIONS / TEMPORALITE Contenu + Concept (formalisé dans un brief) Outputs Architecte de l’information Wireframe Ergonome Wireframe interactif Designer d’interaction Design final temps

Profil : responsable EXPERIENCE UTILISATEUR Métier Assurer la responsabilité du Pôle Expérience Utilisateur Organisation Responsabilité fonctionnelle de l’effectif du Pôle UX & Design Encadrement direct de l’architecte de l’information, le designer graphique et l’ergonome Travail en relation avec les acteurs tiers / définition des relations dans le Pôle avec les acteurs tiers Activités exercées Assiste aux kick off projets avec modules expérience utilisateur; filtre les demandes Chiffrage macro de ressources requises puis Allocation de ressources en fonction d’expertise requise Suit l’ensemble des projets expérience utilisateur aux COPIL, Go/NoGo et autres Communique les méthodologies « design centré utilisateur » aux acteurs de projets Aptitudes Bon relationnel Bonne capacité à communiquer et à négocier Esprit critique et esprit de proposition d’amélioration Bonne capacité à travailler en équipe (obligatoire) Bonne capacité à s’engager et à s’impliquer (obligatoire) Prêt à se battre pour communiquer sur sa discipline et avoir de l’adhérence transverse Compétences Bonne capacité à diriger une équipe et à évaluer ses performances (obligatoire) Management de projets (obligatoire) Connaissance méthodologique et outils de design (Outils de wireframing & design graphique) Bonne connaissance de technologies web « front office » (HTML, CSS, Javascript) et techniques d’interactivité (AJAX, Flash, etc) par rapport à leur application en projets de design web Compétences en analyse web et testing A/B et multivarié Expérience souhaitée Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande

Profil : ARCHITECTE DE L’INFORMATION Métier Assurer l’organisation de l’information dans les pages / gabarits / squelettes d’écran Organisation Dépend du responsable de l’expérience utilisateur Travail en relation avec les acteurs tiers / avec le designer graphique et l’ergonome Activités exercées Récolte les inputs projet (brief, expression de besoins) Fait de la veille sur l’état du métier, identifie des méthodologies design, benchmarks Aptitudes Prend en compte les aspects, marketing, l’identité de marque, la communication, la sémantique, le design visuel, les profils utilisateurs, l’ergonomie et la technologie. Traduit le comportement des utilisateurs en solutions de conception et formalise de manière conceptuelle et schématique des livrables tels que l’arborescence, le story-board ou encore les scénarios d’usage. Définit et défend les principes design Compétences Connaissance méthodologique et outils de design (Outils de wireframing & design graphique) Bonne connaissance de technologies web « front office » (HTML, CSS, Javascript) et techniques d’interactivité (AJAX, Flash, etc) par rapport à leur application en projets de design web Expérience souhaitée Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande

Profil : DESIGNER GRAPHIQUE D’INTERACTION Métier Assurer le respect des principes design (charte graphique) et la création de maquettes d’interface « haute def » Organisation Dépend du responsable de l’expérience utilisateur Travail en relation avec les acteurs tiers / avec l’architecte de l’information et l’ergonome Activités exercées Récolte les inputs projet (brief, expression de besoins) Fait de la veille sur l’état du métier, identifie des tendances design Fait de la création d’éléments de nouveaux projets de fonctionnalité (maquettes, croquis) et supervise le courant graphique VSC Aptitudes Il collabore avec une variété d’intervenants : des concepteurs-rédacteurs, des architectes de l’information, des chefs de produit et merchandising et des développeurs IHM. Il définit les orientations graphiques structurantes et la direction artistique pour les autres designers, les collaborateurs juniors, indépendants et stagiaires sur tous les projets. Il s’assure que l’équipe projet utilise les méthodes de travail pertinentes et les meilleurs outils afin d’être compétitive. Il aide à planifier la production des équipes et à améliorer le processus de création. Il répartit dans l’équipe les différentes tâches de production. Il s’appuie sur l’équipe pour décliner le design visuel, le contenu, l’interface graphique et la structure des sites, les campagnes interactives et les autres types de projets interactifs. Il fait la promotion du design auprès des autres collaborateurs de la société, leur montre les bénéfices de la discipline et la charte graphique Collabore étroitement avec les équipes marketing, les chefs de produit et l’ingénierie afin de définir le positionnement d’un produit. Il œuvre pour une traduction visuelle en adéquation avec les objectifs de l’expérience utilisateur Compétences Connaissance méthodologique et outils de design (Outils de wireframing & design graphique notamment Photoshop, Illustrator) Bonne connaissance avec techniques d’interactivité (cinématiques) pour décliner les états de pages Expérience souhaitée Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande

Profil : CONSULTANT ERGONOME Métier Assurer le respect des principes design (charte graphique) et la création de maquettes d’interface « haute def » Organisation Dépend du responsable de l’expérience utilisateur Travail en relation avec les acteurs tiers / avec l’architecte de l’information et le designer graphique Activités exercées Récolte les inputs projet (brief, expression de besoins) Fait de la veille sur l’état du métier, identifie des tendances ergonmiques qui sont d’usage pour le marché cible Aptitudes Le consultant ergonome fait circuler l’information et notamment rend compte aux personnes participant au projet des travaux menés en termes d'utilisabilité pour en assurer la réussite. Il se charge de la formation des équipes en ergonomie, les initie à la discipline afin qu’ils en comprennent la pratique et les bénéfices. Il traduit les spécifications du produit en documents de travail (sous Axure) utilisables par l’équipe de développeurs. Il s’assure avec le designer graphique que la partie visible de l'interface est facile à utiliser et cohérente. Il vérifie avec les rédacteurs que tous les libellés (navigation, bouton et étiquettes des champs) sont clairs, concis et facilement utilisables. Il s’assure que les point critiques de l’expérience utilisateur de l’application sont identifiés et communiqués à la direction de projet. Enfin, il défend la démarche de recherche utilisateur et contribue à faire reconnaître la valeur de la conception centrée utilisateur Compétences Connaissances des processus cognitiifs Connaissance méthodologique et outils de design (Outils de wireframing notamment Axure) Connaissance de méthodes de testing (card sorting, tests quali, etc) Expérience souhaitée Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande