Identité visuelle, UI/UX Design
Ostava
Conception du logo, de la charte graphique et du Design UI/UX pour une application mobile
Contexte
Ostava est une application qui a pour objectif de gérer son stock alimentaire. Le principe est simple, une fois les courses effectuées il suffit de scanner soit le ticket de caisse, soit les produits ayant un code barre ou ajouter manuellement ceux qui n’en possèdent pas. Cette application a pour but de réduire le gaspillage grâce à la gestion des dates de péremption. En complément de cette gestion de stock, l’application propose à l’utilisateur des recettes en fonction de son stock alimentaire.
Personas
L’équipe marketing a élaboré un questionnaire qui a été envoyé à de multiples personnes de tout âge. Grâce aux réponses, nous avons pu définir nos personas et ainsi étudier les besoins de nos potentiels utilisateurs. Nous avons alors élaboré nos 2 personas principaux qui me permettront de déterminer les fonctionnalités de l’application et concevoir l’arborescence de celle-ci. Nous visons dans un premier temps les jeunes actifs et dans un second temps les parents avec de jeunes enfants.
Arborescence des fonctionnalités
A partir des résultats du questionnaire, j’ai créé un arbre de fonctionnalité pour l’application. Nous retrouvons quatre grandes fonctionnalités : le scanner, le garde-manger, la création de compte et les recettes.
Le scanner : il permet de scanner ou entrer manuellement les produits achetés.
Le garde-manger : l’utilisateur peut vérifier son stock alimentaire, vérifier les dates d’achat et de péremption et supprimer les produits de son garde-manger.
Le compte : l’utilisateur peut personnaliser l’application en y entrant certaines informations telles que le nombre de personnes dans son foyer, les ustensiles dont il dispose, son régime alimentaire et s’il a des allergies ou des aliments qu’il n’aime pas.
Les recettes : l’utilisateur à la possibilité d’accéder à de nombreuses recettes de cuisine en fonction de son garde-manger ou de ses goûts.
Wireframes
Une fois l’arbre des fonctionnalités réalisé, j’ai conçu les wireframes de l’application. La conception des wireframes m’a permi d’imaginer le parcours utilisateur et la hiérarchisation des éléments.
Choix graphiques
Pour ce projet j’ai réalisé le logo de l’application et la charte graphique de celle-ci.
Concernant le logo, je suis partie sur une couleur qui se veut gourmande, puisque notre application aborde la thématique alimentaire. J’ai donc choisi une couleur magenta/rose, qui donne une note sucrée à notre projet. Pour accentuer le thème culinaire, le logo est croqué sur le côté droit.
En plus de la couleur du logo, j’ai opté pour quatre autres couleurs vives et pétantes. Notre application touchant un public jeune et ayant pour thématique l’alimentaire, j’ai préféré choisir des couleurs dynamiques.
Quant aux typographies, j’ai utilisé deux polices rondes qui se veulent chaleureuses et ainsi rester en accord avec notre logo arrondi à la chaude.
Maquettes et protypage
Après la détermination des fonctionnalités, l’élaboration de la charte graphique et les wireframes, je me suis attaquée à la création des maquettes de l’application.
Pour le design global de l’application, j’ai souhaité réaliser un design épuré et chaleureux. Les boutons et les différents éléments graphiques sont tous arrondis pour créer des interfaces plus douces à l’œil. J’ai joué également sur les ombres pour apporter du relief et du dynamisme.
Quant à l’ergonomie de l’application, j’ai voulu optimiser le parcours utilisateur afin qu’il soit le plus intuitif possible. Certaines fonctionnalités demandaient une attention plus particulière en terme d’UX.
La partie la plus complexe de ce projet était la fonctionnalité scanner de l’application, qui pourrait rendre l’utilisation de l’application trop pénible. Première complexité : les différents scanners. Techniquement, il ne nous était pas possible de mettre en place un seul scanner pour le scan d’un code barre et le scan d’un ticket de caisse. Pour scanner l’un ou l’autre nous devions développer deux scanners. Deuxième complexité : nous devions permettre à l’utilisateur d’ajouter manuellement les produits qui n’ont pas de code barre et dont l’utilisateur ne possède pas de ticket de caisse avec un code permettant de le scanner.
Pour réaliser la maquette, il m’a fallu prendre en compte ces deux obstacles dans le parcours utilisateur. La solution a été de proposer deux boutons lorsque l’utilisateur clique sur l’icône scanner de la tab bar : “Ajout scan” ou “Ajout manuel”.
Concernant les doubles scanners, l’utilisateur se trouvant sur l’interface pour scanner ses produits peut passer d’un scanner à un autre grâce à un toggle button.
Quant à l’ajout manuel, il fallait prendre en compte la possibilité que l’utilisateur puisse ajouter manuellement non seulement un seul produit, mais aussi plusieurs en même temps. Pour empêcher qu’il n’ait à entrer un par un ses aliments, l’utilisateur peut cliquer sur une des six catégories de produits où se trouve une liste d’aliments. Il n’aura plus qu’à sélectionner les articles correspondant à ses achats et indiquer la quantité.
Une fois le design élaboré, je me suis attaquée au protoypage des maquettes.
Prêt à vous différencier et créer un site web qui vous ressemble ?
Échangeons gratuitement pendant 30 minutes pour aborder votre projet, vos objectifs et la façon dont nous pouvons collaborer pour vous créer un site unique !