methodo

Méthodologie

MALABAR DESIGN SOMMAIRE 2. Méthodologie (création de site)1. Evolution de l’agence a) UX design b) Responsive designa) Positionnement et image c) Mobile firstb) Methodo et solutions d) Conclusion

Evolution de l’agence

MALABAR DESIGNPositionnement et image Depuis 2012, nous avons choisi de nous positionner clairement sur le marché des agences de communication digital pure player. L’ambition est d’être perçus à terme comme des concurrents d’agences comme 5ème Gauche, Uzik, Big Youth, Digital Lab… Pour être identifiés comme tels, nous avons entrepris la refonte de notre identité et des supports de communication de l’agence (site web, plaquette, book…) Nous communiquons dans des supports référents sur le marché / sur des salons Objectifs > Etre crédible sur un marché très concurrentiel > Etre davantage consultés (AO-Compétition) > Accroître la notoriété de l’agence > Nuancer la part de CA des principaux clients de l’agence dans le CA global > Construire demain

MALABAR DESIGNPositionnement et image Le re-positionnement de l’agence vise à répondre à des projets plus conséquents que ce que l’on a connu. Ces projets doivent permettre d’inclure toute la chaîne de valeur Malabar, du conseil jusqu’au développement. L’idée est donc de capitaliser sur les différents savoir-faire de l’agence pour créer des projets à forte valeur ajoutée. Le recrutement de CDP-Dev-DA senior-Dir conseil a été réalisé dans cette logique de « montée en compétences ». Objectifs > Structurer une équipe aux profils complémentaires et digitaux > Assurer des recommandations stratégiques pertinentes > Gagner des appels d’offres > Permettre un accompagnement optimal > Maîtriser les délais et les coûts

MALABAR DESIGNMéthodo et solutions > Pour conforter son positionnement d’agence 100% digital, Malabar a créé Optin Manager, désigné et développé par ses équipes. Cette solution nous positionne sur le marché du e-marketing et doit nous permettre de capter des projets plus conséquents chez les annonceurs. > Pour nous démarquer des « petites agences », nous mettons l’accent sur l’aspect méthodologie et process liés à la création d’interface digitales. Cette aspect méthodo doit nous permettre d’être considérés comme « experts ». C’est un levier différenciant qui fait ses preuves lors des AO. Objectifs > Faire parler de l’agence et de ses solutions > Renforcer l’ADN digital de Malabar > Enrichir notre offre > Monter en exigence et en qualité

MALABAR DESIGNMéthodo et solutions Les méthodes initiées à l’agence doivent permettre > D’optimiser les process sur la base de notre expérience projet (éviter de partir d’une page blanche à chaque nouveau projet) > L’harmonisation des méthodes de développement (Bernay/Paris) > De garantir la rentabilité des projets en maîtrisant les délais et la qualité > D’être en phase avec l’évolution des usages du web > De créer des dispositifs INNOVANTS et CREATIFS

UX design

MALABAR DESIGN Principe> Penser le site comme un produit qui répond aux attentes, aux objectifs, aux tâches des utilisateurs> Placer l’expérience de l’utilisateur au centre du process de création, au centre de notre réflexion Avantages> Concilier la stratégie client et les attentes des utilisateurs> Permettre un design compréhensible, utile> Développer des solutions pérennes> Réduire les allers-retours au court du projet RéférencesSylvie Daumal, Design d’expérience utilisateur, Édition Eyrolles

1. Méthodologie > ÉtapesMALABAR DESIGNEtapes123 4 5 Recherche Concept Prototypage Design DéveloppementDéfinition de la stratégie Périmètre du projet Réalisation de prototypes Direction Développement Recherche sur les Fonctionnalités Phase de test artistique Front end et utilisateurs Arborescence du site back end Contenu Inventaire du contenu

MALABAR DESIGNEntretien et tests utilisateur mis en placeIls sont réalisés auprès de personnes représentatives des cibles déterminées en amont. EntretienSont recueillies :> Des infos civiles.> Des infos liées aux habitudes web, matériel, aux objectifs et attentes.Ils permettent de dresser des personas. Tri de carteCes tests sont réalisés lors de l’organisation / hiérarchisation des contenus. Parcours utilisateurTests réalisés à partir des zonings. 3 participants.

MALABAR DESIGNLeviers d’optimisation Les personasIls doivent être un élément référent lors de la réflexion sur les zonings et lors de la DAIl faut les afficher en salle de réunion, les consulter régulièrement. Permettent d’incarner l’utilisateur pourlequel on travaille. Le six-to-oneIntérêt de mettre en place cette méthodologie au début du prototypage : sur la home et 1 ou 2 pages clé.Participants : CDP et DAA l’avenir on pourra proposer cet exercice au commanditaire, ce qui permet de l’impliquer dans cetteréflexion.Principe : dans un premier temps, il s’agit de dessiner 6 versions d’une interface dans un temps limité, puisune version plus détaillée reprenant les solutions précédentes les plus réussies.

