Département Information-Communication Licence 3. Communication visuelle Université Nice Sophia-Antipolis Année 2013-2014 Mme Nota
Remerciements
Je souhaite avant tout remercier, Jérôme Lescure, le fondateur de la start-up Liganz , pour m’avoir accepté au sein de l’entreprise. Je remercie également toute l’équipe pour leur accueil chaleureux : Isabelle Maneau, Marion Malec, Julie Consognove, Arnaud Martin et Sebastien Koubar. J’ai beaucoup apprécié travailler au sein de cette petite équipe très soudée, toujours dynamique et de bonne humeur. Durant le stage, nos échanges professionnels et personnels ont été très enrichissants. Le projet venant d’éclore nous avons dû redoubler d’efforts, les uns des autres, pour obtenir des résultats satisfaisants. Jérôme et le reste de l’équipe a su me faire confiance pour gérer l’ensemble des visuels de Liganz.
Aujourd’hui, les sciences de l’information et de la communication connaissent un développement exponentiel. Tous les moyens sont bons pour communiquer, et cette année fut pour moi un tournant professionnel: mon regard s’est porté plus spécifiquement sur la communication visuelle. J’ai choisi un stage en Infographie/Webdesign pour assurer mon futur dans cette voie. Il s’agissait donc de se confronter aux exigences du monde professionnel, de savoir gérer l’image d’une entreprise et enfin, d’acquérir les méthodes et les réflexes d’un bon webdesigner - infographiste. Lors de ce stage, j’ai pu travailler de façon autonome, toutefois Jérôme a pu m’apporter un grand nombre de ses conseils visuels. Cela m’a permis de progresser un maximum autant techniquement ; avec la maîtrise de nombreux logiciels, que graphiquement sur les notions de design. J’ai pu me constituer un réel bagage créatif.
Pourquoi ?...
L’entreprise Liganz a été pour moi une très bonne opportunité professionnelle. Parfaitement en accord avec mes attentes, faire mon stage au sein de cette entreprise fut un choix très pertinent et fructueux. En effet, la passion de son métier et de son environnement anime chacun des membres de l’équipe et assure à Liganz d’être toujours à la pointe en matière de nouveautés sur la mode. De plus, Liganz s’envisage comme un outil de mode, il est ce que l’on pourrait qualifier de«personal shopper», une technologie à l’affût de ce qui se fait de mieux. C’est pour cela que cette «petite» start-up a optimisé mon apprentissage et mon épanouissement professionnel. C’est avec un grand plaisir que j’ai pu apporter mon aide à ce projet ambitieux. Afin de produire un travail satisfaisant, j’ai dû m’imprégner de l’identité visuelle de l’entreprise. Voilà pourquoi j’ai occupé le poste d’infographiste/webdesigner durant 3 mois, sous la tutelle de Jérôme Lescure et en coopération avec le reste des membres.
Jérôme Lescure, Président Fondateur Ingénieur ESME Sudria et Ecole de commerce SKEMA. 15 ans d’expérience dont 8 ans à Dassault Systèmes dans l’ingénierie logicielle, les web-services et le marketing, et 7 ans dans l’entreprenariat de services. Isabelle Maneau, Co-Fondatrice Master Affaires et Management International de l’IAE. 12 ans d’expérience dans le commercial et la communication à l’Ecole Polytech Paris 6 (EPP6), puis dans le groupe international Single Buoy Moorings (SBM) à Monaco. Arnaud Martin, Ingénieur R&D Docteur informatique spécialisé en intelligence artificielle. Doctorat de l’IRIT Toulouse, 4 ans d’expérience en R&D dans l’Intelligence Artificielle. Marion Malec, Web Marketing Master International Marketing & Business Développent, Ecole de commerce SKEMA. 2 ans d’expérience dans la publicité et le web marketing au sein de l’agence Havas Wordlwide, puis dans le marketing du luxe dans le groupe LVMH. Clever Age, Equipe de Développeurs Conseil et réalisation de projets digitaux. Couvre les métiers d’architectes techniques ainsi que de maître d’oeuvre de projets digitaux. Isabelle Lescure, Chargée de répertorié les articles Isabelle s’occupe de définir un style pour chaque article, en fonction d’un détails, de la marque et pleins d’autre critères. Un travail conséquent étant donné les millions de produits figurant dans Liganz.
Les locaux : Situé dans le batiment Prenium, au coeur d’une pépinière d’entreprises implanté dans l’Eco-Vallée de Nice, chaque bureau partage ainsi son projet avec celui de son voisin, et lui apporte son soutien si besoin est. Une semaine type : Chaque semaine, Jérôme souhaitait s’entretenir avec moi afin de faire un bilan sur le travail effectué, mais aussi pour faire le point sur les projets à venir. J’ai pris un soin particulier à l’informer de l’évolution des sites. L’équipe se réunit une fois par semaine égalemment afin de brainstormer de se tenir au courant des avancées marketing, R&D, webdesign... Chacun est libre de s’exprimer, d’émettre son avis, un chose que j’ai particulièrement appréciée. Une journée type : Chaque matin, une fois que tout le monde arrive, l’équipe sert le café, check ses mails... Une fois tout le monde installé à son poste de travail, dans l’open space, on fait le point sur les projets en cours. Chacun exprime ses besoins pour accomplir ses tâches que ce soit en terme de temps ou de ressources. On se ré-organise, on s’adapte. On fait en sorte que la journée soit agréable pour tout le monde. Je termine les tâches de la veille, ou, je procède à une veille informationnelle sur les concurrents et les blogueuses. Savoir ce que font les autres et comprendre pourquoi, me semble primordial. Après cela, je vérifie avec les développeurs si tout va bien sur le site, puis j’assiste Marion et Julie pour la communication, afin de proposer des visuels de qualité pour les posts Facebook, Twitter et sur le Blog. C’est là que commence mon travail d’infographiste, une tâche de longue haleine qui requiert un certain sens d’adaptation. Il faut être débrouillard.
Mon rôle à l’agence
J’ai pu revêtir le rôle d’un véritable webdesigner/infographiste. Des missions créatives, de refonte d’interfaces, mais aussi la charge d’éléments graphiques (divers et variés) m’ont fréquemment été attribué. Il m’a fallu bien différencier la fonction d’un designer de celle d’un graphiste. J’ai pu faire cette distinction, en effet le web designer est chargé des visuels d’un site, en prenant en compte les contraintes du média Internet, tandis que l’infographiste créera des visuels pour tout type de support ( affiche, pub, blog, facebook...). Pour les créations d’évolution du site, j’élabore un premier jet visuel afin de faciliter la tâche de l’intégrateur web. Durant le stage, la constante relation que doit entretenir un infographiste avec le reste de l’équipe, cela en fonction des attraits de chacun et des missions à réaliser, m’a fortement marqué et satisfait. Après ce travail d’amont, il est préférable pour moi de m’isoler afin de passer à l’étape technique, plus sérieuse, et créative. J’attaquais donc le travail dit «sérieux», musique aux oreilles pour me concentrer sur mes calques.
Processus
Evolution et Développement du site : L’organisation dans l’agence est assez simple : une fois les objectifs définis, Jérôme énumère les tâches de chacun et organise le temps de travail pour définir une deadline. La proportion de cette équipe, plutôt jeune, a permis des échanges dynamiques et enrichissants. Communication et Marketing : Pour la partie Communication et Marketing, Jérôme intervient seulement pour valider les futures publications. Marion et Julie s’occupent de trouver un thème vestimentaire qu’Isabelle aggrémentera de vêtements et accessoires de son choix. Elles me transmettent enfin toutes les information par mails et pour le reste, je suis libre de disposer de façon design les éléments et de choisir un contour/cadre attractif et moderne pour la publication. Mes tâches individuelles : Pour chaque projet que je réalise indépendament, je décompose ma façon de travailler en 3 temps : - La phase de recherche: Elle consiste à s’imprégner du projet, analyser les consignes et les contraintes. Je visite des sites internet qui présentent les dernières nouveautés en terme de design, et d’outils pratiques pour l’infographie. Tout cela, afin d’avoir une base sur la façon d’aborder mon travail. J’effectue parfois des zonings, s’il s’agit de la homepage ou d’une pop-in, qui demande une réflexion plus profonde, quant à ses fonctionnalités. - La phase de conception: Je réalise des maquettes sur Photoshop que je soumets dans un premier temps à l’équipe, puis à Jérome. Ces dernières doivent donc être « propres », design et de qualité. Si durant le travail, moi ou un autre, avons une idée, je dois l’appliquer au projet. Après cela, Jérôme étudie et valide notre proposition pour enfin nous faire part de ses retours. - La phase de validation et finitions: Il s’agit de peaufiner les visuels car chaque détails comptent, et ces derniers doivent s’adapter aux retours de l’équipe. Une fois que tout est validé, je peux envoyer mes fichiers Psd aux développeurs pour qu’ils soient intégrés au site.
Principaux outils
Photoshop Ce logiciel de retouche, de traitement et de dessin, assisté par ordinateur, édité par Adobe est reconnu par les infographistes du monde. je l’ai utilisé quotidiennement durant mon stage.
InDesign C’est un logiciel de mise en pages ou dit de PAO, créé par la société Adobe en 1999. Il est utilisé pour créer des plaquettes et organiser des pages.
Illustrator C’est un logiciel de création graphique vectorielle. Il offre des outils de dessin vectoriel. Je l’ai souvent utilisé pour les logos des marques pour ne pas qu’elle perde en qualité.
Wordpress C’est un CMS, système de gestion de contenu libre utilisé pour administré des sites assez facilement. Je l’ai utilisé pour gérer le site info. liganz.com et le blog.
Github C’est un service web d’hébergement et de gestion de logiciels. Il permet le suivi de personnes ou de projets et les graphes de réseau pour les dépôts.
Dropbox Pour l’échange et le par- tage de documents nous utilisons DropBox ou Drive. Cela nous sert de point de sauvegarde pour les psd, images et documents.
Gmail Chaque collaborateur a sa propre adresse mail (@ liganz.com) synchronisée avec Gmail et chacun communique depuis celle-ci que ce soit en interne ou en externe.
Hangout C’est une plateforme de messagerie instantanée et de visioconférence. C’est l’outil que nous utilisons pour discuter en interne de tout et de rien, de façon officielle et officieuse.
PrtScr Ce logiciel facilite la capture d’écran personnalisée. Il permet des capture d’images stylées et à partager rapidement. Un outil simple, gratuit et original
J’ai abordé des thèmes et des missions très variées, allant de la refonte du site interne, à de la création visuelle pour la communication du site (Facebook, Blog…). J’ai aussi effectué de la gestion de CMS. Mes tâches, toutes plus différentes les unes des autres, m’ont pleinement épanoui. Très éclectique, les missions permettent la collaboration et combinent les compétences de chacun. Ainsi, chaque membre apporte sa pierre à l’édifice. La suite de ce rapport présente tous les travaux que j’ai crée et auxquels j’ai contribué.
Évolution et Optimisation design du site
Au delà de la possession d’un outil inédit, celui de personal shopper, Liganz souhaite aller plus loin dans sa fonction de «simple site de mode». L’équipe a donc imaginé un concept social, tout à fait innovant et inédit, permettant d’échanger des messages instantanés avec les différents users déjà inscrits et ayant adhérer à notre démarche. Bientôt, Liganz permettra aussi l’invitation et la gestion de ses amis, ainsi que le partage de notes et de commentaires sur les articles du site. Comme sur Facebook, les internautes pourront consulter les profils mode de leurs amis. À l’image des réseaux sociaux, on trouvera dans le site un système de notifications: lors de la paruption d’un nouveau produit par exemple, ou lorsque l’un des «ami» sera connecté, ou fraîchement inscrit. J’ai également proposé des refontes de la page d’accueil du site, pour qu’elle soit plus design. J’ai aussi rendu plus graphique et agréable certaines pop-in du site. En effet, ce genre de détails ergonomiques font la différence pour les utilisateurs et permettent au projet de s’inscrire dans le long terme.
Social Shopper Lors de leur 1ère connexion, les utilisateurs passent par 2 étapes clés avant de commencer leur shopping. La 1ère étant l’inscription par mail ou par Facebook. Ensuite, vient le test de style et l’utilisateur se voit soumettre des vêtements qu’il doit liker ou pas afin de définir son style ( Glamour, classique, rock, romantique...). L’utilisateur est aussi libre de personnifier son statut en insérant une photo de profil. La 3ème étape rentre dans la seconde partie de la Beta du site: le social shopping. Les utilisateurs peuvent rajouter leurs amis afin de partager cette expérience inédite, celle du shopping en ligne et à plusieurs! Pour le design du social shopping, j’ai mis en avant le système de notifications. Lors de l’étape d’inscription, j’incite aussi, visuellement, les utilisateurs à s’inscrire avec Facebook. Cela leur permettra de retrouver plus facilement leurs amis sur Liganz.
A la suite de cette 3ème étape, l’utilisateur a le choix entre 2 possibilités : -
Sauter l’inscription et commencer le shopping.
- S’inscrire via Facebook, et là se génère deux autres pop-in: - S’il n’a aucun ami sur Liganz: Inviter ses amis Facebook. - S’il connaît déjà des amis Facebook membres sur Liganz: Envoyer une invitation. A tout moment, l’utilisateur est libre de quitter la procédure et de commencer son shopping. J’ai designé ces pop-in en essayant de me mettre dans la peau du user, pour comprendre quelles fonctionnalités et quelles mécanismes utiliser. Mais surtout, imaginer toutes les possibilités de réactions d’un utilisateurs face à nos propositions, y compris les plus impromptus. Les invitations d’amis se retrouveront aussi dans la barre sociale sur la navigation du site. En effet, l’utilisateur pourra dés qu’il le souhaite «retrouvez ses amis», afin de partager l’expérience Liganz. Pour la 1ère fois, j’ai utilisé l’outil «composition de calques» sur Photoshop permettant de gérer plus de 30 groupes de calques différents et de naviguer sur son Photoshop plus aisément.
Toujours dans le cadre de la version «Social Shopping» il a fallut concevoir les spécificités du «social» sans que cela ne gène la navigation actuelle du site. Pour le «social», j’ai crée deux boutons de notifications qui restent dans le style du logo de Liganz, c’est à dire des icônes en traits, avec un contour simple. Puis j’ai dû appréhender les différentes réactions d’un utilisateur, comme le passage de la souris sur un bouton, l’ajout d’un ami ou la modifications des paramètres. C’est le travail le plus important que j’ai effectué durant ce stage. Le site va donc pourvoir évoluer et sortir de la version «beta» vers la version officielle et définitive.
Pour la dernière partie du social, il fallait imaginer pour la 1ère fois la configuration d’un profil type et de celle d’un «ami». A l’image du réseau Facebook, on a réalisé une page profil avec un onglet «Mes amis», contenant en 1ère partie la section «Vous connaissez peut être», puis les «Demande d’ajouts» et enfin «Nos amis présents sur le site». Grâce aux productions Web/Design que j’ai réalisé, le social va bientôt prendre forme sur le site et j’en suis assez fier. En effet, j’ai travaillé sur cette partie depuis ses prémices, le site étant encore en Béta et le profil d’un utilisateur ne possèdait rien d’autre qu’un l’onglet «A propos». Sebastien, un stagiaire spécialisé dans l’e-Marketing, et moi avons réfléchi aux différentes options qui constituent le social. Il a fallu de nombreuses réunions afin de définir les fonctionnalités. J’ai proposé environ 5 ou 6 maquettes avant que celle-ci soit validée, Jérôme possédant de très bonne connaissance en Web Design souhaitait constamment changer un simple détail. Mais au final c’est cette recherche de perfection qui m’a permis d’évoluer. Lorsque les développeurs nous ont envoyé les premières intégrations du social, j’étais très satisfait du rendu et surtout enthousiaste de le voir disponible sur le site.
Inscription Pour procéder à la refonte graphique de certains éléments du site, Jérôme m’a laissé carte blanche. Tout le site a été designé par Jérôme. La concurrence étant féroce en mode, Liganz est peut être trop classique et selon moi, une touche d’originalité serait la bienvenue. J’ai procédé à plusieurs changements sur le site, pour cela j’ai travaillé sur les pop-in ou lightbox de Liganz comme celle de l’inscription et celle de recherche de marque. La 1ère illustration représente l’ancienne inscription:elle était divisée en deux colonnes avec le bouton inscription sur Facebook en rose (couleur de l’entreprise) afin d’inciter l’utilisateur à se connecter via le réseau social. Grâce à Facebook, on peut recueillir un maximum d’informations sur l’utilisateur. Malgré tout, nous avons enregistré plus de connexion par mail que par Facebook. J’ai donc réalisé la 2ème illustration, avec le bouton Facebook en plus grosse dimension, un texte qui explique les avantages de la connexion via Faecbook et un message qui rassure l’utilisateur sur l’utilisation des donnés recueillis. Et le résultat n’a pas tardé à se faire ressentir grâce à cette nouvelle transparence: désormais les utilisateurs se connectent plus fréquement via Facebook.
Marque
Toujours dans le but d’améliorer le design du site, j’ai refait la pop-in de recherche de marque. L’ancienne, très brouillon, n’était pas du tout à l’image du site. J’ai voulu mettre en avant cette pop-in afin de faciliter la navigation des utilisateurs, et de mettre en avant les milliers de marques présentes sur le site. La deuxième illustration est donc beaucoup plus harmonieuse, gage de la qualité du site. La recherche d’une marque est par ailleurs facilitée par le nouvel abécédaire plus intuitif. Le bandeau de marque en haut est défilant, il présente les marques les plus visitées sur le site. Il permet également aux différentes enseignes de disposer d’une meilleure visibilité, grâce à cela Jérôme pourrait gagner une commission supplémentaire.
Sondage
Lors de mon 2ème mois de stage, nous avons subi une situation de crise chez Liganz. La plupart de nos usagers souhaitaient se désabonner sans aucune raison apparente j’ai réalisé un sondage directement sur le site et sur les réseaux sociaux. J’ai repris la charte graphique habituelle pour cette pop-in avec un wording plutôt classique.
Le Blog
Tout site de mode qui se respecte posséde un blog mode. En effet, dans le monde du fashion, les blogueuse sont très affluantes et influentes. Leur avis se fondent souvent sur le blog des entreprises. La paruption du blog a été planifié après celle du site. En effet, il fallait produire du contenu en amont, avant d’annoncer publiquement sa paruption. J’ai assisté Marion sur la préparation des articles: les visuels du site comme l’affiche de lancement (illustration ci-contre), le fond du blog, ou encore le header, avec une typographie manuscrite pour donner un aspect convivial, différent du site. Afin d’alléger le travail des développeurs, le blog a été créer via le CMS Wordpress. Nous avons choisi un thème qui ressemble au site, et avons effectué quelques modifications sur le code php pour qu’il soit idéal.
La F.A.Q Liganz, est issu d’un outil complexe et fonctionne différemment des autres sites de mode. C’est pour cela que Jérôme nous répéte souvent qu’il ne s’agit pas d’un simple site de mode, mais un véritable outil, facilitant le shopping des internautes. Afin que les utilisateurs puissent comprendre et adhérer au système Liganz, j’ai réalisé une Foire Aux Questions sur le site info.liganz.com. Marion s’est chargé du wording de la F.A.Q, quant à moi, je me suis occupé de son aspect visuel. J’avais dans l’idée de faire «Accordéon», c’est à dire un titre dépliant laissant apparaître les réponses. J’ai dû travailler sur le code (HTML, CSS et PHP) de Wordpress pour mettre en place une bonne esthétique de FAQ. Cela m’a permis d’améliorer mes compétences en code. Désormais, il est possible pour Marion de changer le style de la FAQ à tout moment, en se servant des extensions.
Projet Vidéo
Souhaitant multiplier ses modes de diffusion communicationnel, Jérôme et le pôle communication ont réalisé une vidéo de promotion pour le site. Sebastien a élaboré la trame du scénario, ainsi que le texte, tandis que j’apportais mon soutien technique sur le montage de la vidéo. J’ai procédé à de la retouche d’image, du photomontage sur photoshop ainsi qu’aux effets sonores. Ne disposant d’aucun budget, nous avons opté pour une vidéo en illustration, sur un format assez court. Le but était d’apprendre, ludiquement, aux consommateurs ce qui différencie Liganz des autres sites.
Réseaux sociaux
Facebook est le réseau favori des utilisateurs, notre page Facebook permet de publier «les tendances du Mercredi», des looks de stars, à la communication d’évènements. C’est très intéressant car l’on peut voir en direct ce qui plait aux internautes et observer leurs réactions. Le réseau Twitter a permis de s’abonner aux différents comptes de mode afin d’en suivre l’actualités. Le compte Pinterest permet de créer des albums photos, épinglant des compilations de mode. J’ai pu aidé Marion et Julie à alimenter graphiquement la page Facebook. Elles choisissent les thèmes et moi je crée une image design pour la publication. Voici des évènements, des publication par thème ou même l’annonce de nouvelle marque.
Mon stage en chiffres
Conclusion Ce stage de 3 mois m’a permis de travailler sur des thèmes très variés. J’ai appris davantage sur le travail et le rôle de chacun. De plus, j’ai pu ajouter ma petite touche graphique sur chaque mission. Travailler avec les différents membres de l’entreprise fut très instructif, j’ai réalisé qu’en Webdesign/Infographie on doit constamment adapter son travail en fonction des attentes de chaque membre. Se confronter au monde du travail, m’a permis de développer mes compétences techniques et d’assimiler et accepter les contraintes, mais aussi de ressentir la satisfaction du travail bien fait. Ce fut une incroyable sensation pour moi de voir mes créations être intégrer au site et de pouvoir observer les likes grimper sur les réseaux sociaux. Les retours, tant positifs que négatifs, furent primordiaux et m’ont fait progresser. En somme, ce fut une très bonne expérience pour un stage très formateur ! J’ai complété mes connaissances graphiques, assumer des responsabilités et j’ai appris à travailler en cohésion avec le reste de l’équipe. J’ai eu l’honneur d’avoir été un véritable maillon pour l’entreprise, et qui plus est, de me sentir utile. Ce stage conforte mon choix de poursuivre mon projet professionnel dans la communication visuelle.