UI Design

  • SAEMES

    Ce projet a impliqué la conception UX et UI, le développement, l’intégration, l’optimisation SEO et laisse place actuellement à la Tierce Maintenance Applicative.  L’objectif de cette refonte était l’optimisation de l’expérience utilisateur par un effort UX et par l’amélioration des fonctionnalités proposées. Une attention toute particulière a été apportée à la performance du site sur notre plateforme optimisée pour Drupal 8.

     

    Enjeux du projet 

    • Création et développement de la plateforme avec Drupal 8 ;
    • Conception UX et UI ;
    • Déclinaison en Responsive Design ;
    • Script d’import de données ;
    • Migration des contenus ;
    • Bilinguisme : français et anglais.

    Particularités UX

    • Un moteur de recherche au centre de la page d’accueil pour proposer la fonctionnalité de recherche dès l’arrivée de l’utilisateur sur le site ;
    • Un menu burger latéral droit pour ne pas surcharger l’utilisateur avec un menu complexe ;
    • Une bulle "Contact" fixée sur la navigation pour accompagner et rassurer l’utilisateur en cas de questions ou de besoin de contact ;
    • Un formulaire d’abonnement en plusieurs étapes pour ne pas surcharger l’utilisateur en information avec un long questionnaire.

     

    Développements particuliers

    • Les scripts d’import de données vers Drupal pour alimenter le site par import de données (fichiers CSV) sans saisie manuelle notamment pour les parkings, les tarifs, les services.
    • Le moteur de recherche avec un champ libre de saisie par auto-complétion pour la recherche de parkings.
    • Le système de tri avec des filtres à facette et une carte interactive pour la recherche de parking à proximité.
    • Le formulaire d’abonnement à des offres de stationnement en plusieurs étapes, avec le module Webform.
    • La médiathèque pour le sockage et le partage de fichiers multimédias avec les modules Media et Entity Browser.
    • La newsletter pour partager des informations sur les services et les offres en cours de la SAEMES, avec la solution Mailjet.
    • La migration des  contenus du site Drupal 7 vers Drupal 8 avec les modules Migrate API , Migrate Drupal UI et des scripts d’imports complémentaires.

    Front-end -
    Le front-end repose sur notre blank theme Foundation 6.

     

    Membres de l’équipe projet :
    Nicolas Moinet, Rida Maksour, Aman Barakat, Walid Ibrahim, Ryad Karar, Marion Le Roux, Rouaida Roumieh, Laurent Lemoing et Myriam Achnad.

     

    Date de mise en production : septembre 2018

    Accéder au site : www.saemes.fr

  • Confédération Générale du Travail

    Périmètre de notre mission : un travail d’analyse SEO et des personas, la conception UX et UI, le développement avec Drupal 8, la migration des contenus depuis le CMS Spip, l’intégration front-end. Aujourd’hui, nous accompagnons la CGT dans le cadre de la Tierce maintenance Applicative préventive, corrective et évolutive ainsi que de l’hébergement.

     

    Enjeux du projet 

    • Optimisation de l’expérience utilisateur et modernisation du design par l’analyse des personas et la conception UX et UI ;
    • Création et développement d’une plateforme avec Drupal 8 ;
    • Déclinaison en Responsive Design ;
    • Migration des données de SPIP vers Drupal ;
    • Mise en place de l’espace militant ;
    • Sauvegarde du référencement SEO.

    Particularités UIX

    • Conception d'un site "magazine" ;
    • Mega-menu plein écran permettant une recherche selon plusieurs axes ; 
    • Formulaire de syndicalisation en trois étapes, rapide et intuitif, accompagné du paiement en ligne des cotisations.

    Développements particuliers

    • Un espace militant proposant aux utilisateurs la création, la gestion, la publication et le téléchargement de contenus (articles, dossiers, fichiers). Les utilisateurs peuvent gérer leur profil et accéder à des forums de discussions.
    • Un moteur de recherche Apache Solr qui indexe les contenus du site ainsi que les ressources documentaires.
    • Un mega menu plein écran qui propose des parcours par thèmes (secteurs d’activité, géographie et thématiques) et par types de contenus (Actualités, dossiers, WebTV, agenda et communiqués de presse). 
    • Un carte interactive permettant de rechercher un établissement CGT à proximité. 
    • Une WebTV pour diffuser des contenus vidéos de la confédération.
    • La migration des contenus de Spip vers Drupal 8.

    Front-end

    Le front-end a été réalisé avec Foundation 6.

     

    Membres de l’équipe projet :
    Ryad Karar, Marion Leroux, Ludovic Coullet, Rida Maksour, Elie Choufani, Elie Nassar, Rouaida Roumieh, Laurent Lemoing et Christophe Dugué.

     

    Date de mise en production : novembre 2018.

    Accéder au site : www.cgt.fr

  • Osez Le J1

    Développement du site de lancement d'appel à projet pour OsezLeJ1 pour le Grand Port Maritime de Marseille-Fos.
    Le J1 accueille encore les voyageurs qui traversent la Méditerranée. Ce trafic va être déplacé dans le courant de l'année 2018. Que va devenir le J1 ? C'est pour répondre à cette question que le Port de Marseille vient de lancer un concours international pour lui trouver une nouvelle vie. Le Port a confié la conception et le développement du site à l'équipe de bluedrop.fr.

    Outils utilisés : 
    Drupal 8 - Git - Foundation 6

    Objectifs :
    -     Site de l'appel à projet créé avec Drupal 8;
    - UX/UI design;
    - Theming responsive;


    Les petits plus :

    - Une direction artistique minutieuse;
    - Captation images par drone et production d'une vidéo de présentation de l'appel à projet;

    Développement front-end:
    - Thème responsive Drupal 8 utilisant Foundation 6, CSS3;
    - Site tendance sur le modèle des sites one-page;

    Equipe en charge du projet :
    Ryad Karar, Ludovic Coullet, Myriam Achnad, Elie Nassar, Laurent Lemoing, Joseph Aghnatios.

    Date de mise en production : Juin 2017

    URL du site : osezlej1.fr

    Vidéo de présentation du projet en co-production avec Véproduction : 
     

  • WWF France

    En collaboration avec l'association de défense de l’environnement  WWF, l’agence Drupal bluedrop.fr a conçu et mené le développement, avec Drupal 8, de l'intranet documentaire de WWF France. L'intranet permet de mettre à la disposition de tous les salariés les documents d’informations internes et externes et organise l'information et le travail collaboratif par groupes, zones géographiques et thématiques.

    Outils utilisés :
    Drupal 8 - GIT - modules contribués Drupal

    Enjeux du projet :
    - Mener la conception et le développement de la plateforme Drupal 8 ;
    - Assurer la réalisation graphique et ergonomique du site ;
    - Proposer une gestion des groupes d’utilisateurs et la liaison avec l'annuaire LDAP de WWF ;
    - Proposer une gestion avancée de la confidentialité des documents ;
    - Fournir une recherche avancée - Moteur de recherche SolR à facettes ;
    - Mettre à disposition un thème responsive.

    Développements particuliers :
    - Création d'un module sur-mesure, en complément du module Group, concernant la gestion des groupes et des permissions ;
    - Création d'un module sur-mesure "IPTC" capable d'extraire les métadonnées des photos.

    Front-end :
    - Thème responsif de Foundation 6.2.4.
    - Icônes en MDI (Material Design Icons).

    Membres de l’équipe projet :
    Lara Zaki, Nicolas Moinet, Rida Maksour, Laurent Lemoing, Elie Choufani, Walid Ibrahim, Christophe Dugué, Ludovic Coullet.

    Date de mise en production : Mai 2017

    Accéder au site : URL confidentielle.

  • Iso Ext

    Enjeux du projet :
    - Refonte du site avec Drupal 8 ;
    - Réalisation graphique et ergonomique du site - UX et UI design ;
    - Theming responsive.

    Particularités Front-end :
    - Mise en place d’un template responsive de Foundation 6.1.2 ; 
    - Mise en place d’un carrousel responsive flexible grâce au module Slick Carousel. Ce carrousel s’adapte aussi bien sur desktop, tablettes et Smartphone et permet de faire défiler les slides au toucher ;
    - Mise en place d’un système de menu mobile disponible également sur les écrans de plus de 1440px de largeur, en CSS.
    - Mise en place d’un effet mosaïque pour les blocks et la page « Actualité », en CSS. 


    Membres de l’équipe projet :
    Rouaida Roumieh, Ryad Karar.

    Date de mise en production : Février 2017

    Accéder au site : iso-ext.fr

  • APHM Excellence

    Enjeux du projet :
    - Conception contrainte à partir de l'instance initiale du site de l'APHM ;
    - Réalisation graphique et ergonomique du site - UX et UI design ;
    - Structure de contenu ; 
    - Accompagnement au déploiement, à la mise en production et à la prise en main du projet ;
    - Theming responsive.

    Développements particuliers :
    - La page liste des actualités de la page d’accueil ne présente pas le même nombre par défaut, grâce au module Infinite Scroll avec un form_alter (custom) ;
    - Optimisations SEO malgré la structure du site en one-page.


    Front-end :
    Thème responsive de Foundation 6 et CSS3.

    Membres de l’équipe projet :
    Rida Maksour, Rouaida Roumieh, Aman Barakat, Ryad Karar.

    Date de mise en production : Mars 2017

    Accéder au site : http://excellence.ap-hm.fr