Le Poêlon Gourmand

Refonte UI/UX du site web d'un service de traiteur

MON RÔLE
Direction artistique, identité visuelle, conception d'un logo, maquettes, conception et développement d'une page web.
LOGICIELS UTILISÉS
Sketch, Anima Plugin, Keynote, Principle, Photoshop, Illustrator

Contexte

Le Poêlon Gourmand est un traiteur qui offre ses services dans la grande région de Montréal. Il se spécialise dans la cuisine internationale et se distingue en servant ses plats dans d'immenses poêlons. C'est une expérience unique pour des rassemblements allant de 30 à 1000 invités.

VOIR LE SITE

Identité de la marque

Cette marque est jeune, innovante et abordable. J'ai choisi des couleurs qui sont invitantes et amusantes, et dessiné des illustrations fantaisistes pour ajouter de la personnalité. L'interface utilisateur se devait d'être attrayante pour les enfants et transmettre l'idée que les cours de Pufflang ne seront pas ennuyeux car ils sont conçus pour eux. En même temps, elle devait être suffisamment sérieuse pour gagner la confiance des parents.

Conception du logo

Le logo est aussi une mascotte qui attire l'attention. Il pourrait peut être plus tard devenir un personnage animé si Pufflang devenait une application. J'ai expérimenté avec des croquis à la main avant de passer aux croquis numériques. La version qui a été retenue comprend un macareux et des bulles de conversation. Les macareux sont agiles dans toutes sortes d'environnements, ce qui correspond à la mission de Pufflang : rendre les enfants à l'aise dans de nombreuses langues.

Le défi

Le Poêlon Gourmand offre un service de traiteur professionnel, haut de gamme et original. Toutefois, son site présentait de sérieuses lacunes, surtout au niveau de l'architecture de l'information menant à une expérience utilisateur moins qu’optimale. Entre autres, il y avait une navigation confusionnante, un manque de lisibilité et plusieurs zones grises par rapport aux prix et aux conditions. J’ai donc complété une refonte de site qui permettrait au Poêlon Gourmand d’exploiter son plein potentiel.

Jeune enfant faisant signe à l'écran lors d'un cours de langue en ligne interactif et amusant. "Apprendre avec" écrit dans des bulles de dialogue avec le logo du mot-symbole pufflang.

L'objectif ? Mettre en évidence le concept unique et l'essence raffinée de la marque et offrir une expérience utilisateur agréable.

Pour ce faire, il était essentiel d'alléger l’architecture de l’information et de guider les utilisateurs pour qu'ils puissent effectuer facilement ces tâches clés :

  • Se familiariser avec les avantages du Poêlon Gourmand.
  • Connaître les plats disponibles sur le menu
  • Comprendre les tarifs
    et avoir une idée de ce qu'un évennement pourrait leur coûter
  • Comprendre les conditions de service

Le projet des Haltes Découvertes a été lancé par la ville de Montréal et d'autres contributeurs pour permettre aux visiteurs de redécouvrir le site patrimonial du Mont-Royal. Il se compose de 3 types d'éléments : des marqueurs coniques, des haltes où les randonneurs bénéficient de vues magnifiques et des cartes topographiques du site.

Ils sont un peu partout dans le parc et ont pour but d'attirer subtilement l'attention sur des points de repère historiques ou géographiques dans une approche d'orientation passive. Les indices en particulier, ont été conçus pour faire allusion à ces points de repère avec leurs inscriptions sur des plaques de bronze.

Le défi

Développer un outil digital qui guiderait les utilisateurs juste assez sans détourner leur attention de leur environnement. Le principal défi consistait à combler l'écart entre l'intention des éléments en place et la compréhension des utilisateurs pour leur permettre de profiter pleinement de l'expérience. Nous devions également trouver des solutions de découverte et de navigation qui n'interfèrent pas avec la nature.

