SĂ©lectionner une page

Zelty

Module de commande en ligne | UX/UI Design

Brief projet 📝
Zelty propose un logiciel de caisse pour restaurants (+2000 clients) ainsi que d’autres produits dont un module de commande en ligne. L’objectif de cette mission Ă©tait donc de faire une refonte UX/UI de ce module.
Specs 📝

Ce module de commande en ligne s’intĂšgre sur le site vitrine d’un restaurant. L’idĂ©e Ă©tait donc d’avoir un outil complet qui reprenait les codes des interfaces spĂ©cifiques Ă  ce domaine, tout en restant personnalisable.

Étapes & livrables ✅

  • Wireframes haute fidĂ©litĂ© des diffĂ©rents Ă©crans (destkop et mobile)
  • User flow : reprĂ©sentation graphique des chemins de navigation et des diffĂ©rents type de parcours utilisateurs (user connectĂ©/non connectĂ©, choix des modes de commande etc.)
  • Maquettes haute dĂ©finition Ă  partir des wireframes validĂ©s et validation de l’UI
  • Prototypage : crĂ©ations de prototypes interactifs suite aux maquettes validĂ©s et mise en avant des diffĂ©rents parcours utilisateurs
Outils 🛠

  • Adobe XD
  • Overflow (User Flow)
  • Notion (suivi de projet)

UX Design 💭

User flow & Wireframes

User flow : l’objectif de cette Ă©tape est de venir complĂ©ter le travail effectuĂ© sur les wireframes, permettant ainsi une meilleure reprĂ©sentation visuelle des chemins de navigation et Ă©ventuels points de frictions. Dans le cadre de ce projet, il s’agissait surtout de bien dĂ©finir les diffĂ©rents parcours utilisateurs qui pouvaient diffĂ©rer en fonction du mode de commande (livraison, sur place etc.) et si un utilisateur est connectĂ© ou non Ă  son compte client.

Le parcours utilisateurs de la commande en ligne Ă©tait limitĂ© par certaines rĂšgles du logiciel client. Le choix du restaurant ou l’adresse de livraison, ainsi que la date et l’heure choisie pour la commande sont des paramĂštres qui conditionnent les produits qui seront affichĂ©s dans la carte. Il n’était donc pas envisageable de proposer Ă  l’utilisateur de naviguer dans la carte avant d’avoir renseignĂ© ces informations.

L’utilisation du logiciel Overflow, avec un plugin intĂ©grĂ© sur Adobe XD, m’a permis d’exporter mes wireframes sur le logiciel et ainsi d’avoir une meilleure visualition des nombreux parcours utilisateurs.

User flow | Maquettes HD | Mobile

User flow | Maquettes HD | Desktop

UI Design 🛠

ÉlĂ©ments communs & dĂ©clinaisons.

La contrainte en UI Design rĂ©sidait dans le fait que les interface devaient ĂȘtre pensĂ©es de sorte Ă  ce qu’elles soient facilement customisables par les clients de Zelty, et que ceux-ci puissent ainsi crĂ©er une vitrine Ă  leur image.

Les paramĂštres d’identitĂ© graphique devaient donc ĂȘtre les plus limitĂ©s possible afin de garder le module de personnalisation le plus simple Ă  dĂ©velopper. Les interfaces devaient ĂȘtre basĂ©es sur un maximum d’élĂ©ments communs afin que les dĂ©veloppements de chaque module soient abordĂ©s comme des dĂ©clinaisons.

👉 Choix du mode de commande et connexion client

Representation du parcours utilisateur lors de la livraison. Ici, l’utilisateur se connecte Ă  son compte client.

👉 SĂ©lection du restaurant & autres paramĂštres.

Lorsqu’un utilisateur est connectĂ© on ne lui propose qu’un seul restaurant : celui le plus prĂšs de chez lui. Au clic sur les restaurants,
une modale lui permet de choisir le jour et l’heure pour sa livraison (wording qui change selon le mode de commande).

👉 Carte d’un restaurant & options de menus.

La carte d’un restaurant reprend les codes des plateformes de restaurations similaires avec, des informations pratiques sur le restaurant, un affichage des diffĂ©rents menus/plats proposĂ©s, un panier etc.

👉 Panier & validation de commande.

La partie checkout reprend les éléments du panier ainsi que les informations personnelles du client. Si le client est connecté les champs sont pré-remplis.