Les gens perdent beaucoup de temps à faire la queue pour obtenir un café. De plus, ceux qui ont déjà commandé et qui sont dans le magasin sont confrontés au problème de perdre leur place dans la file d'attente s'ils doivent attendre à nouveau. Cela entraîne de la frustration et des désagréments pour les clients qui ont besoin de se procurer leur boisson rapidement.
UI/UX designer concevant le site Internet « Café Mozart » de la conception à la livraison pour mon projet de formation Google UI/UX.
Réalisation d'entretiens clients, création de wireframes, prototypage, réalisation d'études d'utilisabilité, conception d'une UI/UX conviviale. Assurez-vous que le site Web est réactif et accessible sur différents appareils.
Offrez une expérience de commande transparente et pratique aux clients. Concevoir un site Web visant à aider les clients à éviter les longues files d'attente au magasin et à permettre à ceux qui ont besoin d'un réapprovisionnement rapide de le faire sans perdre leur place dans la file d'attente et sans aucun inconvénient.
2 semaines
J'ai mené des entretiens et créé des cartes d'empathie lors de mon premier projet de conception de l'application. Dans ce projet, j'ai découvert que les adultes qui travaillent et qui disposent de peu de temps pour faire la queue en raison de leur travail constituent un groupe d'utilisateurs important qui a besoin d'un outil de précommande pour gérer efficacement leur temps. De plus, le problème de perdre leur place dans la file d’attente dans le magasin a été identifié comme un autre problème. Pour comprendre les besoins et les exigences des utilisateurs du site Web du Café Mozart, j'utiliserai ces informations ainsi que de nouvelles informations pour développer un site Web de commande plus efficace pour le Café Mozart. Pour garantir que la conception du site Web est conviviale, j'ai mené un audit concurrentiel et proposé plusieurs solutions de conception avant la version finale.
Les travailleurs ont souvent des horaires très chargés et, par conséquent, ils n’ont pas le temps de faire la queue dans les cafés. Non seulement ils manquent de temps, mais ils ont également de nombreuses autres responsabilités dont ils doivent s'occuper, comme leur travail, leur famille et leurs courses personnelles. Pour de nombreuses personnes, faire la queue pour une tasse de café n’est tout simplement pas une option. Cela peut être un inconvénient majeur pour les personnes qui comptent sur le café comme remontant le matin ou pour rester concentrées pendant la journée de travail.
Les gens ont du mal à gérer leurs horaires chargés et à suivre toutes leurs tâches quotidiennes. Avec autant de demandes concurrentes sur leur temps, de nombreux utilisateurs ont du mal à rester organisés et à gérer efficacement leur temps. Ils recherchent une solution efficace qui puisse les aider à rester maîtres de leurs tâches et à remplir leurs obligations. Cela peut être particulièrement difficile pour les utilisateurs qui ont de nombreuses responsabilités, comme les professionnels ou les étudiants, car ils doivent souvent jongler avec plusieurs projets et délais à la fois.
Il s'agit d'une fonctionnalité que de nombreux utilisateurs trouvent importante, car elle leur permet de passer facilement des commandes avec un groupe d'amis ou de collègues. Malheureusement, la plupart des autres applications de la même catégorie ne sont pas naturellement destinées à disposer de ce type de fonctionnalités, ce qui rend difficile pour les utilisateurs de trouver une application qui réponde à leurs besoins. Cela peut constituer un inconvénient majeur pour les utilisateurs qui doivent fréquemment passer des commandes groupées, car ils peuvent devoir recourir à des méthodes manuelles telles que la messagerie texte ou le courrier électronique pour coordonner les commandes avec d'autres.
La frustration de perdre sa place dans la file d'attente peut être un inconvénient pour les clients qui ont déjà investi du temps et des efforts pour passer leur commande initiale et qui tentent maintenant de passer rapidement une commande de suivi. Cela est particulièrement problématique pour les clients qui travaillent sur leur ordinateur portable à une table et qui ne veulent pas perdre leur concentration pendant leur travail en devant à nouveau faire la queue. Trouver une solution à ce problème améliorerait considérablement l’expérience utilisateur et permettrait aux clients de poursuivre leurs tâches en toute transparence, sans aucune interruption.
Léa, étudiante, relève le défi de commander son café tout en travaillant au magasin Café Mozart sans perdre sa place. Elle veut éviter de se lever et de faire la queue pour un autre café. Léa a besoin d'une solution qui lui permette de commander depuis son ordinateur pour éviter de perdre du temps et de perturber son travail.
La cartographie du parcours utilisateur de Laura a mis en évidence la nécessité de fournir un site Web dédié à la commande de café au Café Mozart en plus de l'application. Ce faisant, les utilisateurs auraient la possibilité d'accéder et de commander leur café préféré sans avoir à utiliser leur téléphone ou à quitter leur table actuelle. Cette amélioration se traduirait à terme par une expérience globale améliorée pour les clients.
Pour trouver un tas d'idées créatives, j'ai animé une série d'ateliers visant à laisser libre cours à mon imagination. Ces ateliers m'ont aidé à rassembler de nombreux concepts uniques et imaginatifs que j'ai pu explorer plus en profondeur. Pour faciliter la navigation sur le site Web, j'ai créé un plan du site qui suivait la même structure que l'application mobile. De cette façon, les utilisateurs pourraient bénéficier d’une expérience familière et cohérente sur différents appareils, rendant la navigation plus fluide et plus intuitive. Cette approche a permis aux utilisateurs de trouver facilement ce qu'ils recherchaient sur l'application et sur le site Web, ce qui a permis une expérience fluide.
Plan du site du Café Mozart.
J'ai créé des wireframes papier et numériques pour chaque écran, en tenant compte des problèmes liés à la navigation, à la navigation et au flux de paiement. Des variantes du wireframe de l'écran d'accueil ont été conçues pour optimiser l'expérience de navigation des utilisateurs. Ces wireframes ont permis d'affiner la conception de l'application et d'améliorer sa convivialité globale. Pour garantir que le site de commande du Café Mozart soit accessible sur tous les appareils, j'ai conçu des tailles d'écran supplémentaires pour garantir une expérience entièrement réactive. Cette approche a été adoptée pour garantir que les clients puissent utiliser le site Web sans effort, quel que soit l'appareil qu'ils utilisent. Grâce à des conceptions réactives en place, les clients peuvent profiter d'une expérience de commande transparente sur n'importe quel appareil, y compris les ordinateurs de bureau, les tablettes et les appareils mobiles.
Wireframes en papier pour écrans de bureau.
Variations de taille des wireframes en papier.
Au cours de la phase de conception initiale, je me suis assuré d'accorder une attention particulière aux commentaires et aux résultats recueillis lors des recherches des utilisateurs afin d'éclairer la création des conceptions d'écran. La recherche sur les utilisateurs est une étape importante dans le processus de conception car elle permet une compréhension approfondie des besoins et des préférences du public cible. En prenant en compte ces informations, j'ai pu créer des conceptions adaptées aux exigences spécifiques du public cible et rendre l'expérience utilisateur aussi fluide que possible.
Conception de wireframes numériques pour différentes tailles d'écran, incluant l'optimisation d'éléments clés tels que le placement des boutons et la hiérarchie visuelle. Cette approche garantissait que le site Web de commande du Café Mozart offrirait une expérience utilisateur cohérente, quel que soit l'appareil utilisé pour y accéder.
Pour créer un prototype low-fi, j'ai connecté les écrans pour le flux utilisateur principal consistant à ajouter des articles au panier et à terminer le processus de paiement. Mon équipe a fourni des commentaires sur la conception, y compris le placement des boutons et l'organisation des pages, et j'ai intégré leurs suggestions pour améliorer l'expérience utilisateur.
Interactions et navigation des prototypes basse fidélité.
Pour mieux comprendre les besoins des utilisateurs et la manière dont ils interagissent avec le prototype de site Web, je mène régulièrement des études d'utilisabilité. Ces études visent à recueillir des commentaires détaillés des utilisateurs concernant leur expérience globale et à mettre en évidence les problèmes ou obstacles majeurs qu'ils peuvent rencontrer en essayant d'accomplir des tâches ou d'accéder à des fonctionnalités. En tirant parti des résultats d’utilisabilité du projet d’application, je peux éviter de commettre les mêmes erreurs sur le site Web. De plus, cette étude m'aide à recueillir des commentaires plus précis et à observer comment les utilisateurs interagissent avec le site Web. Sur la base de ces commentaires, j'ai identifié les zones du site Web susceptibles de créer de la confusion ou de la frustration chez les utilisateurs et j'ai apporté des améliorations progressives à la conception.
Les utilisateurs n'identifient pas la section comme ils le devraient. Comme pour la section promotion.
Les utilisateurs souhaitaient ajouter à la carte des cafés sans avoir à consulter la page « produit ».
Le processus de paiement n'était pas clair, ils ont besoin d'une fonction « sélectionner le mode d'expédition »
Lors du processus de paiement, il n'existait pas de moyen clair permettant aux utilisateurs de se connecter à leur compte pour pré-remplir les informations de facturation et d'expédition précédentes.
Suite aux retours des tests utilisateurs, je me suis concentré sur l'amélioration de l'expérience utilisateur de mon projet. L'un des changements que j'ai apportés a été de repenser la façon dont la section de promotion était présentée aux utilisateurs, la rendant plus attrayante visuellement et plus conviviale.
De plus, j'ai ajouté des boutons à côté de chaque café promu, permettant aux utilisateurs de les ajouter facilement à leur commande. Enfin, j'ai revisité le processus de paiement, en apportant des ajustements pour garantir que les utilisateurs puissent facilement naviguer dans le processus et finaliser leur commande en toute simplicité.
Page de promotions affinée.
Page de paiement affinée.
Dans le cadre de mon processus de conception de maquette, j'ai pris en compte les différentes tailles d'écran que les utilisateurs peuvent utiliser pour accéder au site Web. En optimisant l'expérience de navigation pour différentes tailles d'appareils, y compris les mobiles et les tablettes, je me suis assuré que les utilisateurs bénéficieraient d'une expérience fluide et agréable, quel que soit l'appareil qu'ils utilisent. Cette approche a contribué à accroître l’engagement des utilisateurs et à rendre le site Web plus accessible à un plus large éventail d’utilisateurs.
Mockups screen size variations
Pour la dernière étape de mon processus de conception, j'ai créé un prototype hi-fi qui suivait le même flux d'utilisateurs que le prototype lo-fi. Ce prototype hi-fi incorporait des modifications de conception apportées sur la base des résultats de l'étude d'utilisabilité.
Prototype haute fidélité de l'œuvre finale.
Assurez-vous que le site Web est facile à naviguer, avec des titres, des étiquettes et des boutons clairs et cohérents.
Utilisez un langage clair et concis : évitez d’utiliser un jargon technique ou un langage trop compliqué.
Assurez la compatibilité avec les technologies d’assistance telles que les lecteurs d’écran et les loupes pour garantir qu’elles sont compatibles et fonctionnent de manière transparente.
Ce site Web aide les gens à passer des commandes rapidement et à éviter de perdre du temps. Toutes les fonctions sont là pour que les utilisateurs se sentent mieux et aidés dans tout ce processus de commande. "C'est sympa pour nous qui voulons commander sans toucher notre téléphone"
Tout au long de ce projet, j'ai appris l'importance de prioriser les besoins des utilisateurs et de mener des recherches approfondies pour comprendre les problèmes des utilisateurs. J'ai découvert que les petits détails de conception, tels que la taille et les couleurs de la police, peuvent avoir un impact significatif sur l'expérience utilisateur. Tester et itérer des conceptions basées sur les commentaires des utilisateurs m'a aidé à créer une meilleure expérience utilisateur.
Pour s'assurer que les problèmes identifiés lors des études d'utilisabilité précédentes sont efficacement résolus, une autre série de tests doit être effectuée. Cela permettra de valider l’efficacité des solutions mises en œuvre et de fournir des informations supplémentaires sur toute amélioration supplémentaire pouvant être apportée pour améliorer l’expérience utilisateur.
Développer des spécifications de conception détaillées pour garantir que tous les aspects de la conception sont pris en compte lors du développement, y compris la mise en page, la typographie et les interactions. Ces spécifications doivent couvrir les éléments visuels et fonctionnels tels que la police, les jeux de couleurs, la navigation, les boutons, les liens, etc.
Restez impliqué et examinez régulièrement les progrès pour garantir la cohérence de la conception tout au long du processus de développement. Fournir des commentaires et apporter les ajustements nécessaires contribuera à garantir la bonne mise en œuvre des détails et des spécifications de conception afin de confirmer que le produit final adhère à la vision de conception originale avant de le rendre public.
