Sélectionnez la page

UI Design & Case Studies

Bienvenue dans mon portfolio UX Design.

This part of my portfolio includes 3 UI case studies, from recherche de maquettes hi-fi:

  • Application Padoca: application e-commerce pour une boulangerie brésilienne à Montréal, QC
  • Fleuriste NYC: site web responsive pour Florist NYC, un fleuriste basé à New York City, USA.
  • La nourriture saine: projet social pour aider les gens à apprendre à cuisiner des repas plus sains. Y compris des conceptions pour une application et un site Web réactif.

Le projet d'application de Padoca

Client

  • Pâtisserie Padoca Montréal

Services

  • UI for app

Livrables

  • Maquettes basse fidélité
  • 1er tour de recherche d'utilisateurs
  • Ajustements et prototype haute fidélité
  • Guide de style

Confronté à de mauvais services de livraison avec des partenaires tiers, le Padoue'Les propriétaires ont décidé de commencer à livrer eux-mêmes leurs produits.

Avec une toute nouvelle application, ils pouvaient contrôler la livraison et d'autres options, en plus de disposer de données importantes sur les préférences de leurs clients.

L'application les aiderait à offrir de meilleures options de livraison et à améliorer le développement de produits pour leur entreprise.

À propos des concurrents

Montréal compte quelque 6 autres concurrents sur Padoue, mais personne n'a d'application exclusive. Ils utilisent principalement le téléphone pour obtenir des commandes sur des services tiers comme Foodora ou Uber Eats. Ou vous pouvez commander leur envoyer un e-mail.

Aucun d'entre eux ne propose de commandes en ligne via son propre site Web.

Qui sont les clients de Padoca ? Créer des personas pour une meilleure compréhension.

Après avoir mené des recherches sur les clients de Padoca, je crée 2 personas, à partir de caractéristiques qui se sont démarquées des formulaires collectés. La méthode de recherche utilisée ici était un formulaire de 10 questions créé sur Google Forms. Il a été envoyé directement aux clients qui ont accepté d'y répondre sur leur temps libre.

parcours utilisateurs et premières maquettes

Avec les 2 personnages en tête, il était temps de comprendre comment les gens utiliseraient l'application au cours d'une journée ordinaire. Il fallait considérer la parcours des utilisateurs afin de construire quelque chose, il était facile et rapide à utiliser lors d'une journée chargée. Lors de la recherche, les clients souhaitent voir deux fonctionnalités (présentées sur les personas) : réservation de table à ces émotions et de commande en ligne.

J'ai d'abord créé des exemples de trajets d'utilisateurs pour imaginer comment Philippe utiliserait l'application lors d'une journée chargée après le travail, alors qu'il était dans le métro ou le bus pour rentrer chez lui.

Pour lire un parcours utilisateur plus détaillé basé sur le personnage de Philippe, veuillez cliquer sur ici.

Après une compréhension claire de la parcours de l'utilisateur, il est devenu plus facile de penser et de développer des écrans de maquette. J'ai conçu essentiellement deux séries de suggestions à soumettre à l'approbation des clients. J'ai dû réfléchir à la manière d'intégrer les besoins des consommateurs dans un design attrayant.

Maquettes

de Padoue les propriétaires avaient une idée précise du chemin à suivre sur cette application. Compte tenu de tous les aspects de la recherche utilisateur, il était temps de concevoir les premiers wireframes sur Figma. J'ai pensé qu'il était important de faire une autre recherche pour valider les wireframes. Cela montrerait aussi si j'étais toujours sur la bonne voie. 

Le concept original avec 3 colonnes…

… a été modifié après une recherche utilisateur.

Idem pour l'écran de révision….

… où la possibilité de changer de commande a été ajoutée.

Regardez les tests vidéo lo-fi :

PROTOTYPE HAUTE FIDÉLITÉ ET TESTS FINAUX

Avec les 5 tests en tête, le prototype hi-fi a été créé. J'ai fait faire des tests après aussi, pour valider certaines modifications apportées. Je partagerai les screens réalisés mais vous pouvez tester le prototype fonctionnel complet en cliquant ici.

Projet de site Web réactif pour fleuriste NYC

Fleuriste NYC est un petit fleuriste situé à New York, aux États-Unis. Ils avaient besoin d'un site Web réactif pour montrer et vendre en ligne. Comme il s'agit d'un marché encombré, le défi ici était d'intégrer certaines fonctionnalités et services que les utilisateurs aiment mais ne peuvent pas trouver sur les sites Web d'autres petits fleuristes.

Client

  • Fleuriste NYC Inc.

Services

  • UI for responsive website

Livrables

  • la recherche de l'utilisateur
  • Maquettes basse fidélité
  • Ajustements et prototype haute fidélité

Clients de Florist NYC Inc. : créer des personas pour une meilleure compréhension.

