AVIS DE NON-RESPONSABILITÉ : Ce projet est uniquement à des fins éducatives et de portefeuille et n'est pas réalisé, détenu ou affilié directement à Teapioca Lounge.

MISE EN SCÈNE — APERÇU

Passé

Un boba shop où je vais a une application, j'ai donc décidé de passer mes commandes par son intermédiaire pour éviter la file d'attente en magasin. Ma première réaction a été : Où est le boba ? Pourquoi n'y a-t-il pas d'images s'il s'agit d'une application de restauration ? Le problème que j'ai défini est que l'application est difficile à naviguer, a besoin d'images/descriptions et a une mise en page déroutante.

Valeur commerciale

Cela fait perdre des bénéfices à la boutique , car cela rend l'application moins attrayante, ce qui réduit le nombre de clients qui passent des commandes. J'ai donc pris sur moi de voir comment la mise en page de l'application pourrait être repensée pour aider les clients à passer leurs commandes.

Pourquoi reconcevoir

Je ne sais pas pour vous, mais si je commande quelque chose, peu importe ce que c'est, je veux savoir à quoi ça ressemble, et chercher une description pour en savoir plus sur le produit. Surtout si c'est boba !

Mes objectifs

• Pour offrir une expérience de commande fluide et une interface utilisateur facile à naviguer
• Proposer une disposition de menu plus descriptive et visuellement attrayante afin que les utilisateurs sachent ce qu'est le produit et à quoi il ressemble

J'ai utilisé l'application et je n'ai pas eu une expérience positive. Mais qu'en est-il des autres utilisateurs de l'application, quelle a été leur expérience ? J'ai décidé de faire des recherches pour le savoir.

Passer en revue les avis

J'ai commencé ma recherche d'utilisateurs en cherchant des avis dans l'App Store. Cela m'a aidé à voir quelles étaient les opinions des utilisateurs fréquents de l'application . La plupart des critiques étaient axées sur les aspects techniques de l'application, mais j'ai réussi à en trouver deux concernant l'expérience de l'utilisateur.

D'après les critiques, nous pouvons voir que la rétroaction globale de l'application est qu'il est difficile de naviguer et qu'elle dispose d'un menu complet qui empêche les utilisateurs d'utiliser l'application.

Entretiens avec les utilisateurs

Ensuite, j'ai mené des entretiens avec 5 utilisateurs qui étaient déjà allés au Teapioca Lounge dans le passé ou qui aimeraient y aller dans le futur. Cela a aidé à comprendre pourquoi les utilisateurs utilisent les applications en premier lieu et ce qui est le plus important pour eux.

Quelques idées clés de l'interview-

• Presque tous les participants aiment parcourir le menu via une application car ils peuvent parcourir quelques/tous les éléments du menu aussi longtemps qu'ils le souhaitent
• La plupart des participants souhaitent commander via des applications pour éviter les files d'attente et c'est plus pratique
• Les participants ont également indiqué qu'ils préféraient les applications faciles à naviguer et permettant la personnalisation.

Après l'interview utilisateur, j'ai demandé aux mêmes participants (5 participants) de tester l'application Teapioca Lounge pour voir comment ils vont interagir avec les fonctionnalités de l'application.

La tâche que j'ai donnée à chaque participant était :

Pouvez-vous m'expliquer comment passer une commande de smoothie avec boba ?

APPROFONDIR – ANALYSE

Définir le problème

Après avoir identifié et analysé les points douloureux grâce à la recherche d'utilisateurs, j'ai défini les points douloureux suivants avec lesquels la plupart des utilisateurs avaient des problèmes.

Pain Point 1 - Application difficile à naviguer

• La disposition du menu est très étendue, ce qui rend la navigation difficile. Les mises en page étendues obligent les clients à deviner où chercher s'ils veulent commander un article d'une manière spécifique.

