Application de gestion de caves à vins et spiritueux

Application de gestion de caves à vins et spiritueux 

Brief client

Automated Cellar est une Web App destinée aux amateurs de vins et spiritueux. L'outil permet de rassembler et de gérer différentes caves, qu’elles soient physique(s), mais aussi digitale(s), en automatisant et simplifiant les processus de suivi et gestion de leur stock. Nous réalisons l'ensemble de la conception UX et UI de ce projet.

Année

2021

Expertise
  • Design
Disciplines
  • Direction artistique
  • UI design
  • UX design
  • UX research
Outils
  • Ateliers collaboratifs
  • Parcours utilisateurs
  • Sketch
  • Sprint graphique

 

01

Mise à plat des objectifs et des besoins utilisateurs

Ateliers parcours et profils des utilisateurs – Architecture de l’information et arborescence

Avant de se concentrer sur la conception de l’application, il est nécessaire de définir les typologies de profils visés, comprendre leurs besoins et leurs usages, mais également avoir une vision business et stratégique dans un marché très concurrentiel.

Pour pouvoir visualiser simplement les enjeux de la stratégie business tout en gardant un regard centré utilisateur, un User Centered Design Canvas a été mis en place (pour en savoir plus sur cette méthodologie, vous pouvez lire notre article et utiliser notre template ici) suivi d’un exercice de « Note-N-Map » (nous vous en parlerons très prochainement sur le blog) afin de commencer à cartographier l’expérience utilisateur et les parcours principaux.

Ces ateliers collaboratifs permettent d’identifier les différents acteurs, de prioriser leurs besoins et les fonctionnalités associées en termes de gestion de leur(s) cave(s) à vin, et de concevoir une arborescence de la plateforme.

Vue de plusieurs n map
Note-N-Map des parcours utilisateurs
Vue zoomée de l'arborescence
Arborescence de la plateforme

78 fonctionnalités
catégorisées et priorisées

02

Atelier de Co-sketching

Priorisation des fonctionnalités et des composants – Esquisses des écrans

Suite au partage de la vision commune, de la mise à plat des parcours utilisateurs et de la priorisation des fonctionnalités, un atelier de co-sketching est animé à distance sur Miro, avec la collaboration des équipes techniques afin d’assurer la faisabilité le plus en amont possible.

Bureau avec plusieurs papiers et sketchs
Esquisses papier de la plateforme
Capture de l'Atelier de co-sketching sur Miro
Atelier de co-sketching à distance
Esquisses papier de la plateforme
Atelier de co-sketching à distance
03

Wireframes

Une fois l’expérience complète cartographiée et les sketches de la structure globale et des écrans validés, le Sprint UX commence pour concevoir les wireframes en niveaux de gris. Cette étape est suivie de la création d’un prototype, pour pouvoir réaliser des tests utilisateurs avec des amateurs de vins, possesseurs de caves physiques et/ou digitales.

Wireframes de la webapp
Wireframes de la webapp
3 écrans de la partie cave
Zoom sur la partie cave
04

Une identité sobre et authentique

Un univers épuré au service de la plateforme

Pour respecter les codes graphiques du vin, nous privilégions l’utilisation du monochrome, permettant ainsi de mettre en avant les visuels des bouteilles ainsi que les couleurs utilisées pour repérer les vins.

Une texture d’essence de bois accompagne l’identité pour donner du caractère et de la chaleur. Des illustrations viennent ponctuer les pages au fil de l’expérience.

Typographies et couleurs
Charte graphique
Ipad avec une illustration de vin
Exemple d’illustration en bichromie
Extraits du design system: boutons, vins, navigation
Extraits du design system
Écrans clés de la webapp
Écrans clés de la webapp

La gestion de cave digitalisée est une fonctionnalité principale d’Automated Cellar. Après avoir ajouté son vin automatiquement, manuellement ou en téléchargeant ses factures, l’utilisateur peut disposer ses vins dans ses caves et les placer dans l’emplacement souhaité.

Pour bien séparer les deux actions, nous utilisons une vue en liste et une représentation visuelle de la cave avec la disposition des bouteilles.

Vue sur ipad de la cave
Détails de la cave

132 composants
créés dans le design system

Écrans en quinconces
Déclinaisons des écrans
Voir un autre projet