Nippon Steel – Refonte de la plateforme Tubular

Un nouveau site pour retrouver l’ensemble des spécifications techniques des produits Nippon Steel
Contexte du projet

L’ancienne plateforme avait été réalisée en 2012 et n’était plus alignée avec les objectifs et la vision de Nippon Steel.

Ce site fait office de reference technique et est utilisé par les ingénieurs et techniciens directement sur les chantiers et plateformes.
Ce projet de refonte a fait suite à un Proof of Concept. Le MVP a été développé en collaboration avec Nippon Steel, S&L et Smile Suisse.
L’un des principaux enjeux de cette refonte a été de retravailler les pages en pensant « mobile first ». Certains contenus ont dû être completement refondu pour proposer un affichage sur mobile.
Cette refonte a aussi été l’occasion de changer les technologies de la plateforme, un socle Drupal vient maintenant servir une application React.js.

Fonctionnalités principales

Une refonte fonctionnelle et technique !

La nouvelle plateforme a repris l’ensemble des fonctionnalités déjà présentes, comme par exemple :

  • Un guide des materiaux, sous la forme d’un parcours utilisateur orienté solution. Dans lequel l’utilisateur est guidé à plusieurs étapes pour trouver le produit le plus adapté à son besoin
  • Deux catalogues produits, l’un basé sur des contenus gérés directement sur la plateforme, et un autre interconnecté avec un service distant (API)
  • Un « office locator » qui permet de visualiser et contacter les principaux bureaux de Nippon Steel

De nouvelles fonctionnalités ont aussi été ajoutées sur cette nouvelle version. Un outil de conversion permet maintenant de visualiser et convertir les différentes unités des produits.

Objectifs

Le but de ce projet a été de rafraichir la plateforme, avec une nouvelle identité graphique, des nouveaux parcours, plus directs et pensés mobiles. Un autre objectif a été de remplacer une technologie aujourd'hui difficile à maintenir par un backend Drupal et un front en React.js.

Méthodologie du projet

Ce projet a été réalisé en deux étapes, une première version MVP de l’application a été développée avec les fonctionnalités les plus importantes pour les utilisateurs finaux. Le deuxième projet LOT2 a ensuite été réalisé en vue de reprendre l’ensemble des points manquants. La méthodologie AGILE a été utilisée tout au long des deux projets. Cela a permis de commencer très rapidement les premiers développements de la plateforme, Nous avons appliqué des cycles (sprint) de deux semaines : conception, validation et réalisation. Les équipes client ont ainsi pu non seulement adresser leurs besoins au fil de l’eau, mais aussi voir la plateforme évoluer de sprint en sprint.

Technologies utilisées

Ce projet est passé par plusieurs phases d’analyses et de veille technologique. Nous avions initialement prévu de réaliser une application mobile sur une technologie hybride. La mise en place d’un mode hors ligne semblait alors crucial pour les utilisateurs. Après analyse et retours des équipes d’ingénieurs de Nippon Steel et S&L, il s’est averé que les utilisateurs avaient pratiquement toujours un accès à internet, même sur leurs lieux d’éxécution. Nous avons alors etudié d’autres options, tel que les applications PWA, permettant aussi de gérer des données hors connexion.
Les fonctionnalités de la plateforme étant très spécifiques au métier, nous avons proposé d’utiliser le CMS Drupal (headless) pour gérer la complexité de la partie backend. Vis à vis de l’application en front, React.js avec l’utilisation de PWA nous a semblé être la meilleure option.

Résultats

Le nouveau socle Drupal et React ont permis de reprendre l’ensemble des fonctionnalités déjà présentes tout en ajoutant les nouveaux outils mis à disposition par Nippon Steel et ses partenaires. L’utilisation de la PWA a aussi permis de rendre disponible certains traitement en mode hors-ligne.

Nos technologies liées à cette référence

Drupal

Drupal

Simple, ergonomique, extensible. Drupal est au top !

En savoir plus
Reactjs

Reactjs

Création d'interfaces utilisateurs interactives.

En savoir plus

Études de cas