Réalisation
Design d'interface utilisateur
Design et intégration de l’application de planification de GroupCamp. Plan de charge et planning de projets.
Réalisation
Design produit et identité graphique
GroupCamp — Suite d’applications collaboratives de gestion de projet.
Réalisation
Site web international
Réalisation complète du site web de GroupCamp, disponible en 14 langues et tournant sur Drupal 7.
Expériences
GroupCamp
2009 - 2019, Lead UI Designer
Suite d’applications collaboratives de gestion de projet - SAAS.
En tant que lead designer, j’ai dessiné, intégré et maintenu l’interface du produit pendant 10 ans.
En tant que lead designer, j’ai dessiné, intégré et maintenu l’interface du produit pendant 10 ans.
Total Fleet
2016, Expert CSS
Application de gestion de flotte automobile de Total.
Expertise CSS dans la but d'améliorer l'intégration et la maintenance de l’application par les développeurs.
Expertise CSS dans la but d'améliorer l'intégration et la maintenance de l’application par les développeurs.
Amenothes Conception
2006, Web designer
Agence web à Besançon.
Réalisation compléte de sites web client, de la maquette graphique au développement final.
Réalisation compléte de sites web client, de la maquette graphique au développement final.
Formations
Compétences
Photoshop
16 ans
Illustrator
13 ans
Adobe XD
1 an
Sketch
1 an
CSS
13 ans
LESS
3 ans
SASS
3 ans
HTML
13 ans
Javascript
6 ans
jQuery
6 ans
PHP
10 ans
Drupal
8 ans
Design d'interface utilisateur
Design et intégration de l’application de planification de GroupCamp. Plan de charge et planning de projets.
Entreprise
GroupCamp
Compétences
UX/UI design, Intégration
L’application de planification de GroupCamp permet de définir le planning des projets et de gérer le plan de charge des équipes : disponibilités, surcharges et absences. Le but était de créer une interface simple permettant à chaque équipe de lire rapidement son planning et aux planificateurs et chefs de projet de gérer facilement leurs ressources.
Plusieurs usages, plusieurs vues
L’application est découpée en plusieurs vues, chacune est dédiée à un usage spécifique. Un planificateur peut consulter les disponibilités de ses ressources : sous-charges, surcharges et absences et les allouer à des projets en quelques clics.
Le tableau de bord permet d’avoir un compte rendu du taux de charge et de la capacité disponible par semaine.
Un chef de projet a la possibilité de filtrer ses vues de travail pour n’afficher que ses projets et ses équipes. Une vue type diagramme de Gantt lui permet de gérer plus précisément son projet avec des phases et des dépendances.
Interactions graphiques intuitives
Les actions simples comme la création d’un Job, son déplacement ou la modification de sa durée sont réalisées de manière graphique. L’utilisateur modifie directement les éléments de DOM en les déplaçant et les étirant. Cela permet des modifications très rapides et intuitives. Un formulaire vient en renfort pour les opérations plus complexes.
Collaboration en temps réel
Pour permettre l’édition simultanée par plusieurs utilisateurs et éviter tout conflit ou blocage, nous avons choisis le temps réel. A la suite de chaque modification du planning, les éléments concernés sont redessinés sur l’ensemble des clients connectés. Des infobulles permettent d’indiquer qui vient de réaliser la modification.
Pour se faire, l’ensemble de l’interface est créée et contrôlée en Javascript. L’intégration de tous les éléments graphiques a donc été pensée dans ce but.
Design produit et identité graphique
GroupCamp — Suite d'applications collaboratives de gestion de projet.
Entreprise
GroupCamp
Compétences
UX/UI design, HTML, CSS, JS
Période
2009 - 2019
GroupCamp est une plateforme de gestion de projet regroupant une dizaine d’applications collaboratives fonctionnant en mode SAAS.
Le tout est disponible en 14 langues.
En tant que Lead UI Designer, ma mission a été de dessiner, intégrer et maintenir l’ensemble de l’interface et de ses composants.
- Définition et mise à jour de la charte graphique.
- Création d’une bibliothèque de composants HTML/CSS.
- Applications graphiques riches : Planification, Agenda, Tâches.
- Création de widgets jQuery (dropdown, modal, tableaux, …)
- Maintien de l’unité graphique entre une dizaine d’applications desktop et mobile.
Bibliothèque de composants
Afin de maintenir une unité graphique et de faciliter la création de nouvelles vues, j’ai créé un ensemble de composants réutilisables et adaptables : composants de formulaires, icônes, dropdown, dialog, système de grille responsive, etc. Ces composants sont communs à l’interface web et aux application mobiles. Pour faciliter la gestion d’un jeu d’environ 200 icônes, j’ai écrit un script PHP permettant de générer des sprites d’icônes SVG de plusieurs tailles et couleurs.
UI HTML CSS
Gestion de tâches
L’application permet de gérer des listes de tâches au sein d’un projet. Les usages vont de la simple ToDo à la tâche complète avec dates, temps estimés, temps passés, avancement, affectations multiples. La complexité était de créer une vue adaptée à l’ensemble de ces usages. Pour ce faire le choix a été de rendre l’interface personnalisable par l’utilisateur et de lui laisser le choix des informations visibles à l’écran.
UX/UI HTML CSS
Agenda
L’application Agenda permet de visualiser au même endroit ses événements, tâches, jalons et jobs. Plusieurs vues sont disponibles afin de proposer un affichage correspondant au mieux à l’usage de chacun, Mois, Semaine et Planning.
UX/UI HTML CSS Javascript
Application iOS et Android
GroupCamp possède une version web totalement responsive regroupant les applications nécessaires aux utilisateurs en mobilité comme les Feuilles de temps ou les Tâches.
Les applications iOS et Android embarquent cette version web grâce à Cordova. Cela permet de maintenir un seul code est de pouvoir réutiliser des composants HTML/CSS de la version Desktop.
UX/UI iOS Android Responsive
Réseau social d'entreprise
Le réseau social centralise toutes les discussions autour des éléments clés d’un projet : Tâche, Jalon, Document, Post.
Widget Grid
Certaines applications ont besoin de tableaux de données pour générer notamment des rapports. Trois problèmes se posent régulièrement :
- La génération de tableau peut être lourde et rébarbative pour les développeurs
- La gestion des largeurs de colonnes n’est pas évidente en HTML
- L’utilisateur à besoin d'adapter le tableau à son utilisation
Pour répondre à ces 3 problèmes, j’ai créé un widget javascript permettant de générer des tableaux triables, redimensionnables, personnalisables et filtrables.
Javascript HTML CSS
Et plus encore : Documents, Feuilles de temps, Budget, ...
Site web international
Réalisation complète du site web de GroupCamp, disponible en 14 langues et tournant sur Drupal 7.
Entreprise
GroupCamp
Compétences
Web design, Drupal, PHP
Le site web de GroupCamp en disponible en 14 langues, il comporte la vitrine du produit ainsi que sa documentation.
Le tout est géré par Drupal 7 avec quelques modules développés spécifiquement pour ce site.
J’ai réalisé l’ensemble des tâches de création du site.
- Design et création du thème
- Configuration de Drupal
- Développement des modules
- Mise en place et suivi SEO
Développement de modules Drupal 7
Module de SEO
Sur chaque pages, ce module propose aux rédacteurs un récapitulatif des différents champs nécessaires à un bon SEO (titres, meta, alt, ...). Des alertes sont mises en places lorsque des informations utiles n’ont pas été remplies.
Détection de liens morts
La documentation est amenée à être modifiée très souvent, des pages apparaissent, d’autres disparaissent, et certaines change d’URL. Ce module permet de détecter les mauvais liens et d’avertir les rédacteurs.