Le but : élever le projet Escales Découverte et permettre aux visiteurs d'explorer le site plus à fond en ayant des informations enrichissantes à portée de main.

Dans le cadre du projet Escale Découverte développé par la ville de Montréal, nous avons conduit une recherche et élaboré un concept d’application pour rehausser le projet et atteindre son but initial: ramener les gens dans les sentiers du Mont Royal et leur faire redécouvrir ce lieu à l’histoire riche.

Analyse

Schéma d’affinité avec post-its pour résumer et organiser les informations recueillies lors des entrevues.

Diagramme d'affinité avec post-its pour effectuer l'analyse des données.

Observations clés

Plusieurs personnes ne savent pas qu'il y a des indices
Les gens ont tendance à les ignorer ou à ne pas les remarquer.
Les gens ne savent pas quoi faire avec les indices.
Il est difficile de les remarquer si les gens n’empruntent pas les sentiers.

Ce que les gens ont dit quand nous leur avons demandé s'ils avaient remarqué les indices et ce qu'ils pensaient qu'ils étaient...

“Je viens ici avec mon groupe une fois par année, mais je ne suis jamais allée dans les sentiers”

"Je ne sais pas; des souches d'arbres recouvertes ?"

"Je marche ici tous les matins depuis 9 ans et je ne les ai jamais vus!"

Approche stratégique

Nous avons conclu que, bien que les indices faisaient des clins d'œils à des faits historiques et à la faune et la flore du Mont Royal, il était nécessaire de donner aux gens des informations plus explicites afin qu'ils puissent mieux comprendre et ne passent pas à côté de pépites qui pourraient améliorer leur expérience. Nous avons donc entrepris de guider et d'informer les utilisateurs.

Concept de solution

Avant la conception finale, nous nous sommes mis à la place de nos utilisateurs pour savoir qui utiliserait le produit et comment le leur introduire.

Application mobile

Nous avons conçu une application mobile avec deux sections :

  • Section exploration

    Permet aux utilisateurs de planifier leur visite en fonction des monuments historiques, de la faune et de la flore ou des belvédères qu'ils souhaitent visiter sur le mont Royal.

  • Section chasse au trésor

    Transforme l'expérience en jeu et propose différentes chasses pour chercher des indices et apprendre des faits sur le site tout en respectant les contraintes de l'utilisateur (durée, difficulté, temps pour compléter la chasse).

Maquette de l'interface utilisateur de l'application Mount Royal.

Identité de marque et
"design system"

Comme il s'agissait d'une refonte du site Web, j'ai tenu à conserver le logo existant et la couleur principale de la marque. J'ai également élargi la palette de couleurs avec des teintes invitantes rappelant un repas délicieux. J'y ai ajouté un charbon foncé pour créer un contraste et offrir un rappel des poêlons. J'ai aussi choisi des textures variées pour représenter les différentes cuisines du monde et maintenir l'intérêt visuel.

Actifs de la marque, icônes et palette de couleurs.
Retournez votre téléphone à l'horizontale ou regardez sur le bureau pour mieux voir la vidéo !
Retournez votre téléphone à l'horizontale ou regardez sur le bureau pour mieux voir la vidéo !

Ce que j'ai appris

L'élaboration d'un "design system" à partir de zéro prend du temps. Beaucoup de temps.

J'ai rien à ajouter.

Maquette de l'interface de bureau et du design web fini pour la refonte de Poêlon Gourmand, un traiteur à Montréal, Canada.

Le défi

Tout comme une maison peut avoir besoin de rénovations, les sites web demandent parfois une refonte en profondeur. Dans le cas de BMI, leur clients éprouvaient de la frustration en naviguant sur le site et les inondaient d'appels parce qu'ils n'arrivaient pas à trouver les informations dont ils avaient besoin. Ils devaient également gérer une interface non-intuitive, comme le fait de cliquer sur un lien qui ouvrait directement un PDF sans avertir l'utilisateur.

