Claire HAHN

Chef de projet digital

Post Human War

Post Human War – Un jeu vidéo indépendant

Contexte :

Post Human W.A.R. est un jeu de stratégie tactique au tour par tour en ligne, sans hasard et en free-to-play. Développé par le studio Chahut, sa sortie est prévu à l’automne 2016 (sorti depuis voir la page Steam https://store.steampowered.com/app/462240/Post_Human_WAR/).

Ma principale mission a été de programmer les pages « from scratch » (sans framework ni CMS) en tant qu’intégratrice pour faire le pont entre la graphiste web et les développeur serveur. Le site incorpore le jeu directement dans la partie haute du site afin de laisser les joueurs naviguer librement dans le site pendant une partie. La stratégie en tour par tour permet dans l’attente d’un tour de faire autre chose en même temps, donc autant proposer au joueur de naviguer sur le site plutôt que d’aller ailleurs.

Plus d’informations :

Le site du jeu : http://alpha2.posthumanwar.com/accueil/ 

J’ai réalisé la version responsive du site vitrine temporaire de Post Human War.

L’ancien site vitrine : http://demo.posthumanwar.com/index.php

Compétences :

Fun facts :

J’ai donné ma voix à un robot.

APAJH Yvelines

APAJH Yvelines – sites associatifs dans le milieu du handicap

Contexte :

Au cours de mon apprentissage puis de mon CDI à la FEGAPEI, j’ai réalisé de nombreux sites, de bout en bout, du recueil de besoin, au design, à la programmation, puis la formation et l’accompagnement des associations dans leur projet.

L’un des derniers site en cours de réalisation est celui de l’APAJH Yvelines avec une volonté de clarifier l’information et d’aller vers des design plus épuré. Lors de la réunion / formation de lancement, j’ai utilisé des outils d’UX Design comme le tri par carte (card sorting) pour stimuler le groupe projet, clarifier l’information et la structure du site. Mais aussi des études de cas pour sensibiliser aux problématiques du web.

J’ai travaillé en collaboration avec un photographe qui a fait un reportage des différents établissements de l’APAJH Yvelines et aussi avec une agence de rédaction qui s’est occupé des textes et des contenus.

http://www.apajh78.org/ 

Plus d’informations :

Les sites réalisés au sein de la FEGAPEI : http://trisomie21-france.org/, http://www.apei-valenciennes.org/, http://adapei88.asso.fr/, http://apaei-cote-fleurie.fr/, http://www.arpei.fr/ & http://www.unautreregard.asso.fr/.
Les sites auxquels j’ai participé en équipe : http://www.adapei28.fr/, http://www.adapei92.org/, http://www.autisme-en-yvelines.org/, http://www.rpdad.fr/, http://www.adapei42.org/ & http://www.pbrds.asso.fr/.

Les sites ont évolué depuis leurs différentes mises en production (2012, 2013…).

Compétences :

Les Forces du Handicap

Les Forces du Handicap – Portail d’information sur le handicap

Contexte :

Le site Les Forces du Handicap est un portail d’informations sur le handicap pour les personnes en situation de handicap et les aidants. L’essence du site est de fournir les informations pratiques de base. J’ai réalisé la première version au niveau du webdesign et de la programmation. Pour la nouvelle version, j’ai également participé à l’ergonomie, le parcours utilisateur et la structure de l’information, ainsi que le webdesign et la programmation. Le portail est à présent responsive, donc adaptable sur mobile, tablette et ordinateur. L’accessibilité a été un des enjeux principaux sur ce portail, en répondant aux normes du W3C.

Plus d’informations :

En 2012, la FEGAPEI lance le site des Forces du Handicap, qui se veut un portail d’information sur le handicap pour accompagner les handicapées, les aidants, les professionnels et les établissements. J’ai participé à la première version du site, sur le webdesign et la programmation. Il s’agit d’un projet réalisé en interne avec la Direction de la Communication. Le site agrège toutes les informations pratiques concernant les dispositifs d’accompagnement (établissements, structures, possibilités pour divers activités etc.).

En 2015, le site connait une nouvelle version avec une cible plus réduite et un objectif plus précis : accompagner les personnes handicapées et les aidants. L’interface est revisitées pour plus de clarté. Le nouveau site est multi-plateforme (mobile, tablette, écran de bureau).

Il intègre aussi beaucoup de principes d’accessibilité basé sur les règles du W3C (World Wide Web Consortium, établie les standards du web).
J’ai aussi réalisé le site d’AJuPID, un autre site d’information sur l’accès à la justice pour les personnes handicapées où l’accessibilité était très importante :

Ecodesign

Le roadshow de FAURECIA

Contexte :

Le service R&D de Faurecia cherche à présenter et promouvoir leur travail au sein des différents sites de Faurecia et ainsi de donner plus de visibilité au département Ecodesign, spécialisé dans le design écologique de siège automobile.
Le département Ecodesign a donc fait la commande d’une vidéo afin d’expliquer de manière pédagogique leur travail. La vidéo est découpée en deux boucles, l’une qui présente le cycle classique de fabrication d’un siège et la seconde boucle qui introduit la fabrication d’un siège avec l’intervention d’Ecodesign.

Plus d’informations :

Pour présenter, les changements positifs lors de la présentation de la fabrication d’un siège, j’ai proposé de mettre des jauges comme dans les jeux vidéos. Ces jauges ont pour libellé santé, ressources et environnement.
Mon travail a consisté en la réalisation d’un storyboard, des décors et de l’animation. J’ai aussi conseillé pour le déroulé de la vidéo (au niveau du message) en collaboration avec le service Ecodesign.

L’une de mes propositions étaient sous forme d’illustrations vectorielles rappelant un mode d’emploi :

La seconde proposition, celle qui a été retenue, étaient sous forme de pâte à modelé et de carton rappelant l’écologie avec un traitement organique :

Compétences :

Cofree

Cofree – Site communautaire de Freelances

Contexte :

Création d’une plate-forme pour les freelances du secteur du Web, dédiée autant à la collaboration qu’à la prospection de projets et à l’accompagnement d’entreprises porteuses de projets multimédias.

Cliquez ici pour découvrir l’animation du Logotype

Ce projet de fin d’étude était une initiative personnelle qui m’a placé comme porteuse de projet et chef de projet. Lors d’une soirée de lancement des différents projets, j’ai du convaincre et recruter différents profils complémentaires en accord avec mon « associée » qui m’a suivi sur le projet.

Plus d’informations :

Mes missions principales ont été de définir le modèle économique et de planifier / d’organiser le projet. Ensuite, je me suis occupée de la définition de la marque, son nom, son identité et son positionnement en accord avec les personnes qui se chargeaient de la communication et du marketing. J’ai coordonné les aspect techniques en créant des échéances (versionning) dans le cachier des charges et j’ai participé au graphisme et à la conception de la marque, du logotype, de la charte graphique et du webdesign.

Les documents que j’ai supervisés et/ou réalisés :

  • L’arborescence détaillée ;
  • Le Benchmark ;
  • Le cahier des charges (avec le modèle économique) ;
  • Le résumé de l’enquête utilisateurs ;
  • Les 4 personas ;
  • Le planning (en format .xlsx et .jpg) ;
  • Les recherches du logotype
  • La charte graphique (avec interdits et règles) ;
  • Le plan de communication ;
  • Un exemple de fiche tarifaire (non charté) ;
  • Les wireframes ;
  • La maquette de l’accueil ;
  • Les maquettes interactives ;
  • Les storytellings avec les personas.

Compétences :

Dos[h]i

Dos[h]i – itinéraires numériques

Contexte :

Nous avons réalisé un webdocumentaire franco-coréen. A travers le regard d’un coréen à Paris et celui d’un français à Busan, nous présentons les différentes expériences dans la ville influencées par les nouvelles technologies.

Ce projet a impliqué la coordination d’une classe entière de Master. Nous nous sommes divisés en différents départements, les designers, les développeurs, les scénaristes, l’équipe de captation (caméra et son) et les monteurs. Nous étions deux lead designer dans une équipe de cinq graphistes c’est-à-dire que nous avons coordonné l’équipe et avons apporté notre expérience pour définir les livrables, le planning, la répartition des tâches.

Plus d’informations :

Afin de réaliser, une partie du webdocumentaire en Corée en relation avec l’université de DONG-EUI, nous avons dû réunir les fonds manquants. J’ai été membre actif de la stratégie sur le crowdfunding et surtout la réalisation de contre-parties.

L’équipe des webdesigner est un pôle transverse entre les développeur, les scénaristes et les monteurs. Nous avons été amené à apporter notre expérience dans chacuns de ces domaines.
Les documents que nous avons supervisés et/ou réalisés :

  • Choix du nom ;
  • Planches tendances / univers ;
  • Logotype ;
  • Charte graphique ;
  • Storyboard global ;
  • Maquettes graphiques principales.

Compétences :

Chaire Gare

Chaire Gare réinventer les gares du XXIème siècle

Contexte :

L’Ecole des Ponts ParisTech et la branche Gares & Connexions de la SNCF ont signé, jusqu’en 2017, un accord de partenariat portant sur la création d’une chaire intitulée « Réinventer la gare au XXIe siècle » et portant sur la conception, l’aménagement et la gestion des gares et des pôles d’échanges ferroviaires.

La chaire souhaite se doter d’un site Internet pour communiquer sur ses productions, destiné à faciliter l’échange et la diffusion d’informations, mais également à accroître la visibilité du projet.
Nous avons développé un site qui est à la fois un outil de travail permettant aux différents acteurs du projet d’organiser et de structurer leurs documents et un élément de communication destiné aux acteurs externes pouvant être intéressés par le projet.

Dans ce projet, j’étais en charge de l’intégration et du développement sur WordPress. J’ai également participé à la formation pour les personnes en charge de l’administration et aussi à la conception du site durant les réunions client.

Compétences :

Datamining

OTmedia

Contexte :

OTmedia est une entreprise de Datamining qui a solicité l’université pour un projet de site web. En première année, nous avons été inclus sur des projets de vidéos pour promouvoir ces projets en accord avec les élèves de seconde année.

Plus d’informations :

Nous avons décidé d’orienter le projet sur la création d’une vidéo pour présenter l’outil web de datamining (texte, audio, video, image) qui permet de remonter aux sources de l’Information et d’analyser où, quand, comment et par qui elle se propage. Nous avons décidé en équipe de créer une vidéo de type motion pour expliquer et vulgariser la notion de datamining. Cette donnée est cruciale pour le projet et nous avions le sentiment qu’elle restait obscure pour la plupart de personnes.

Nous nous sommes servis du logiciel Aftereffects.

Cliquez ici pour voir la vidéo

Compétences :

Site vitrine web

Portfolio site web de la FEGAPEI et prestations de site web

Contexte :

En 2012, la FEGAPEI décide de mettre en avant des services qu’ils proposent pour les dissocier du site institutionnel et leur donner une meilleure visibilité.
J’ai travaillé en équipe sur la déclinaison de ces sites, la réalisation graphique et technique. Puis la formation de mes collègues pour qu’ils puissent les mettre à jour.

J’ai aussi été en charge de mettre à jour le site de prestation web puisqu’il impactait directement mon activité. J’ai pris des photos de mise en scène, et crée un flyers pour communiquer sur la prestation.

Mon travail a aussi été de revoir le prix des devis, des prestations, estimer de temps de création.

Compétences :