Lézards Créationlz

Yanaza : e-commerce de thé & infusion 🍵

Publié le 29 octobre 2020

yanaza.fr est une boutique en ligne de thés et infusions. Une large sélection de produits est proposée : thé vert, thé noir, thé oolong, thé rooibos & infusion de fruits. Les produits sont choisis selon leurs ingrédients et proposés à un prix juste (en vrai de vrai les prix sont vraiment 👌🏻)

J’ai eu la chance de pouvoir monter le projet de A à Z ; Créer la marque, réaliser l’identité graphique ainsi que toute la communication : site Internet, supports imprimés, réseaux sociaux. Certains appelleront cela un gros dossier, moi j’appelle cela un festin communicationnel (il existe ce mot ?)

🫖
🍃

Marque 🏮

Ma seule consigne était de faire en sorte de pouvoir vendre du thé sur Internet. Ça m'a bien arrangé puisque j'ai pu décider de tout, en commençant par créer une marque, adaptée et plaisante.

Je n'avais aucune idée de nom, alors après quelques tempêtes de cerveau bien trempées, nous avons défini un périmètre pour le nom de la marque :

  • Elle doit avoir une consonance asiatique
  • Être concise (moins de huit lettres)
  • Ne correspondre à rien de notable socialement ou historiquement en Asie.

Voici une liste de syllabes dans laquelle j'ai pioché pour constituer ces idées de noms :

  • no
  • zo
  • na
  • az
  • no
  • do
  • jo
  • ya
  • za
  • ko
  • yo
  • Yanaza (village Japonais)
  • Ichigo ("fraise" en japonais)
  • Jiin (Jiin = "Temple" en japonais)
  • Karanto ("groseille" en japonais)
  • Tea gong (Gong = palais en chinois)
  • Dento (dento-tekina = "traditionnel" en japonais)
  • Kanua tea
  • Minto Tea ("menthe" en japonais)
  • Chang chang (Qù cháng cháng = "déguster" en chinois)
  • Kudamono ("fruits" en japonais)

Par élimination, nous avons choisi le meilleur... Vite le nom de domaineeee 🏃🏻🏃🏻🏃🏻

Identité graphique 💎

Harmonie colorée 🎨

J'ai choisi un rouge très fort comme couleur principale ce qui permet de donner le dynamisme nécessaire pour la réussite d'un commerce sur Internet ; tellement envoutante... tellement... magique ! Plus sérieusement, un p'tit rouge Coca-Cola là, c'est parfait pour ressortir au mieux du lot et pour donner envie de cliquer ! (Je l'ai noyé dans de l'orange pour brouiller les pistes)

harmonie-colore-yanaza
Harmonie colorée de Yanaza

Comme j'ai l'habitude de le faire, j'utilise un gris extrêmement clair comme couleur de fond pour casser la froideur du blanc. Un gris moyen permet de poser doucement les textes sur le fond en réduisant le contraste entre ces deux éléments. J'opte pour un gris plus foncé permettant de faire ressortir des éléments parmi les contenus textes comme des titres ou des mises en exergues.

Typographie 🖋

L'identité se compose de deux typographies :

  • "Righteous" pour le logo et certains gros titres
  • "Roboto" pour les textes courants et les titres moins importants
Les deux typograhies de Yanaza

Logotype *️⃣

Je n'ai pas vraiment de planches de recherches à montrer à part peut-être cette autre piste non retenue. J'ai eu la chance d'être séduit par un des tous premiers essais.

Piste non retenue
Logo final

Le logo est une simple déclinaison de la typographie "Righteous" avec la couleur primaire de l'harmonie colorée. C'est le style de la typo qui donne l'identité de la marque.

La marque est toujours accompagnée de photos d'ambiances et d'illustrations en filigranes pour apporter de la chaleur.

Webdesign 🖌

L'idée derrière le site Internet est de présenter tous les produits sur la page d'accueil. Cela permet aux utilisateurs d'aller d'avant en arrière entre les sortes de thé et de pouvoir comparer les compositions de chacun. En parlant de composition, tout est clairement indiqué sans devoir cliquer ou changer de page. Toutes les informations importantes (visuel, composition, prix) sont présentées pour chaque produit en plus de pouvoir les ajouter au panier.

Bien-sûr, si on désire plus de détails, il est possible de cliquer sur un produit pour obtenir d'autres informations ou bien ajouter plus de 100g au panier.

Les catégories de produits

Une couleur a été donnée pour chaque catégorie de produits. Cela rajoute une dimension visuelle pour se repérer dans le catalogue. Chaque partie du site reprend dans son interface la couleur associée aux produits qu'elle présente.

Le fameux one page

Développement web ⌨️

Pour la partie dev, je suis parti sur la sainte trinité : Wordpress + Woocommerce + thème sur-mesure. Je voulais que le site soit très rapide à charger car il a été pensé pour être consulté très rapidement. Pas de builder donc mais un développement très statique de tout sauf les produits et le tunnel d'achat. Je suis le seul à modifier les contenus du site (sauf les produits) donc je me réserve le loisir d'apporter les correctifs directement au niveau du code ; C'est aussi ça un site qui charge vite !

Des extensions sont bien sûr utilisées pour les commodités : formulaire de contact, gestion des cookies, optimisation des images, SEO et calcul des frais d'expédition.

Du gâteau 🍰

La fin du début

Yanaza est un projet que j'adore 🤩, j'ai pu prendre quasiment toutes les décisions et pour ça, je prends mon pied absolu à faire des choses qui sonnent justes. Je vous invite à consulter le site et à vous faire plaisir si vous voulez vous essayer à une petite tasse de thé ! Pour ceux qui n'aiment pas le thé, il y a des infusions de fruits, donc faites pas genre 👇🏻

yanaza.fr

Un petit code promo pour ceux qui sont arrivés jusqu'ici ? Non ! Tous les prix sont justes et ne peuvent pas être diminués.

Tous mes projets