Objectif

L'objectif principal était de répondre à toutes les questions récurrentes des clients et d'organiser les informations pertinentes afin de réduire au maximum les appels téléphoniques. Il était essentiel de créer un design simple et efficace qui garantirait une expérience utilisateur positive.

Processus

On a commencé avec une séance de brainstorming avec le client pour m'assurer que je comprenais sa vision. Ensuite, j'ai modifié tous les formulaires de commande et les ai rendus interactifs pour qu'ils soient faciles à remplir en ligne. De là, j'ai dessiné des maquettes, apporté des modifications au design et finalement codé le site Web en HTML et CSS avec des intégrations JavaScript. Pour finir, j'ai mis en place une carte interactive pour afficher les représentants de vente de façon pratique sur la page contact.

Une recherche sur la concurrence a aidé à identifier ce qui était courant dans le domaine et comment mon client pouvait se démarquer. L'équipe de BMI Ortho est très soudée et met à l'aise toutes les personnes qui entrent en contact avec elle. Ils proposent également des prothèses sur mesure, fabriqués directement sur place. Nous avons mis l'accent sur cela avec quelques touches personnelles comme une galerie photo virtuelle.

Ordinateur montrant la page d'accueil du site web de BMI sur une section qui parle de leur technologie de numérisation 3D.
Conception de site web adaptif pour le site web de BMI sur téléphone et tablette.

Ce que j'ai appris

Un bon design adresse de vrais problèmes

"Beau" design ne rhyme pas toujours avec bon design. C'est seulement lorsque qu'on a addressé les besoins de l'utilisateur et qu'on a rendu les choses plus faciles pour celui-ci qu'on peut dire que c'est réussi.

J'aime travailler de façon autonome

Durant les premières semaines du projet, j'ai travaillé sur place, mais une bonne partie a été réalisée à distance. J'ai trouvé cela très pratique et j'ai été aussi efficace (sinon plus) que si j'avais fait le déplacement à chaque jour.

Prototype et RA 

01- Prototype d'InVision que nous avons ensuite testé sur place avec de vrais utilisateurs.

02- RA (réalité augmentée) 360 que nous avons développée pour permettre aux visiteurs de voyager dans le temps et de voir à quoi ressemblait l'endroit où ils se trouvent à une autre époque.

Conception de l'interface utilisateur (IU) pour l'application Mont Royal dans Figma.

Ce que j'ai appris

Les instructions ne sont pas toujours claires

De nombreux projets peuvent sembler vagues ou avoir des contours flous. C'est notre travail en tant que designer, en particulier dans le domaine de l'expérience utilisateur, d'apporter de la clarté à l'utilisateur et de lui assurer une expérience positive.

Comment être flexible

Nous avons commencé avec une équipe de 6 personnes, mais tout au long du projet, certains membres de l'équipe n'en voyaient pas l'utilité et ont abandonné en cours de route. Ils ont participé à des recherches sur le terrain, à des entretiens et à un premier brainstorming. L'équipe finale était composée de deux personnes : mon camarade de classe, Eliot Zeinaty, et moi-même. On a donc dû restructurer notre approche et sacrifier certaines décisions esthétiques pour respecter notre délai serré. Nous avons jonglé avec le wire-framing, la conception d'applications et le prototypage pour présenter un produit cohérent. Au final, j'étais responsable de la conception de l'ensemble de la section "Chasse au trésor". J'ai appris à établir des priorités de façon plus efficace et à m'adapter à des circonstances changeantes.

"Danke schön", "Bitte schön !"

L'une des familles que nous avons interrogées parlait allemand. Grâce à eux, je sais maintenant comment dire "de rien" dans cette langue. C'est vraiment bien de rencontrer de vraies personnes qui pourraient utiliser votre produit à l'avenir.

Ordinateur de bureau et ordinateur portable montrant la section des produits de l'orthèse de genou du site Web de BMI.