Simulateur de table Bernardaud

Application web - Identité visuelle
Pour Bernardaud, nous avons conçu et développé un simulateur de table. Très utile pour les clients et commerciaux, cette application pour les terminaux tactiles est déployée dans l'ensemble des magasins et chez Bloomingdales à 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

Notre mission

Bernardaud souhaitait proposer à ses clients une application de personnalisation et de composition d’un service d’assiettes.

Cette application web devait être accessible via des tablettes ou écrans tactiles et déployée à terme dans les boutiques françaises et dans un magasin Bloomingdales de New York.

Dans ce cadre, notre mission incluait :

  • l’accompagnement à la définition des besoins
  • la conception de l’application (conceptualisation, ergonomie, identité et spécifications techniques)
  • le développement du simulateur
  • la création du back-office d’administration des contenus

L’ANALYSE DES BESOINS

Les cas d’utilisation client

Dans les grandes lignes, l’application tablette répondait aux cas d’utilisation suivants :

  • la boutique s’identifie à l’application pour la mettre à disposition des clients du magasin
  • le client accède au simulateur et construit sa composition de table et la personnalise
  • l’application lui indique un chiffrage
  • le client peut modifier la quantité des assiettes
  • il peut transmettre par email l’image de sa composition avec ou sans chiffrage
  • il peut transmettre sa composition à la caisse du magasin pour aller la payer et la retirer

De nombreuses manipulations devaient être possible comme modifier les assiettes, les faire pivoter, agir sur les éléments de décoration,…

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

LE WEBDESIGN

Intégration responsive

L’approche identitaire de l’application exploitait la charte graphique de leur boutique en ligne. Nous avons inscrit notre approche du design en parfaite harmonie avec leur univers visuel. L’application, véritable écrin de leurs produits devait offrir un simulateur ergonomique, pour une expérience intuitive et efficace : le client doit rapidement se l’approprier pour pouvoir simuler le résultat.

L’intégration responsive du design permet une utilisation de l’application adaptée à différents formats d’écrans tactiles.

LES FONCTIONNALITÉS E-COMMERCE

De la simulation de la table à la génération du devis

L’objectif du simulateur était double : proposer une approche tactile idéale pour composer son service d’assiettes et permettre de générer automatiquement le devis associé. L’application est donc connectée à un back-office regroupant des catalogues de produits. La gestion de ces catalogues se fait selon les habitudes d’organisation que l’on retrouve dans les solutions e-commerce.

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

Étude ergonomique du parcours menant jusqu’à l’édition du devis :

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

NOTRE RÉPONSE TECHNIQUE

Les technologies de développement

Les contraintes d’utilisation du simulateur étaient nombreuses avec notamment : un expérience d’utilisation très fluide malgré l’exploitation de visuels de hautes qualités, des traitements asynchrones, une potentielle utilisation de l’application en mode déconnecté (sans connexion à internet)… Pour y répondre, nous avons entre autres exploité les technologies suivantes :

  • Ruby on Rails pour le back-end, le back-office et le front-office
  • Node JS pour le javascript exécuté côté serveur
  • JQuery pour certains aspects d’animations et d’interactions
  • PostgreSQL pour la base de données
  • Sass pour l’intégration
  • Les services Workers pour la gestion hors connexion de l’application
Vous avez un projet d'application ?

Spécialisés dans l’ingénierie de développement d’applications métiers connectées, nous vous accompagnons de la définition au développement. Étudions vos besoins.

Autres références