Direction Artistique Multimédia : Digitale, Print, Photo, Illustration & Animation

Application métier
Commerciaux nomades

Portage Application métier Commerciaux nomades sur tablette Windows

Le groupe Éditor est leader européen en carterie, emballage cadeau, papeterie et objets cadeaux
et emploi près de 3 000 commerciaux sur trois pays (France, Espagne, Royaume-Uni).

Écran de connexion à l'application IMA Éditor Group, User Interface Design par kero

Mon intervention

  • Direction Artistique 
  • Optimisation de parcours utilisateurs
  • Élaboration d'expérience utilisateur 
  • Conception graphique d’interface utilisateur 
  • Déclinaison de charte graphique client
  • Illustration 3D 
  • Rédaction d'annotation design
  • Animation d’atelier avec la DSI Iris Mobile

A l'origine sur Widows RT

Riche d'une expérience d'une dizaine d'années sur Windows RT, le client a formulé un une demande mature : certaines fonctionnalités étaient devenu obsolètes, d'autres étaient bien utiles et ils souhaitaient les conserver, et il y avait de réels nouveaux besoins autant de la part des utilisateurs que de la direction du Group Éditor.

La page d'accueil


IMA est une application métier riche en fonctionnalités,
sa page d'accueil présente des grandes miniatures de ses principales interactions
(indicateurs commerciaux, aide à la navigation, agenda, To-do liste dynamique avec Push depuis le SI)
ainsi que des raccourcis vers des sous-sections tel que la prise de commande, le profil de l'agent commercial, le module de prospection, etc.

Vue d'ensemble de la page d'accueil de l'application IMA Éditor Group, User Interface Design par kero

Conformément aux guide lines Windows de l'époque,
la navigation à l’intérieur d'une page s'effectue essentiellement en défilement horizontal.

Coté gauche de la page d'accueil de l'application IMA Éditor Group, User Interface Design par kero
Coté droit de la page d'accueil de l'application IMA Éditor Group User Interface Design par kero

Au vue du grand nombre de fonctionnalités, et pour que les problématiques de cohérence d’affichage ne génèrent pas des surcoûts de conception, il a été décidé que l'affichage serait verrouillé à l'horizontal.

Vue public de la page d'accueil de l'application IMA Éditor Group, User Interface Design par kero

Un interrupteur situé en bas à gauche permet de masquer toutes les fonctionnalités propres au métier de vente pour afficher une vue de démo produits pour clients/prospects.

Grille modulaire action vs consultation de l'application IMA Éditor Group, User Interface Design par kero

La grille modulaire ainsi que la hiérarchie de l'information et des contrôles,
sont déduits d’après un croisement des hot-spots d'action et de consultation sur tablette tactile et,
les placements clés de l'ergonomie tactile celons le guidelines Windows 8.1 (du 13 Mai, 2014).

Hotspot consultation ergonomie tactile de l'application IMA Éditor Group, User Interface Design par kero
Hotspot action ergonomie tactile de l'application IMA Éditor Group, User Interface Design par kero

Le menu de navigation principale


Se présente sur le coté droit et dispose d'un mode replié pour dégager la vue tout en restant présent.

Détails du menu de navigation principale ouvert de l'application IMA Éditor Group , User Interface Design par kero
Munu de navigation principale ouvert de l'application IMA Éditor Group , User Interface Design par kero
Menu de navigation principale replié de l'application IMA Éditor Group , User Interface Design par kero

Module de recherche prédictive


Se superpose au menu de navigation, occupe une emplacement plus large et permet de rechercher des adresses,
des produits ainsi que des clients/prospects, dispose également d'un filtre.

Module de recherche prédictive (détails) de l'application IMA Éditor Group, User Interface Design par kero
Module de recherche prédictive de l'application IMA Éditor Group, User Interface Design par kero
Module de recherche prédictive de l'application IMA Éditor Group, User Interface Design par kero

Communiquant avec le module d'aide à la navigation, le module de recherche permet à l'utilisateur d'afficher le profile du client/prospect ou d'afficher la route à emprunter pour se rendre directement à l'adresse de ce dernier.

Indicateurs commerciaux


Les agents commerciaux disposent d'indicateurs dinamiques très precis, filtrables et synchronisés avec le SI Éditor. 

Indicateurs commerciaux miniature de l'application IMA Éditor Group, User Interface Design par kero

Dans un premier temps ils ont acces à une miniature...

Indicateurs commerciaux grande miniature triable de l'application IMA Éditor Group, User Interface Design par kero

Puis une grande miniature filtrable sur sollicitation.

Détail des Indicateurs commerciaux de l'application IMA Éditor Group, User Interface Design par kero

Et enfin une vue détaillée filtrable, laquelle peut être agrandie avec une gesture à deux doigts (zoom). 

Indicateurs commerciaux de l'application IMA Éditor Group, User Interface Design par kero
Indicateurs commerciaux de l'application IMA Éditor Group, User Interface Design par kero
Indicateurs commerciaux de l'application IMA Éditor Group, User Interface Design par kero

Profil tiers


