Module de commande
Refonte UX/UI dâun module de commande en ligne (B2C/Saas) utilisĂ© par les restaurateurs clients de Zelty.
Produit
B2C/B2B
Role
Product Designer
Client
Zelty
Processus đ
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.
Ă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) : plugin intĂ©grĂ© sur Adobe XD, qui m’a permis d’exporter mes wireframes sur le logiciel et ainsi d’avoir une meilleure visualisation des nombreux parcours utilisateurs.
- Notion (suivi de projet)
ĂlĂ©ments communs et dĂ©clinaisons
La contrainte en UI Design rĂ©sidait dans le fait que les interfaces devaient ĂȘtre pensĂ©es de sorte Ă ce qu’elles soient facilement personnalisables 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.
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 check-out reprend les éléments du panier ainsi que les informations personnelles du client. Si le client est connecté les champs sont pré-remplis.
