L'application Café Mozart aide les personnes qui ont besoin d'un café rapidement mais qui n'ont pas le temps de faire la queue pour commander
Le problème

Les gens perdent beaucoup de temps à faire la queue pour obtenir un café.

Mon rôle

UI/UX designer concevant l'application « Café Mozart » de la conception à la livraison pour mon projet de formation Google UI/UX.

Réalisations

Réalisation d'entretiens, de wireframing papier et numérique, de prototypage, de réalisation d'études d'utilisabilité et de conception UI/UX.

Le but

Permettre aux gens (étudiants aux travailleurs) de pouvoir commander facilement et rapidement des cafés sans perdre de temps dans les files d'attente, et ce en grande quantité.

Durée

3 mois

Logiciels utilisés
Figma
Illustrator
Photoshop
graphical user interface, application
Recherches utilisateur
Résumé

Afin de comprendre les utilisateurs et leurs exigences pour ceux que je développe, j'ai mené des entretiens et produit des cartes d'empathie. Les adultes qui travaillent et qui n'ont pas le temps de faire la queue à cause de leur travail ont été reconnus comme un groupe d'utilisateurs principal. Ce groupe d'utilisateurs a soutenu mes hypothèses précédentes concernant les clients du Café Mozart, et j'ai découvert qu'ils avaient besoin d'un outil de précommande pour gérer plus facilement leurs commandes et leur temps. Les problèmes de commande de groupe lors de l'utilisation d'applications avec des personnalisations complexes sont un autre problème d'utilisateur qui doit être pris en compte.

Point douloureux 1
Le temps

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.

Point douloureux 2
Le calendrier

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.

Point douloureux 3
Fonctionalités

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.

graphical user interface, application
Persona: Alex
Énoncé du problème

Alex est propriétaire d'une compagnie d'assurance et il est toujours à la recherche de moyens de rationaliser son entreprise et de la rendre plus efficace. Un domaine dans lequel il a remarqué beaucoup de temps et d'efforts perdus est celui de l'achat de cafés pour lui et ses clients. Il en a assez de passer des heures à faire la queue au café du coin, à attendre son tour pour commander.

Persona : alex
Persona: Alex
Carte du parcours utilisateur

La cartographie du parcours utilisateur d'Alex a révélé qu'il serait utile de disposer d'une application dédiée pour commander du café au « Café Mozart ». Cela permettrait aux utilisateurs d'accéder et de commander plus facilement leur café préféré et améliorerait leur expérience globale avec la marque.

table
Ateliers d'idéation
Wireframes papier et numériques

Dans le but de rassembler un large éventail de perspectives et d’idées, j’ai animé une série d’ateliers. Ces ateliers ont été conçus pour enflammer mon imagination. À travers ces ateliers, j'ai cherché à rassembler autant d'idées uniques et créatives que possible, afin de les explorer plus en profondeur et en détail. J'ai utilisé diverses techniques de brainstorming et d'idéation pour générer une multitude de concepts et de possibilités potentiels. Ensuite, j'ai utilisé Figma pour concevoir des wireframes numériques afin d'organiser les choses et d'avoir une meilleure idée de mes idées de conception.

a drawing on a paper

Quelques croquis d'atelier.

diagram, engineering drawing

Résumer et trier les idées.

paper wireframes

Des wireframes papier de toutes mes idées avant de commencer le travail magique.

Wireframes numériques
Accueil

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.

graphical user interface, application
Wireframes numériques
Commandes

Afin de créer une expérience intuitive et conviviale, j'ai beaucoup réfléchi à la navigation de l'application. J'ai décidé de placer la navigation en bas de l'écran afin de la rendre facilement accessible aux utilisateurs. Cet emplacement permet également aux utilisateurs de naviguer facilement dans l'application d'une seule main, ce qui est particulièrement utile pour les utilisateurs en déplacement. Je me suis également assuré d'intégrer la prise en charge des technologies d'assistance.

a screenshot of a iphone with app
Prototyping
Prototype basse fidélité

Avec les wireframes numériques comme guide, j'ai créé un prototype basse fidélité pour démontrer le flux principal de l'utilisateur lors de la commande d'un café. Ce prototype basse fidélité m'a permis de tester les fonctionnalités de base et l'expérience utilisateur de l'application.

Prototyping picture

Interactions et navigation des prototypes basse fidélité.

Etude d'utilisabilité
Résultats

Je mène des études d'utilisabilité en deux cycles pour recueillir des commentaires détaillés sur les besoins des utilisateurs et la manière dont ils interagissent avec l'application prototype. La première série de tests se concentre sur la collecte d'impressions générales et l'identification des problèmes ou obstacles majeurs que les utilisateurs peuvent rencontrer lorsqu'ils tentent d'effectuer des tâches ou d'accéder à des fonctionnalités. La deuxième série de tests est ensuite utilisée pour recueillir des commentaires plus spécifiques sur ces problèmes et pour observer la manière dont les utilisateurs interagissent avec les fonctionnalités nouvelles ou mises à jour qui ont été implémentées sur la base des résultats de la première série de tests. Ce processus me permet d'identifier toutes les zones de l'application susceptibles de provoquer de la confusion ou de la frustration chez les utilisateurs, et d'apporter des améliorations itératives à la conception.