L'application offre une gestion approfondie et dinamique des clients/prospects.

Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero
Détails et specs des Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero
Détails et specs des Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero
Nomenclature iconographique client/prospect de l'application IMA Éditor Group, User Interface Design par kero

L'iconographie des clients/prospects, basée sur des données dynamiques et synchronisés avec le SI, est élaborée pour fournir une identification intuitive qui permet de prioriser rapidement les démarches des agents commerciaux.

Détails facturation des Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero
Détails facturation des Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero
Détails contrats des Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero

Les profils clients/prospects sont disponibles en consultation et en création/édition.

Saisie de Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero
Détails de la saisie de Profil Tiers (Clients/Prospects) de l'application IMA Éditor Group, User Interface Design par kero

Produits


La gamme de produits étant extrêmement touffue,
le groupe Éditor était demandeur d'une réelle solution pour organiser et afficher un grand nombre de produits.

Page produits de l'application IMA Éditor Group, User Interface Design par kero

Une segmentation à trois niveaux entrecouppés de méta-données pouvant servire de filtre,
sur cinq formats de grilles que l'on peut agrandir ou réduir avec une gesture à deux doigts (zoom).

Page produits de l'application IMA Éditor Group, User Interface Design par kero
Détails et spec. de la page produits de l'application IMA Éditor Group, User Interface Design par kero
Détails et spec. de la page produits de l'application IMA Éditor Group, User Interface Design par kero
Grille moyenne de produits de l'application IMA Éditor Group, User Interface Design par kero
Grille normale de produits de l'application IMA Éditor Group, User Interface Design par kero
Grande grille produits de l'application IMA Éditor Group, User Interface Design par kero

Détails produits & produits relatifs

Page détail produit de l'application IMA Éditor Group, User Interface Design par kero
Page détail produit de l'application IMA Éditor Group, User Interface Design par kero
Page détail produit de l'application IMA Éditor Group, User Interface Design par kero
Spec. de la page détail produit de l'application IMA Éditor Group, User Interface Design par kero

Commande


La prise de commande comporte plusieurs étapes : l'entête, la constitution du panier, une liste récapitulative, et le total. Sûr quoi vienne s'ajouter une fonctionnalité de substitution d'articles, commentaire et signature client, et commentaire d'accusé de reception depuis le SI.

Page entête de bon de commande de l'application IMA Éditor Group, User Interface Design par kero
Composition de panier - bon de commande
Lignes de commande (Empty content) de l'application IMA Éditor Group, User Interface Design par kero
Lignes de commande de l'application IMA Éditor Group, User Interface Design par kero
Substitution produit de l'application IMA Éditor Group, User Interface Design par kero

Contrairement à l'entête de commande et la conmposition du panier, la liste récapitulative se déroule au scroll vertical.

Lignes de commande total de l'application IMA Éditor Group, User Interface Design par kero
Validation de commande total de l'application IMA Éditor Group, User Interface Design par kero

Planning


Deux type d'utilisateurs accèdent à la fonctionnalité, les premiers reçoivent des actions planifiées depuis le SI, les seconds disposent de la liberté de repartir les actions qu'ils ont à accomplir celons leur convenance.

Planning mensuel de l'application IMA Éditor Group, User Interface Design par kero
Planning hebdomadaire de l'application IMA Éditor Group, User Interface Design par kero
Détail événement planning de l'application IMA Éditor Group, User Interface Design par kero
Édition drag & drop du planning de l'application IMA Éditor Group, User Interface Design par kero

Les utilisateurs disposant de leurs emplois du temps ont la possibilité de déplacer leurs rdv en Drag & Drop.

Création événement planning de l'application IMA Éditor Group, User Interface Design par kero
Détails spec du planning mensuel de l'application IMA Éditor Group, User Interface Design par kero
Détails spec du détail événement planning de l'application IMA Éditor Group, User Interface Design par kero
Détails spec du planning hebdomadaire de l'application IMA Éditor Group, User Interface Design par kero
Détails spec de la création événement planning de l'application IMA Éditor Group, User Interface Design par kero

Iconographie & code couleur

 

Spécification d’intégration iconographique de l'application IMA Éditor Group, User Interface Design par kero

L'iconographie est issue du pack d'icone Segoe MDL2 Assets, natif Windows.

Iconographie de l'application IMA Éditor Group, User Interface Design par kero

Le code couleur est directement issu de la charte graphique du group Éditor, et est complété pour répondre aux besoins de l'interface.

Code couleur de l'application IMA Éditor Group, User Interface Design par kero
Switch entités de l'application IMA Éditor Group, User Interface Design par kero

Un switch entre les différentes entités (ce qui influe sur  le catalogue et les tarifs) s’effectue sur sollicitation "long press" du logo et via un menu tiroirs s'affichant depuis la partie supérieur de l'application. 

File d’Ariane de l'application IMA Éditor Group, User Interface Design par kero

Un file d'Ariane est également accessible dans le menu tiroirs de la partie supérieur, se déclenche sur une gesture (pull) à deux doigts. 

+ de projets