Refonte du site web

Description du projet

Venue and Menu est l'idée originale de Josette Buisson, présidente et directrice créative d'Alias Color, qui estime qu'« un message de communication brillant doit être articulé autour de la couleur ». Ainsi, ce projet s’inspire d’une sorte de synesthésie où les palettes de couleurs, le design, les recettes et les produits tournent autour d’ambiances et de tendances.

Expérience utilisateur

Défi à résoudre

La demande initiale du client était simplement de repenser le site pour le rendre plus joli et plus utilisable sur les appareils mobiles.

Au fur et à mesure que la conversation évoluait, il est également devenu évident qu'il était nécessaire de présenter du contenu et des produits commandités pour améliorer la rentabilité du site.

Recherche

En examinant le contenu existant, nous avons remarqué que son organisation était incohérente. Certaines sections avaient des pages de destination et des catégories clairement définies, d'autres présentaient simplement le dernier article aux visiteurs. Pour trouver du contenu supplémentaire, les visiteurs devaient naviguer à travers une multitude de menus et sous-menus.

Même dans les menus eux-mêmes, la nomenclature n'était pas toujours la même, ce qui pouvait amener les utilisateurs à abandonner leur recherche, ou à ne pas pouvoir retrouver le contenu qu'ils avaient vu précédemment.

Le client souhaitait également ajouter des achats en ligne au site, qui n'était auparavant qu'un blog. Nous avons comparé les offres de Shopify et Webflow pour le client.

Afin de clarifier l’offre du site pour ;es visiteurs, nous avons choisi de rendre explicite la structure du site. Dans un premier temps, nous avons fourni un organigramme hiérarchique et quelques wireframes au client pour lui montrer comment nous avons envisagé appliquer la structure et les modèles pour répondre à ses besoins.

Le client a préféré les maquettes haute résolution pour mieux saisir le potentiel. Les échanges avec les graphistes ont permis d'étoffer certains éléments et de clarifier certains besoins.

Solution

Nous avons défini certaines sections de contenu qui seraient présentes en permanence sur chaque page (par exemple, en-tête, pied de page), et d'autres qui seraient uniques, mais obligatoires, par gabarit (par exemple, un article en vedette dans une catégorie, ou les derniers articles de cette catégorie). Enfin, chaque gabarit contiendrait une section dans laquelle les créateurs de contenu pourraient choisir parmi tout type de blocs de contenu (par exemple des images, des vidéos, du texte, d'autres contenus présentés sous forme de tuiles, etc.), un peu à la manière dont Medium ou la dernière version de WordPress permettent de modifier le contenu.

Les principales catégories de contenu étaient les suivantes :

• Magazines : articles de style de vie
• Cookbook : recettes
• Lookbook : articles sur les styles et les palettes de couleurs
• Marketplace : achats en ligne (prévu pour une mise à jour ultérieure)

En utilisant des étiques, les créateurs de contenu pourront lier le contenu entre les différentes catégories.

La cliente était vraiment intéressée à ce que son futur site intègre un méga menu comme celui de Goop comme navigation principale. Étant donné que les menus de navigation qui apparaissent au survol ne respenctent pas les bonnes pratiques en accessibilité, un compromis a été atteint en veillant à ce que chaque catégorie ait sa page d'index, qui ferait office de table des matières. De cette façon, les visiteurs qui naviguent avec des claviers pourraient toujours accéder au contenu présenté dans le méga menu.

Les designers voulaient avoir la possibilité de changer les couleurs de chaque article, afin de pouvoir apporter plus de personnalité à ceux-ci. Semblable au fonctionnement d'iTunes ou du magasin en ligne de la Switch de Nintendo, nous avons suggéré que le guide de la marque (par exemple, polices, espacement, etc.) soient d'abord solidifiées. Avec cela en main, il serait possible d'appliquer des couleurs arbitraires à un article, tout en conservant la mise en page. Cela garantirait également que les visiteurs comprennent toujours qu’ils se trouvent sur le même site, même si les couleurs sont différentes selon les publications.

Sur le plan technologique, le client a opté pour Webflow, car son besoin était principalement de création de contenu, avec un peu de commerce électronique.

Crédits

• Stragégie : Gisela Sleizer, Marie Dubeau-Labbé
• Design UX, architecture d’information : Mat Janson Blanchet
• Direction technologique : Baptiste Laget
• Intégration : Jérôme Lin
• Direction artistique, design: Josette Buisson, Ian Chouinard, Annie St-Arneault
• Gestion de projet: Marie Dubeau-Labbé

Tous les droits d'auteur et produits appartiennent à leurs propriétaires respectifs.