Interface Utilisateur site de marque luxe
Viticulteurs et Vignerons

Web responsive

Viticulteurs et vignerons du Moyen-Orient depuis 1996,
la famille Zumot a établi la réputation et la qualité de son vin
à la fois localement et internationalement en se concentrant
sur les techniques de production durable.

Responsive home page Saint_George Wine of Jordan

Mon intervention

Direction Artistique
Anticipation de parcours utilisateurs
Conception d’interface utilisateur web & mobile
Conception d'effet graphique exclusif
Déclinaison de charte graphique client
Déploiement CMS
Développement front (html/css)

Direction de la Photographie par Guillaume Pierre

Smartphone pages Saint George Wine of Jordan

Conception d'effet graphique exclusif

Ce petit trait

↓

est un dégradé en diagonale,

utilisé en arrière plan ''fixe''

dans un conteneur scrollable de 1px de haut

Ce qui donne une subtile impression de reflet horizontal au défilement vertical.

Responsive UI design

Conception d’interface adaptative

wineyard page Saint George Wine_of_Jordan responsive laptop user interface design kero

Histoire

Partie contextuelle du storytelling

Page histoire tablette user interface design kero

Page histoire smartphone user interface design kero

Vineyards

conditions de culture

Wineyard Saint George Wine of Jordan laptop user interface design kero

Wineyard (tablette smartphone) Saint George Wine of Jordan user interface design kero

Wineyard Saint George Wine of Jordan desktop user interface design kero

Wine making

&

Wine aging

Wine aging (laptop) Saint George Wine of Jordan user interface design kero

Page Produits

Détails Produits & Produits relatifs

Page produits responsive tablette smartphone user interface design kero

zumot-wines.com

+ de projets

Application métier
Commerciaux nomades

Tablette Windows – Iris Mobile Advance – Group Editor

Application métier
Aide à la vente & Caisse mobile

Smartphone Android et Windows Phone – Happy Chic

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.

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 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.

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

Profil tiers

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

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 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.

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).

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

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.

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 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

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.

Interface Utilisateur site de marque luxe Viticulteurs et Vignerons

Mon intervention

Direction Artistique

Anticipation de parcours utilisateurs

Conception d’interface utilisateur web & mobile

Conception d'effet graphique exclusif

Déclinaison de charte graphique client

Déploiement CMS

Développement front (html/css)

Conception d'effet graphique exclusif

↓

Responsive UI design

Histoire

Vineyards

Wine making