/ Retour à l’accueil

Création de l’UI pour l’app Odice gestion Bouteilles

Odice est un des principaux acteurs du froid et de tout l’électroménager présent dans les cuisines des restaurants en France.
Lors de ce produit nous avons suivi les étapes de création d’UI en commençant par l’étude de l’expérience utilisateur jusqu’à l’UI design final en passant par le wireframe.

Grapefruit slice atop a pile of other slices

Story board et études

Réflexion sur l’expérience utilisateur

L’application Odice Cerfa est utilisée majoritairement en extérieur lorsque les techniciens livrent et récupèrent les bouteilles. Le remplissage est souvent long et rébarbatif, il fallait donc trouver un moyen simple et rapide de remplir le Cerfa officiel. Enfin l’application doit être utilisée sur tablette et mobile.
Après analyse de ces contraintes nous avons créé différents personnas pour créer de l’empathie par rapport à l’utilisateur. Nous avons également créé le story board ci-joint pour une meilleure compréhension de l’utilisation.

Ux design

Zoning et wireframe

Chaque remplissage plus rapide additionné est un gain de temps sur la durée de livraison. De plus le passage au numérique pour des utilisateurs ayant l’habitude de prendre des notes papier était un autre défi à relever. C’est pourquoi après avoir travaillé longuement le parcours client, nous nous sommes penchés sur un wireframe simple et accessible.

UI design

Design de l’interface utilisateur

Voici le produit final de plusieurs jours de réflexion. Une couleur unique, des boutons assez larges. Une UI simplifiée au maximum, pour produire un design facile à utiliser et au rendu sobre et moderne.

Ux et Ui design

Design de la page de connexion

La page contact à un design des plus simple. Avec un rappel des couleurs dans le background. Le but de ses formes est de rappeler d’un côté le gaz contenu dans les bouteilles et ensuite le côté simple de l’application.
Pour les champs et le bouton nous sommes partis sur un design très moderne. Des traits fin d’un côté pour les champs et un bouton sur fond bleu avec un léger radius sur les angles.

Ux et Ui design

Ajouter une bouteille

Quoi de plus rébarbatif que de remplir des champs l’un après l’autre. L’idée de base était de réfléchir sur comment rendre l’expérience courte et facile.
Tout d’abord nous avons choisi de partir sur des champs de taille assez importante sans pour autant avoir à scroller. Cela permet à l’utilisateur d’avoir une vision complète du rapport et de ne pas avoir de difficultés lors de la sélection des champs.

Ux et Ui design

Dashboard pour gestion complète du stock

Ce dashboard spécifique présente 3 blocs principaux.
Premièrement on retrouve la possibilité d’accéder aux menus déroulants avec les stocks larges et précis ainsi que les actions sur ces stocks. Deuxièmement la liste de toutes les bouteilles avec leur description. Troisièmement les compartiments de stockage de chaque technicien ou zone avec possibilité d’effectuer un drag and drop dans les blocs pour déplacer très facilement la bouteille.

Ux et Ui design

Remplissage des mesures de chaque bouteille

Après le déplacement des bouteilles il est obligatoire d’indiquer les différentes mesures concernant ces dernières.
A nouveau, comment rendre cette expérience cool et simple. Premièrement la pop up permet de ne pas nous perdre dans l’interface. Deuxièmement des champs assez gros et troisièmement, un design ultra-simple!

Ux et Ui design

Design de l’application en version mobile

Même si l’UI est simple de part son design il n’est pas facile de rentrer autant de fonctionnalités dans un petit écran et de les rendre toutes autant visibles que sur tablette.
Le choix que nous avons adopté ici est de superposer les fonctionnalités et d’enlever la partie drag and drop au profit de menus déroulants bien plus faciles à utiliser sur petit écran.

Merci d’avoir regardé !

Mes autres créations

Y’a plus qu’à 📨