Bibio

BRIEF : 

Créer un flyer faisant la promotion du site internet, puis réaliser en mobile first la homepage en tenant compte des contraintes suivantes : 

  • Site e-commerce
  • Mise en valeur du produit
  • Explications claires du processus de livraison
  • Description individuelle et vente par packs
  • Réassurances via les témoignages
  • Point de vente facile à trouver (80 en France)

 

MON RÔLE : Webdesign, Graphisme, Création de contenu

COMPOSITION :  Projet individuel

DATE : 2017

TYPE : Projet fictif

LIVRABLES : Charte graphique, flyer, wireframes, homepage

PROCESSUS DE TRAVAIL

DÉTAILS DU PROJET

ÉTAPE 1 : Définition de la charte graphique

PARTI PRIS GRAPHIQUE :

Bibio propose des jus de fruits aux couleurs vives. Afin d’harmoniser et de simplifier la charte, j’ai choisi de réduire la palette de couleurs passant de 5 à 3.

S’agissant d’une marque de jus de fruits Bio, je tenais à ce que les usagers ressentent instantanément une sensation de fraicheur, de bien être et que la marque Bibio soit ainsi associée à des produits naturels. Je me suis donc inspirée des couleurs que l’on retrouve principalement dans la nature :

  • le vert du feuillage des arbres et des herbes
  • le bleu du ciel et de l’eau (mer, lac, rivières etc.)
  • le jaune du soleil

Pour renforcer l’aspect naturel du bio, et y associer une dimension anti gaspillage plus respectueuse de l’environnement, j’ai opté pour des images de fruits « imparfaits« .

 

Outils : Illustrator

ÉTAPE 2 : Réalisation du flyer

ÉTAPE 3 : Création de croquis

PARTI PRIS TECHNIQUE :

J’ai scindé la homepage en 6 blocs (sans compter le header et le footer) certains donnant accès à d’autres pages du site en utilisant les Call To Action (CTA).

  1. Bloc « produits » : Utilisation d’un carroussel mettant en valeur les 7 boissons associé à une courte description des ingrédients et un CTA
  2. Bloc « coffrets » : Description et CTA
  3. Bloc « processus de livraison » : Détail des étapes
  4. Bloc « articles » : Introduction et CTA
  5. Bloc « témoignages » : Photos et avis des usagers
  6. Bloc « avantages« :  livraison, points de vente, paiement sécurisé, service clients

ÉTAPE 4 : Réalisation de la page d'accueil du site