J'ai mené des recherches en ligne pour obtenir des clients de fleuristes dans la région de New York (vous pouvez voir la recherche et les résultats ici). Il était important d'avoir des gens qui achètent des fleurs en ligne, mais aussi des gens qui ont l'intention d'acheter mais qui ne font pas confiance à 100% à ce genre de service. Le but ici était de comprendre quelles fonctionnalités les gens aimeraient avoir pour acheter des fleurs en ligne. Et surtout quelque chose qui pourrait faire Fleuriste Inc.Le site de se démarque de la concurrence.

quelques idées de maquettes basées sur les premières recherches des utilisateurs

Avant de réaliser les premiers wireframes en Adobe XD, j'ai esquissé quelques idées sur papier pour obtenir des visuels rapides sur les problèmes à résoudre. Comme les utilisateurs veulent choisir et acheter rapidement, un design clair avec différentes formes pour les images était la voie à suivre. Visuellement, était plus efficace pour naviguer d'une section à l'autre. Mon hypothèse a été validée par quelques recherches pour le test du prototype.

Pour les premières maquettes, je développe de petites sections où les photos seraient placées pour rendre le processus d'achat facile et rapide. Comme les gens veulent parfois acheter à la dernière minute, il est important de leur faire d'excellentes suggestions sur la page d'accueil ou de leur présenter un moyen simple de choisir. Les utilisateurs ont identifié qu'un lien vers les médias sociaux serait formidable pour avoir de l'inspiration et des idées.

PROTOTYPE HAUTE FIDÉLITÉ ET TESTS FINAUX

Dans les galeries suivantes, vous pouvez retrouver les prototypes hi-fi du site responsive. En haut, j'ai ajouté les maquettes pour la version de bureau. En bas, les maquettes de la version smartphone ont été ajoutées. Pour ces mockups, j'ai gardé les points qui se sont démarqués lors de la recherche : Fleuriste NYC clients des réseaux sociaux à ces émotions et de suggestions d'achat rapide.

pour le bien de la société : application et site Web pour une alimentation saine

Application et site Web Healthy Food est un projet de bien-être social pour apprendre aux gens à préparer des aliments plus sains. Sur la base de certaines recherches, j'ai essayé de concevoir quelque chose pour servir les clients de base : les personnes qui ont besoin de cuisiner pour elles-mêmes et/ou leurs familles ; et les personnes qui ont besoin de cuisiner quelque chose pour des occasions spéciales, pour impressionner la famille et les invités lors d'un dîner spécial, par exemple. 

projet

  • Aider les gens à préparer des repas plus sains

Services

  • UI for app and responsive website

Livrables

  • la recherche de l'utilisateur
  • Maquettes basse fidélité
  • Ajustements et prototype haute fidélité

Personas créés après la recherche d'utilisateurs

J'ai mené des recherches en ligne pour mieux comprendre ce qui motiverait les gens à cuisiner plus sainement. L'acte de cuisiner prend du temps et coûte de l'argent. J'ai découvert essentiellement deux groupes : l'un qui veut/a besoin de cuisiner régulièrement, et l'autre qui veut cuisiner pour des occasions spéciales. 

Les deux personnages présentés ici synthétisent ces 2 groupes et m'aident à concevoir des fonctionnalités pour l'application et ensuite pour que le site Web serve les deux.

Ci-dessous vous avez cartes de voyage à ces émotions et de énoncés de problèmes créé pour aider à l'idéation des premiers croquis :

quelques idées de maquettes basées sur les premières recherches des utilisateurs

L'équipe de huit fous ont été la première étape pour commencer à avoir des idées claires sur la façon de concevoir et de présenter les fonctionnalités de l'application et du site Web.

Pour les premières maquettes en Adobe XD, j'ai développé des sections où les photos seraient placées pour inciter les utilisateurs à apprendre à préparer ce repas.

Voici la maquette de l'écran d'accueil en 3 versions : téléphone portable, tablette et écran de bureau.

prototypes hi-fi pour application et site Web

Après l'idéation et les premières maquettes, il était temps de développer prototypes hi-fi en ajoutant des photos et de vrais textes.

L'un des défis ici était de concevoir l'application et le site Web et de maintenir la cohérence de l'image de marque. Sur l'application, j'avais besoin d'ajouter sur les écrans des fonctionnalités que sur un site web on peut les placer différemment, à la suite d'une autre architecture.

Voici le flux de travail de base pour certains écrans de l'application sur un court clip :

Ci-dessous, vous avez quelques écrans de site Web et la façon dont ils doivent s'ajuster (ordinateur de bureau et tablette).

Je choisis pour la version tablette le menu hamburger. Ici vous pouvez voir le accueil et l’équipe de recettes rapides .

Merci de l'intérêt que vous portez à mon travail!

Je suis disponible à la location ou à la pige
Portfolio de conception de sites WebCommuniquez avec nous