• Presque tous les utilisateurs ont montré leur frustration à l'idée que l'application n'ait pas d'images. Il est plus difficile pour les utilisateurs de comprendre ce qu'ils commandent et l'article que le magasin vend s'ils ne peuvent pas le voir visuellement.

• Les utilisateurs ont indiqué que le manque de descriptions les oblige à deviner exactement ce que contient l'article qu'ils commandent.

Ensuite, j'ai compilé tous les commentaires, idées et points douloureux énumérés ci-dessus. J'ai catégorisé mes recherches pour avoir une vision plus claire de ce qui était important pour les utilisateurs et développer des idées potentielles.

Flux d'utilisateurs

Maintenant que j'ai compris les problèmes rencontrés par les utilisateurs avec l'application actuelle, j'ai commencé à planifier le flux d'utilisateurs pour les tâches courantes que les utilisateurs effectueraient :

Maquettes

Une fois que j'ai fini de planifier le flux d'utilisateurs, je suis passé à la conception de wireframes pour trouver des idées sur la façon de résoudre les problèmes rencontrés par les clients avec la mise en page actuelle de l'application.

La navigation

Passer une commande

Panier d'achat et modification des commandes

Gagnez et affichez des récompenses

CRÉATION — PROTOTYPE

Maintenant que j'ai créé des wireframes, j'ai commencé à prototyper les conceptions pour qu'elles correspondent au flux d'utilisateurs.

La navigation

De nombreux utilisateurs ne savaient pas comment accéder au menu après avoir sélectionné un emplacement. Désormais, les utilisateurs se verront automatiquement demander l'emplacement à partir duquel ils souhaitent commander après s'être connectés. Une fois l'emplacement sélectionné, ils seront redirigés vers le menu.

Un menu de navigation a maintenant été ajouté au bas de l'écran permettant un accès facile au menu, au portefeuille, aux récompenses et au profil.

Passer une commande

Pour résoudre le problème du manque de descriptions et d'images, tous les éléments du menu ont désormais une image et une description ajoutées.

Panier d'achat et modification des commandes

Les utilisateurs ne savaient pas non plus comment modifier leur commande sans revenir en arrière. Désormais, les utilisateurs disposent d'une méthode clairement définie pour modifier la commande à partir du panier.

Gagnez et affichez des récompenses

Les utilisateurs ne savaient pas non plus comment utiliser la page des récompenses. Maintenant, ils peuvent maintenant voir comment ils peuvent gagner et échanger des récompenses.

TESTS DE VALIDATION

Pour valider ma refonte, j'ai testé mon prototype auprès de 5 personnes. Chaque participant s'est vu confier les mêmes tâches.

• Commander
• Modifier un article dans le panier
• Échanger une récompense
• Enregistrer une option de paiement

Dans l'ensemble, tous les participants ont pu accomplir les tâches, mais j'ai reçu des commentaires communs pour des tâches spécifiques :

Modification d'un élément

Récupérer une récompense

Modalité de paiement

PROTOTYPE FINAL

Vous pouvez voir le prototype fini : ici !

CONCLUSION

Dans l'ensemble, travailler sur ce projet a été perspicace car j'ai pu voir que d'autres rencontraient également les mêmes problèmes que moi lors des tests utilisateurs.

Qu'est-ce que j'ai appris ?

• Les images peuvent avoir un impact énorme en termes de convivialité pour les applications liées à l'alimentation
• La couleur peut avoir un impact sur la façon dont un utilisateur interagit avec une application - (en référence au changement de conception "Appuyer pour modifier" du panier)

• Créer un guide de style expliquant le choix des couleurs et des polices
• Analyse approfondie et tests supplémentaires pour affiner la solution

Si vous êtes arrivé jusqu'ici,

J'espère que tu as apprécié! :)

Connectons-nous

‍ Si vous souhaitez discuter de tout ce qui concerne l'UX / le design ou des opportunités à temps plein, j'aimerais avoir de vos nouvelles ! Vous pouvez me trouver sur LinkedIn .