UX / SITE MANAGER Simon White, 23/05/2011 revu 05/04/2012 1.

UX / SITE MANAGER

Simon White, 23/05/2011

revu 05/04/2012

1

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.

3

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

4

LE ZONE DU MURET

IHM• Suivi de prod

Marque

FoncUX

5

Zone « muret »

Casser le muret

Équipes multi-disciplinaires, nouvelle organisation d’espace ? (exemple: Bench Darwin)

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

6

SCHEMA DIRECTEUR STRUCTURE ÉQUIPE

7

UX Design Visual DesignSite

Management

Architecture d’Information

Ergonomie

Direction Artistique

Design d’Interaction

Edito

Planning

Con

nais

sanc

e cl

ient

, Etu

des

(+ R

eche

rche

Inno

vatio

n)

IHM

Customer Experience

Stratégique Tactique

DeliveryConcept

SCHEMA DIRECTEUR STRUCTURE ÉQUIPE

8

UX Design Visual DesignSite

Management

David Serrault

CDI Ergonome (à

recruter)

Fabien Quinaud

CDI Graphiste (à recruter)

Site Manager (à recruter)

Chef de projet graphique jnr (à recruter)C

onna

issa

nce

clie

nt, E

tude

s(+

Rec

herc

he In

nova

tion)

IHM

Customer Experience

Stratégique Tactique

DeliveryConcept

+ Budget prestataires (mobile notamment) et débordement graphique+ Budget études (web analytics, testing)

D’UNE PRESENTATION STUDIO

9

Co-écriture

Ergonomie

ORGANISATION STUDIO

10

Marketing Stratégique

UX & Design

Contenu Concepts

Architecte Information Designer d’Interaction / DA

Graphiste CDI

Stagiaire

+ Freelances / Prestas / Agences spécialisés

Image M

arqueÉdito

& To

n

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

11

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

PROCESS D’UNE CRÉA SITE

User testing / pistes alternatives externes

Input business + Charte Web

+ Calendrier merch

NORMES DE CRÉATION

13

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

14

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

15

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

16

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

17

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_design18

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 :– directeur artistique interactif– designer d’interaction

19

MAILLAGE ÉQUIPE IICONSULTANT 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

20

Architecte de l’information

Ergonome

Designer d’interaction

Contenu + Concept (formalisé dans un brief)

temps

Outputs

Wireframe

Wireframe interactif

Design final

PROFIL : RESPONSABLE EXPERIENCE UTILISATEURMé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

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 : ARCHITECTE DE L’INFORMATION

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 : 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 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

PROFIL : CONSULTANT ERGONOME