Responsive design

MALABAR DESIGN RéférencesResponsive web design, Ethan Marcotte, Édition EyrollesIntégration web, les bonnes pratiques, Corinne Schillinger, Édition Eyrolles

MALABAR DESIGN Exemples / concurrence5ème gauche / Bulgari3 points de bascule, nombreuses animations au scroll. Megadrops / menu mobile (2 niveaux) comprenantdes pushs…

MALABAR DESIGN Exemples / concurrenceNealite / liberation.frDeux points de bascule, liquide.

MALABAR DESIGN Exemples / concurrenceUzik / arte.tv 3 points de points de bascule, liquide. Gestion du footer

MALABAR DESIGN Exemples : nos dernières référencesAntares, Kaliti, DADAbbVie : DA, 3 mises en page.

MALABAR DESIGN Étapes / aspects RWD12345 Recherche Concept Prototypage Design DéveloppementInventaire du contenu Périmètre du projet : Dans axure, uniquement Définition avec les dev : Liquide, 2 points de version mobile et desk • des points de bascule bascule. Arborescence commune, • largeur des maquettes fonctionnalités et Utilisation de framework contenu similaire Versions mobile et desk + Les différences doivent home / nav / gabarits de être minimes, pages secondaires sinon  version mobile

MALABAR DESIGN A clarifier : les points de basculePasser à 2 points de bascule (exemple de Nealite pour BNP Paribas ci-dessous)Quels sont les 2 points de bascule qu’on définit comme standard ?Quelles largeurs standard choisit-on pour les maquettes ?

MALABAR DESIGN A clarifier : imagesPrise en compte des problématiques et des solutions liées aux images (photos, pictos, bouton…) pour lesgrandes résolutions, les écrans retina.> format svg> les typos icônes> css3> media queries> poids des images pleine largeur optimisé pour les grandes résolutions> balise canvasRéférence / articlehttp://adaptive-images.com/http://www.filamentgroup.com/lab/compressive-images.html

MALABAR DESIGN A clarifier : typos et lisibilité> utilisation des unités rems (les unités rems sont relatives à l’élément, et non à un parent,ce qui est le cas de l’unité em)> la longueur optimale des lignes (50 à 75 caractères par ligne pour une bonne lisibilité)> spécification multi colonnes css3 pour les blocs de texte. Permet de gérer la longueur deslignes et donc la lisibilité du texte.Articlehttp://www.scopart.fr/blog/2012/12/guide-typographie-responsive/ @media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }

MALABAR DESIGNFramework CSS responsive design Nécessité d’uniformiser nos méthodo : quel framework utiliser ?> Bootstrap > Foundation > Skeleton > Web starter kit >…> Gumby > inuit css > knacssCela entraine-t-il des conséquences sur notre façon actuelle de travailler au niveau des zonings et de la DA ?Articleshttp://responsive.vermilion.com/compare.phphttp://www.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/http://blog.nicolashachet.com/ergonomie-design/les-frameworks-css-responsive-design/

Mobile first

MALABAR DESIGN PrincipeLe mobile doit être le point de départ de notre réflexion sur : > les contenus / arborescence / fonctionnalités > les zonings > le design > le devIl faut d’abord penser la navigation, l’ergonomie et les contenus pour lemobile, pour ensuite les adapter aux plus grands supports. Avantages> Prioriser les objectifs du site> Construire une véritable expérience mobile (c’est à dire, dans un premier temps, fluide,agréable)> Réduire le temps de chargement : 1ère cause du taux de rebond

MALABAR DESIGN RéférenceMobile first, Luke Wroblewski, Édition Eyrolles

MALABAR DESIGN Temps de chargementIl est recommandé d’avoir un temps de chargement < 2 secondesCritère important demandé par google.Outils pour tester le temps de chargement :> Google page speed  https://developers.google.com/speed/pagespeed/> GT Metrix  http://gtmetrix.com/LE TEMPS DE CHARGEMENT EST PLUS IMPORTANT QUE LE DESIGN OU L’ERGONOMIE. S’il est trop long, le user quitte le site et ne revient généralement pas.

MALABAR DESIGN Exemples / concurrenceAgence Poignée de main virile / Nantes - BordeauxRéférence : new jumo concept

MALABAR DESIGN Exemples / concurrenceAnne !

