Image de couverture

Squirrel Café, application de commande en ligne.

Conception de l'interface de commande de l'enseigne Squirrel Café, que j'ai créé, en prenant en compte les attentes utilisateurs.

Contexte

Ce projet s’inscrit dans le cadre d’un cours de design d’interface, maquettage et prototypage. L’objectif était de concevoir une application complète de prise de commande pour une enseigne de restauration fictive, intégrant les fonctionnalités suivantes :

  • Prise de commande en ligne (livraison et click & collect).
  • Gestion des points de friction, notamment pour les clients hors zone de livraison.
  • Intégration d’un point de satisfaction (offre spéciale fidélité).
  • Création d’un produit variable (ici, la formule "Maxi Goûter", à composer).
  • Ajout d’un produit additionnel (ici, personnalisation des muffins).
  • Design de l’interface du panier.
  • Développement d’une identité visuelle (logo, palette de couleurs, polices) à adapter sur l'interface.

J’ai choisi de travailler sur la marque Squirrel Café, projet que j'ai en tête depuis quelques temps. Il s'agit, dans mon imaginaire, d'une enseigne réputée pour ses muffins gourmands et son ambiance chaleureuse, alliant raffinement et accessibilité. Le catalogue proposait des formules goûter, des pâtisseries, des boissons chaudes, des jus...

Contraintes clés :

  • Gérer la frustration du client hors zone de livraison en proposant automatiquement le click & collect.
  • Mettre en avant un produit nouveauté et une offre (compte fidélité et nouveauté).

Prototypage de l'application Squirrel Café

Prototype complet.

Exemple de composant créé pour l'occasion

Exemple de composant créé pour l'appli.

Réalisation

J’ai réalisé ce projet seul, j'ai donc pu couvrir l’intégralité du processus : de la réflexion UX au design UI, en passant par la création graphique.

Les tâches :

  • Recherche UX : Identification des points de friction (ex. : livraison impossible) et des opportunités (ex. : fidélisation).
  • Design UI : Création des maquettes pour chaque écran (menu, panier, personnalisation, etc.) avec Figma.
  • Identité visuelle : Développement d’un logo rapide (qui trottait dans ma tête depuis longtemps), d’une palette de couleurs chaudes, et de polices originales et lisibles.
  • Prototypage : Simulation des interactions (ex. : ajout au panier, sélection des options de personnalisation).

Prototype complet

Prototype complet.

Bilan

Mes points forts : l’interface est à la fois esthétiquement originale, en assurant une cohérence visuelle correcte avec la charte créée, tout en répondant aux règles d'ergonomie. De plus, la gestion des contraintes est réussie, et la maquette est même animée.

Si c’était à refaire, je complèterais la maquette en intégrant un système de filtres pour le menu (ex. : par catégorie, par prix), mais avec le temps donné la consigne est entièrement couverte ce qui est déjà pleinement satisfaisant.

Différents écrans de l'interface de commande.

Différents écrans de l'interface de commande.

On regarde d'autres projets ?