Etude d'utilisabilité
Round 1

- Les utilisateurs ont besoin d'une barre de recherche pour rechercher leurs cafés préférés.
- Les utilisateurs ont besoin d'un meilleur moyen de trouver leur adresse et de la mettre à jour.
- Les utilisateurs ont besoin d'options « extras » dans l'onglet produit.

Etude d'utilisabilité
Round 2

- Le processus de « paiement » doit être plus complet et plus fluide.
- L'onglet Commandes doit être plus clair.
- Les utilisateurs ont besoin d'un onglet « profil » pour gérer leurs informations.

Maquettes
Après la première étude d'utilisabilité

Les premières conceptions ne sont pas vraiment complètes mais simplement une visualisation de l'application. Après une première étude d'utilisabilité, j'ai revu le design pour mieux répondre à tous les utilisateurs avec de nombreuses fonctions comme la barre de recherche ou la section « dernière commande ».

Maquettes
Après la seconde étude d'utilisabilité

La deuxième étude d'utilisabilité révèle que certains utilisateurs ne sont pas familiers avec l'onglet de suivi des commandes. Je l'ai conçu pour être plus clair et pour éviter de perdre l'attention des utilisateurs.

graphical user interface, application

Wireframes numériques vs maquettes

Prototyping
Prototype haute fidélité

Le prototype final haute fidélité présentait des flux d'utilisateurs plus propres pour commander un café et passer à la caisse. Il répond également aux besoins des utilisateurs en matière d'option de ramassage ou de livraison ainsi que d'une plus grande personnalisation. Il comprend également un système de conception avec toutes les fautes de frappe, les icônes de couleurs et certains composants.

Prototyping picture

Prototype haute fidélité de l'œuvre finale.

Considérations relatives à l'accessibilité

Afin de garantir une navigation facile dans l'application, je me concentre sur la conception des titres, des étiquettes et des boutons, en m'assurant qu'ils sont clairs et cohérents dans toute l'application. Cela implique de sélectionner des styles et des tailles de police appropriés, d'utiliser un texte clair et descriptif, et de garantir que tous les boutons et autres éléments interactifs sont correctement étiquetés et placés à des emplacements logiques. De plus, j'inclurai des icônes claires et reconnaissables qui pourront guider l'expérience utilisateur.

Considérations relatives à l'accessibilité

Pour rendre l'application plus accessible aux utilisateurs malvoyants, je me suis assuré d'utiliser des couleurs très contrastées et des tailles de texte plus grandes dans toute l'interface. L’utilisation de couleurs très contrastées, comme du texte noir sur fond blanc, permet aux utilisateurs malvoyants de distinguer plus facilement les différents éléments à l’écran. Des tailles de texte plus grandes permettent également aux utilisateurs malvoyants de lire plus facilement le texte à l'écran.

Considérations relatives à l'accessibilité

Pour garantir que l'application est entièrement accessible aux utilisateurs qui utilisent des lecteurs d'écran, je me suis assuré d'utiliser un texte alternatif descriptif pour toutes les images utilisées dans l'interface. Le texte alternatif, abréviation de texte alternatif, est une brève description d'une image qui peut être lue par les lecteurs d'écran pour permettre aux utilisateurs de mieux comprendre le contenu de l'image. Cela garantit également que les images seront correctement décrites.

graphical user interface, text, application, chat or text message
Points à retenir
Impact

Cette application 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 les aident dans tout ce processus de commande. « Dans l'ensemble, l'application était un moyen pratique et agréable de commander du café en déplacement. Je vais certainement le télécharger »

Points à retenir
Ce que j'ai appris

J'ai appris que la conception d'un simple bouton peut avoir un impact significatif sur l'expérience utilisateur. En conséquence, il est essentiel de mener des études d’utilisabilité approfondies afin de créer une meilleure conception, à la fois efficace et intuitive. J'ai également appris qu'il est crucial de prendre le temps d'examiner et de tester attentivement la conception afin d'offrir une expérience utilisateur positive.

L'étape suivante
Plus d'études d'utilisabilité

Mener une série supplémentaire d'études d'utilisabilité afin de valider en profondeur l'efficacité des solutions mises en œuvre pour résoudre les problèmes identifiés lors des études précédentes. Les résultats de ces études fourniront des informations précieuses pour savoir si les problèmes rencontrés par les utilisateurs ont été résolus efficacement et si des améliorations supplémentaires peuvent être apportées.

L'étape suivante
Les spécifications de conception

Développer des spécifications de conception qui détaillent tous les aspects de la conception, y compris la mise en page, la typographie et les interactions. Inclure des informations sur tous les éléments visuels et fonctionnels tels que la police, les jeux de couleurs, la navigation, les boutons, les liens, etc. Spécifier comment les différents composants fonctionnent ensemble et comment ils répondent aux entrées de l'utilisateur pour aider à décrire la conception en détail.

L'étape suivante
Répéter

Rester impliqué dans le processus de développement pour garantir la cohérence de la conception tout au long du développement. Examiner régulièrement les progrès, fournir des commentaires et effectuer les ajustements nécessaires. Assurer la bonne mise en œuvre des détails de conception et des spécifications. Confirmer que le produit final adhère à la vision de conception originale avant sa sortie.

graphical user interface, text, application, chat or text message