Claire HAHN

Chef de projet digital

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 :

Published by Claire H. on | Permalink

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 :

Published by Claire H. on | Permalink

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 :

Published by Claire H. on | Permalink

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 :

Published by Claire H. on | Permalink

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 :

Published by Claire H. on | Permalink

Steampunk

Contexte :

J’ai crée une interface pour une présentation sur le Steampunk. J’ai réalisé le graphisme, le développement et le contenu rédactionnel. C’est un thème que j’avais déjà traité dans mon mémoire sur l’Art et la Machine. Je voulais créer une interface qui mettrait en scène l’identité du Steampunk avec une navigation horizontal qui incite à la découverte, chaque page comme un tableau qui présente cet univers riche.

Cliquez ici pour accéder au site sur le Steampunk


Compétences :

Published by Claire H. on | Permalink

Quest of Economia

Quest of Economia : exposé sur l’économie des jeux vidéos
Contexte :
Création d’un site de présentation pour un exposé sur l’économie des jeux vidéo. J’ai réalisé le graphisme, le développement et une partie du contenu rédactionnel. La navigation de l’exposé reprends la navigation d’un jeu de plateforme comme Mario. Ainsi, l’interface incite à la découverte progressive des informations comme si on progressait dans un niveau. Tout d’abord la progression est chronologique avec l’information préalable pour appréhender l’aspect économique et de ses enjeux.
Cliquez ici pour accéder au site sur l’économie des jeux vidéo


Compétences :

Published by Claire H. on | Permalink

Egatrap Cisum

Egatrap Cisum : Moteur de recherche de musique

Contexte :

Dans le cadre du cours de programmation durant ma première année de Master, nous devions développer un moteur de recherche, un système de connexion et inscription des utilisateurs. Avec ma binôme j’ai réalisé un moteur de recherche de musique, son graphisme et son développement.
Cliquez ici pour accéder au moteur de recherche de musique
(attention il n’est pas fonctionnel car sa base de donnée n’est pas reliée)

Compétences :

Published by Claire H. on | Permalink

Michiko e Hatchin

Mini site GONG TV
Contexte :
Lors de mon stage à GONG TV j’ai réalisé un mini promotionnel pour présenter la série Michiko e Hatchin. A chaque lancement de série ou de nouvelle saison nous faisions une page de avec un lecteur en Flash pour présenter la bande d’annonce.
Nous avons réalisé aussi des fiches de présentation de chaque série pour obtenir des partenariats avec des entreprises de vêtement par exemple. Toutes les deux semaines, nous mettions en place des concours avec la page dédiée sur le site mais aussi les pages sur youtube, dailymotion et wat.tv qui prennaient un habillage spécifique au concours.
Cliquez ici pour accéder au mini site de Michiko e Hatchin

Published by Claire H. on | Permalink

Balad Essonnes

Marcher au naturel

Contexte :

Projet fictif en durant le BTS Design Graphique, conception de l’identité graphique et de la scénarisation interactive du site «balad’Essonne » générateur d’itinéraire « nature ».
L’interface est un générateur de voyages et de découvertes de l’Essonnes, au travers de randonnées pédestre ou à vélo. Le concept principal était de laisser les personnes choisir les aspects des découvertes qu’ils souhaitent faire, par exemple, s’ils veulent voir principalement de la nature et du patrimoine ils feront cette sélection qui se mettra de côté comme dans le système d’un panier dans une boutique. Ce choix une fois passé dans le générateur d’itinéraire proposera un trajet qui répond aux besoins et aux envies de l’utilisateur.

Brief :

En ville on ne voit pas l’horizon. Les citadins cherchent un cadre de vie serein et verdoyant. Ils ressentent donc une attirance pour la nature, un désir de prendre son temps et de se promener. Les espaces périurbains jouent un rôle fondamental « de poumon vert ». Il y a également une recherche du « vrai » espace naturel, authentique. Il existe des besoins de bouger et d’espace. Une prise de conscience du manque d’activité sportive en ville se fait ressentir et la santé est au centre des préoccupations. Les principales cibles sont les personnes actives ou les familles. La randonnée est avant tout une activité de groupe.

En Ile-de-France, le département de l’Essonne présente un réel potentiel de développement touristique qui l’autorise à revendiquer une fonction de pôle de loisirs et de détente d’envergure régionale. En effet, fort de sa situation géographique proche de Paris et d’importants espaces non urb anisés, il dispose d’un environnement attractif et diversifié, constitué de nombreuses richesses naturelles et d’un patrimoine historique, culturel et scientifique de qualité.

Afin de traiter le sujet avec créativité et pour donner plusieurs angles d’attaque, j’ai décliné le sujet en trois axes créatifs :

Axe créatif : Un usage fonctionnel pour une balade poétique

Il s’agit de l’axe retenu pour le projet, qui devait avoir un aspect fonctionnel, proche d’un mode d’emploi, mais qui incite à voyager et donc incorpore une dimension poétique. L’idée de choisir son itinéraire d’après des pictogrammes induit un univers coloré et simplifié comme dans un livre d’illustration.

Cliquez ici pour accéder aux différentes recherches du site de Balad’Essonnes

Accéder à la démo des recherches de Balad’Essonnes

Propositions carnet de voyages :

Axe créatif : Les nouvelles technologies au service de l’authenticité

Ici, le principe était de plonger dans l’univers du carnet de voyage.

Proposition découverte / collage :

Axe créatif : Un environnement acquis à découvrir


Compétences :

Published by Claire H. on | Permalink