MALABAR DESIGN Étapes / aspects Mobile first12 34 5Recherche Concept Prototypage Design DéveloppementInventaire du contenu Périmètre du projet Réalisation du proto Design de la mise en Mobile first : Fonctionnalités mobile en premier, puis page mobile, puis amélioration progressive Arborescence test user. déclinaison. vers la version desk. Contenu Déclinaison des protos pour tablette et desk. Utilisation de framework  la méthodologie Test user. mobile first permet de prioriser, de clarifier le propos.

MALABAR DESIGN Bench et planche tendanceA réaliser avant les zonings, une fois le contenu défini.Ces documents doivent comprendre les versions mobiles des sites qui retiennent notre attention.Doivent mettre en évidence des systèmes de navigation, de transitions. Comment les actions effectuéespar le user sont traduites  état on tap pendant chargement de la page, loader…

MALABAR DESIGN ProtoRéalisation des protos en collaboration avec les DA. Commencer par la version mobile.Pratiquer la méthodo du 6 to 1.Anticiper dès le départ les aspects animation, loader...

MALABAR DESIGN DAPour toute animation, tout effet, les maquettes doivent être accompagnées des références de site dont onveut s’inspirer.Travail à faire dès la maquette de la home + navigation.Livrables DA aux dev> Charte ui> Charte graphique> PSD> doc spec animation / transition / effet + référence de siteLivrables CDP aux dev> périmètre technique> spec fonctionnelles

MALABAR DESIGN DEV : Amélioration vs dégradation progressiveAvec le « mobile first », il s’agit de prendre pour base une version « légère » et enrichir son contenu pourles écrans plus grands.Au lieu de déclarer les règles et le contenu qui valent pour les grands écrans et les annuler ensuite pourles écrans de moindre taille, on se contente d’appeler le stricte nécessaire (notamment les images) pourchaque type d’écran selon un ordre ascendant, via des règles d’affichage conditionnelles.Toute une partie du code se déclenche de manière conditionnelle, avec également la possibilité d’enlaisser côté serveur. La performance du site est ainsi adaptée au type de support de consultation, au mêmetitre que le design.http://wdfriday.com/blog/2012/03/css-et-mobile-first-proceder-par-amelioration-progressive/

MALABAR DESIGN DEV : Framework mobile first http://getbootstrap.com/ http://foundation.zurb.com/A priori : http://cardinalcss.com/> Bootstrap> FoundationAussi> Cardinal

Conclusion

MALABAR DESIGN RéunionRéunion / discussion en cours de projet entre les différents pôles.Validation des maquettes par les dev avant livraison au client, etc.Il faut qu’il y ait un rapprochement entre dev et da. Capitalisation des expertisesFaire des compte-rendu sur les problèmes rencontrés et comment ils ont été résolus lors des précédentsprojets.

MALABAR DESIGN VeilleNécessité de faire une veille au jour le jour sur les sites qui proposent des expériences mobiles intéressantes+ RWD ou autre.Cette veille peut être raccroché au blog : référence, 3 lignes expliquant ce qui est trouvé intéressant,captures.> CDP > DA > DEV

MALABAR DESIGN DEVObjet du workshop et des tâches à venir pour les développeurs  optimisation des process> choix d’un framework commun> lister les points problématiques qu’on a rencontrés au cours des derniers projets(images, typos, animation, temps de chargement, aspect des pages à l’affichage, stabilité des élémentsgérés en js sur les différents devices / navigateurs, autre…) livraison d’un doc référent (process à suivre pour tous les points soulevés)> relire et voir comment optimiser les doc présents sur gdrive et à l’intention des dev pour DAD et AbbVie. Compléter les doc « spec techniques » et « spec fonctionnelles »> définir un cadre de recettagemodern.iehttp://www.browserstack.com/Sur quel matériel le recettage est fait côté dev / côté cdp-da

MALABAR DESIGN 1 2 3 4 5 Prototypage Recherche Concept Design Développement BenchDéfinition de la stratégie Périmètre du projet : Planche tendance (?) Définition avec les dev : Liquide, 2 points deRWD ? Protos mobile • des points de bascule bascule si RWD.Site mobile ? Arborescence Test user parcours • largeur des maquettes Utilisation de framework… Test user : tri de carte Protos desk Test user parcours Version mobile Recettage côté dev surRecherche sur les user : Contenu page par page, Version desk tout support à listerdéfinition des cibles réécritue SEO Compte rendu des tests + Protos version tablette home / Recettage DA / CDP :Inventaire du contenu Fonctionnalités Bench nav / gabarits de pages mantis(stat, doc, …) Planche tendance secondaires Création des personas Outil stat Redirection, … MELLivrables > Cahier des charges PSD Notice admin technique, fonctionnel Charte ui Conformité w3c CR tri de carte Charte graphique Persona Doc Animation Arborescence /transition /effet Contenus édito