Bernardaud, une application tactile sur mesure

Application web - Application métier - Interconnexion & système d’information
Pour Bernardaud, nous avons conçu et développé un simulateur interactif de composition de table. Destinée aux clients et aux équipes commerciales, cette application web fonctionne sur tablettes et écrans tactiles. Elle a été déployée dans les boutiques Bernardaud ainsi que chez Bloomingdale’s à New York.
Client
Bernardaud
Infos
Acteur mondialement reconnu des arts décoratifs et du luxe français associé à la porcelaine de Limoges
Développement d'un simulateur de table pour les boutiques Bernardaud

LE CONTEXTE

Du cadrage au développement du simulateur

Bernardaud souhaitait proposer à ses clients un simulateur interactif pour composer et personnaliser leur service d’assiettes avant l’achat. L’outil devait permettre de visualiser facilement différentes compositions et de préparer son choix en point de vente.

Le simulateur devait fonctionner directement sur les terminaux tactiles installés en point de vente. Il a notamment été déployé dans les boutiques Bernardaud ainsi que chez Bloomingdale’s à New York. Son interface devait rester simple à utiliser et s’adapter à plusieurs formats d’écran. L’enjeu était de proposer une expérience fluide, aussi bien pour les clients que pour les équipes commerciales.

Notre intervention a couvert toutes les étapes nécessaires à la conception et au développement du simulateur :

  • cadrage et définition détaillée des besoins et des cas d’usage ;
  • conception fonctionnelle et ergonomique de l’application ;
  • création de l’identité visuelle et rédaction des spécifications techniques ;
  • développement du simulateur tactile ;
  • développement du back-office d’administration des contenus.

L’ANALYSE DES BESOINS

Concevoir les parcours utilisateurs en point de vente

Lors du cadrage, nous avons formalisé les principaux parcours d’utilisation en magasin. Le simulateur devait notamment permettre de :

  • identifier le point de vente avant sa mise à disposition des clients ;
  • composer et personnaliser un service d’assiettes ;
  • calculer automatiquement le montant de la composition ;
  • modifier les quantités sélectionnées ;
  • envoyer par email une image de la composition, avec ou sans chiffrage ;
  • transmettre la sélection en caisse pour finaliser l’achat et le retrait.

Le simulateur devait également offrir des interactions tactiles avancées. L’utilisateur pouvait notamment changer les assiettes, les faire pivoter et modifier les éléments de décoration directement à l’écran. Ces possibilités ont été prises en compte dès la conception de l’interface pour conserver une utilisation simple et intuitive.

Developpement javascript pour simuler la rotation d'assiettes
Modification du service, changement des assiettes

CONCEPTION DE L’INTERFACE TACTILE

Adapter l’interface aux différents écrans tactiles

L’interface du simulateur reprend les codes graphiques de la boutique en ligne Bernardaud afin de préserver la cohérence de la marque. Nous avons conçu un univers visuel sobre et élégant, capable de mettre en valeur les collections de porcelaine sans détourner l’attention des produits. L’ergonomie a également été pensée pour une prise en main rapide sur écran tactile.

Nous avons également réalisé une intégration responsive afin que le simulateur puisse s’adapter à plusieurs formats de terminaux. Ce travail vise à conserver une interface lisible et une expérience cohérente quel que soit l’écran utilisé.

SIMULATION, CATALOGUE ET GÉNÉRATION DE DEVIS

Un back-office pour administrer les collections

Le projet devait relier la composition réalisée sur l’écran tactile aux catalogues produits de Bernardaud. Nous avons connecté le simulateur à un back-office regroupant les données nécessaires au chiffrage. Le montant de la sélection pouvait ainsi être calculé automatiquement, jusqu’à la génération du devis. Les équipes Bernardaud disposaient également d’une interface dédiée pour administrer les contenus et les collections.

Génération d'un devis de la table simulée

Étude ergonomique du parcours utilisateur jusqu’à la génération du devis :

technologies utilisées pour la création de l'application de simulation

NOTRE RÉPONSE TECHNIQUE

Répondre aux contraintes de performance et de mobilité

Le simulateur devait rester fluide malgré l’utilisation de visuels de haute qualité et l’exécution de traitements asynchrones. Il devait aussi pouvoir fonctionner sans connexion Internet dans certains contextes de vente. Notre équipe a donc défini une réponse technique adaptée à ces contraintes de performance, de disponibilité et d’usage sur écran tactile. Plusieurs technologies ont été retenues pour y répondre :

  • Ruby on Rails pour le back-end, le back-office et les interfaces de l’application ;
  • Node JS pour l’exécution de traitements JavaScript côté serveur ;
  • JQuery pour certaines animations et interactions de l’interface ;
  • PostgreSQL pour la gestion de la base de données ;
  • Sass pour l’intégration et la gestion des styles ;
  • Les services Workers pour permettre le fonctionnement hors connexion dans les contextes où l’accès à Internet n’était pas disponible.
Vous avez un projet
d’application sur mesure ?

Idéematic accompagne les projets numériques atypiques, du cadrage jusqu’à la mise en production. Nous concevons des logiciels sur mesure adaptés aux usages, aux contraintes techniques et au contexte de déploiement. Notre équipe réunit conception, architecture et développement pour transformer un besoin spécifique en solution fiable et pérenne.