MANAVI
SOMMAIRE Le contexte...................................................................4
Vision du projet................................................................................................................................................................6
La charte graphique.....................................................8
Le logo......................................................................................................11
les codes graphiques................................................................................18
Le Logotype...................................................................................................................................................................12 Variations.......................................................................................................................................................................14 Utilisation......................................................................................................................................................................16
La typographie...............................................................................................................................................................20 La chromie.....................................................................................................................................................................22 Le tampon.....................................................................................................................................................................24
La communication visuelle.......................................26
Le print....................................................................................................28
Le web......................................................................................................40
La papeterie...................................................................................................................................................................30 La livraison.....................................................................................................................................................................34 Utilisations diverse..........................................................................................................................................................36 Goodies.........................................................................................................................................................................38
Le site web....................................................................................................................................................................42 Le style guide.................................................................................................................................................................44 Les éléments récurrents..................................................................................................................................................46 La page d’accueil............................................................................................................................................................48 2
La page liste des produits...............................................................................................................................................50 La page liste des producteurs..........................................................................................................................................52 La page produit..............................................................................................................................................................54 La page producteur.........................................................................................................................................................56 La page mon panier........................................................................................................................................................58 La page de connexion au compte......................................................................................................................................60 La page mon compte......................................................................................................................................................62 La page mon compte : les sous-menu..............................................................................................................................64
Le marketing............................................................................................67
Les mails.......................................................................................................................................................................68 Le blog..........................................................................................................................................................................70 Les réseaux sociaux........................................................................................................................................................72 Les supports print...........................................................................................................................................................74
Le guide d’utilisation.................................................76
Spécifications techniques................................................................................................................................................78
Le backoffice............................................................................................80
Le tableau de bord.........................................................................................................................................................82 Les commandes et les retours.........................................................................................................................................84 Les produits...................................................................................................................................................................85 Les catégories................................................................................................................................................................88 Les producteurs..............................................................................................................................................................90 Les clients......................................................................................................................................................................94 Le contenu.....................................................................................................................................................................96 Réécriture d’URL............................................................................................................................................................98 Actualités / Blog.............................................................................................................................................................99
3
LE CONTEXTE
VISION DU PROJET INTRODUCTION
POSITIONNEMENT
Depuis une dizaine d’années, les problématiques liées à l’impact néfaste de l’Homme sur l’environnement et la préservation de la planète sont à l’origine de l’émergence de nouveaux produits dits éco-responsables. Les populations prennent peu à peu conscience de l’importance de préserver leur environnement en agissant de manière éco-citoyenne et de favoriser un commerce propice à la répartition équitable des ressources. Cette tendance, au début réservée aux milieux aisés et avant-gardistes, convainc aujourd’hui la majeure partie des français et donne naissance à une multitude de produits se revendiquant « écolos ».
Le site de Philippe s’adresse très précisément à une cible globalement jeune (25-40ans) issue d’un milieu aisé (CSP+) et majoritairement urbain. Mais on étend aussi la segmentation des prospects aux internautes entre 25 et 64 ans vivant aussi bien à la ville qu’en milieu rural, aux internautes aux revenus moyens-supérieurs et moyens. Le site touche en priorité les personnes aux modes de vie décalés, les activistes mais aussi plus largement les matérialistes et les calculateurs; et dans un but plus éloigné les conservateurs plus réticents aux nouveaux modes de consommation.
Dans un soucis d’accès facilité à ces produits de consommation éco-citoyenne, notre client souhaite concevoir un site marchand qui regroupe en catégories un éventail riche en produits divers et variés issus du commerce équitable et d’une production éco-responsable. Ce site sera le portail entre les clients cherchant des produits de consommation éco-citoyenne et les producteurs et industriels produisant ce type de produit. Notre client souhaite proposer le meilleur à ses prospects, il sera donc en charge de rentrer toutes les informations nécessaires sur les produits et leurs fabriquants dans la base de données de son site.
6
La segmentation de la clientèle visée par Philippe est très importante car elle justifie son positionnement sur le marché : la différenciation. Les articles qu’il propose se placent au dessus du prix des produits équivalents. L’intérêt de la stratégie réside dans la notion de portail universel et dans l’adaptation à une cible qui recherche le “prestige”. Par conséquent l’atmosphère graphique globale du site ira dans ce sens, à savoir une ambiance sobre, épurée et très visuelle.
COMPOSISTION DU SITE Une page d’accueil sur laquelle figure l’accès aux produits classés par catégorie et aux autres pages du site, un diaporama des éléments importants du site, des produits mis en avant, du contenu informationnel et un fil d’actualité. Cette page doit être très intuitive et faire l’objet de l’image de marque du site.
Une page « mon compte » dédiée aux acheteurs du site où ils peuvent suivre leurs achats sur le site marchand, retrouver leurs anciennes factures et les éditer. De producteurs, qui renseignent leurs informations essentielles dans un but auto-promotionnel, et qui peuvent être contacter.
Des produits classés en catégories selon leur nature, associés à des fabriquants et vendus en quantité définie à un prix donné. Les internautes peuvent en ajouter certains au panier tandis que d’autres ne sont que des « produits vitrine » pour lesquels il faut consulter les fabriquants. Un système de panier, dans lequel les internautes peuvent placer des articles qu’ils souhaitent acheter et les payer directement en ligne grâce à un système de paiement adéquate. Une page « qui sommes-nous » qui informe les internautes sur la nature du site, son engagement et fournit les coordonnées pour contacter le service client du site.
NOTRE PROPOSITION Les valeurs fortes du site marchand réside dans ces trois termes : écologie – simplicité – proximité. En utilisant les codes du milieu écologique associés aux techniques d’ergonomie et de mise en vente sur le web, nous proposons un site web intuitif et simple d’utilisation répondant aux demandes fonctionnelles du client, à savoir : • La catégorisation des produits selon leur nature et des labels, • La proposition de vente en ligne de certains produits, • La mise en place d’un accès utilisateur avec possibilité de modifier ses informations, • La mise en place de modules de mise en avant de produits par thème administrable. En conclusion, notre proposition repose sur la création d’un site e-commerce de produits éco-responsables original, ergonomique, facile d’utilisation aussi bien pour les internautes que pour ses administrateurs et celle d’un nom et d’un logo qui correspondent au mieux à l’image et au positionnement du projet de notre client.
7
LA CHARTE GRAPHIQUE
LE LOGO
LE LOGOTYPE
MANAVI
Développons l’esprit responsable Loin du site de vente à distance discount et de masse, Manavi se revendique comme un lieu d’échange et de respect au niveau de la consommation diverse et variée. C’est un espace d’équilibre que l’internaute va chercher à retrouver, c’est pourquoi la mise en page est épurée, et tend vers une simplicité chromatique. L’atmosphère de sobriété évoque la sélection de l’essentiel sans superflu, le retour aux sources et l’équilibre du système employé par la marque. L’univers tend à rassurer et mettre en confiance le visiteur dans le cadre de son processus d’achat. L’interface alterne entre des couleurs douces, rassurantes et des couleurs plus chaudes et dynamiques. On note également une forte présence du gris, qui vient appuyer l’univers épuré.
12
DÊveloppons l’esprit responsable
13
VARIATIONS
Niveaux de gris
Forte de son concept la marque doit aussi refléter une image puissance et inspirer la confiance. C’est pourquoi Manavi a conçu son logo dans cette optique, en rappelant avec une tête d’éléphant la puissance, la robustesse ainsi que la sagesse. L’univers “tampon” érige Manavi au rang de marque de référence du commerce équitable, comme une certification de la qualité des produits qu’elle distribue.
manavi Développons l’esprit responsable
14
Négatif
Noir & Blanc
Développons l’esprit responsable
Développons l’esprit responsable
15
UTILISATION ZONE DE PROTECTION DU LOGO Ne rien inclure dans la zone de largeur X
x x
x
x
Développons l’esprit responsable
x
16
INTERDITS
PETITES TAILLES x
Développons l’esprit responsable
Développons l’esprit responsable
horizontal
Développons l’esprit responsable
vertical
Développons l’esprit responsable
Pour l’utilisation du logo à un format de petite taille ( < 3cm ), une optimisation a été effectuée afin d’éliminer les artefacts visuels dus aux détails du grand format.
v
simplification du crénelage «tampon»
Développons l’esprit responsable
Développons l’esprit responsable
Développons l’esprit responsable
Développons l’esprit responsable
17
LES CODES GRAPHIQUES
LA TYPOGRAPHIE
BITTER PORTEZ CE VIEUX WHISKY AU JUGE BLOND QUI FUME Portez ce vieux whisky au juge blond qui fume
portez ce vieux whisky au juge blond qui fume portez ce vieux whisky au juge blond qui fume
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789 0123456789 20
L’utilisation d’une police Serif pour les titres rappelle que Manavi est un service qualitatif et plonge le visiteur dans une atmosphère haut de gamme et à la fois moderne tout en gardant une touche de rétro (le Serif étant associé à la typographie papier), comme un retour aux sources, au naturel. Cette typographie se marie très bien avec le papier craft, très présent dans l’identité visuelle de la marque et cette union rappelle encore une fois le côté artisanal et traditionnel du service.
TAHOMA Pour le corps de texte, la police est sans serif, pour une meilleure adéquation avec le mode de lecture sur le web mais aussi pour une question de simplicité et de sobriété. Choisir une police de caractère simple et universelle pour le corps de texte permet de mettre encore plus en avant la police de titre plutôt originale tout en maintenant un support claire qui ne nécessite pas d’efforts de lecture de l’internaute.
PORTEZ CE VIEUX WHISKY AU JUGE BLOND QUI FUME Portez ce vieux whisky au juge blond qui fume
portez ce vieux whisky au juge blond qui fume portez ce vieux whisky au juge blond qui fume
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789 0123456789 21
LA CHROMIE
Le rouge Manavi
Le gris d’Accompagnement
base Les couleurs sont présentées avec leurs nuances foncées et claires, à utiliser pour les créations diverses.
R190 V39 B45 C18 M95 J82 N8 #BE272D
R154 V154 B154 C41 M32 J33 N11 #9A9A99
R137 V29 B37 C29 M97 J79 N34 #891D25
R77 V77 V77 C62 M52 J50 N48 #4D4D4D
R237 V98 B108 C0 M74 J45 N0 #ED626C
R227 V227 B277 C13 M9 J11 N0 #E3E3E3
foncé
clair
22
Le marron Kraft
Le marron Kraft
clair
foncĂŠ
R202 V167 B128 C19 M33 J51 N7 #CAA780
R163 V124 B82 C29 M45 J67 N22 #A37C52
R150 V123 B96 C33 M43 J57 N26 #967B60
R109 V82 B56 C40 M54 J70 N47 #6D5238
R226 V208 B191 C13 M19 J25 N1 #E2D0BF
R209 V163 B121 C17 M37 J54 N5 #D1A379
Le Kraft
+
=
23
LE TAMPON
24
Manavi, ce sont des valeurs, c’est une certification, c’est un label. Pour faire transparaître ces valeurs, la marque a choisi l’éléphant comme emblème, symbole de robustesse et de sagesse et le tampon comme logo. Deux notions-clé sont à retenir : Qualité artisanale Certifié éco-responsable Le tampon est utilisé dans les éléments de communication afin de rappeler au prospect le logo, mais aussi les promesses de Manavi. Il peut apparaître sur de nombreux supports tels que les courriers, mails, colis, flyers, publicités, véhicules, site web, vitrines, ...
25
LA COMMUNICATION VISUELLE
LE PRINT
LA PAPETERIE
LES EN-TÊTES DE LETTRES Manavi est une identité forte, sur chacun de ses courriers on y retourve les éléments représentatifs de la marque: la marge de papier craft et le tampon certifié de la marque ainsi que la police de titre Serif.
30
31
LA PAPETERIE
32
LA CARTE DE VISITE Les cartes de visite Manavi sont dépliables ! En effet, il s’agit de carte de visite à deux positions : lorsqu’on effectue les pliages, on se retrouve non plus avec une carte à plat, mais avec son mini colis Manavi en papier recyclé : encore un emblème de la marque et pour le coup une manière originale de s’affirmer comme le référent en matière de vente à distance issue du commerce équitable !
Manavi.fr : vente en ligne de produits éco-responsables et artisanaux, issuent du commerce équitable.
Philippe LEGRAND Gérant
146 rue Nationale 59000 Lille philippe@manavi.fr
Développons l’esprit responsable
03 20 15 16 77 06 20 15 16 66 manavi.fr
33
LA LIVRAISON
LES COLIS ET LE CAMION Les éléments usuels du quotidien font partie des meilleurs vecteurs de communication. En effet, même si peu de gens s’arrêteront sur le logo d’un camion ou d’un colis, cela permettra néanmoins au logo et donc à Manavi d’imprégner l’inconscient de futurs prospects potentiels.
34
35
UTILISATIONS DIVERSES
ELEPHANT EVERYWHERE ! La communication visuelle passe par l’omniprésence de la marque à travers ses emblèmes. Et l’emblème le plus fort de Manavi est son logo : la tête d’éléphant dans son tampon. Ce symbole est d’autant plus fort lorsqu’il est associé à des matériaux qui en renforce ses valeurs: le bois, le verre, le carton, le papier recyclé…
36
37
UTILISATIONS DIVERSES
GOODIES Améliorer la mémorisation de la marque et renforcer la cohésion de l’identité visuelle avec de multiples goodies est un vrai plus. Originale et impliquée, la marque devient omniprésente.
38
39
LE WEB
LE SITE WEB Manavi est une plateforme qui veut regrouper tous les acteurs de l’éco-citoyenneté, de ce fait le site est responsive, conçu pour tout type d’écran et toutes les navigations pour que chacun puisse l’utiliser à sa manière.
42
Manavi a pensé son interface simple et agréable pour que consommer bien ne soit pas une tâche difficile et que chacun puisse commander ses produits sans doute ni difficulté.
43
LE STYLE GUIDE LES PHOTOS
LES ICONES icônes de navigation :
Les photos sont présentées sous un ratio 1:1.
De préfèrence, les photos doivent être détourées. En prévision, elles peuvent cependant l’être ou non, selon le matériel mis à disposition et le temps de travail disponible. Leur intégration dans le graphisme globale ne posera pas de problème.
44
icônes des valeurs :
icônes de rassurances :
LES BANNIÈRES Le slider de la page d’accueil regroupe toutes les infos et réductions du moment. Il dynamise la page, son apparence doit être très soignée car c’est le premier aperçu du site, il doit être irréprochable. Les visuels sont au format 1000 x 250 px, ils se composent d’une image de fond et d’un texte descriptif sur un fond reprennant la charte graphique de la marque, rouge et crénelé.
45
LES ÉLÉMENTS RÉCURRENTS
HEADER
Le haut de page regroupe toutes les interactions importantes avec les différentes fonctionnalités du site: accès aux produits par catégories, accès aux producteurs, espace personnel, panier, outil de recherche, blog, page d’information sur l’entreprise.
Lors du défilement de la page, celle-ci rétrécit et vient se coller en haut de l’écran pour être toujours accessible
46
FOOTER
Le pied de page regroupe tous les liens vers les différentes pages principales, un espace SAV et aide à l’achat, et des informations sécurisantes concernant le mode de paiement et le mode de livraison choisis par le site.
47
LA PAGE D’ACCUEIL administrable
Le slider est placé en haut de page afin d’avoir une visibilité maximum. Il sert principalement à mettre en avant les offres promotionnelles, les évènements et autres éléments de marketing nécessitant une bonne visibilité.
administrable
Le bloc « Nouveautés » permet de mettre en avant les nouveaux produits arrivés sur le site. Il permet de montrer que le site est vivant et régulièrement mis à jour.
administrable Le bloc « Producteurs » met en avant les 3 partenaires de votre choix. C’est un vecteur qualitatif, permettant de rassurer dès la 1ère page du site l’intégrité des producteurs et la qualité du service offert par Manavi.
statique
48
Le bloc « Réseaux Sociaux » permet l’inscription à la newsletter et l’accès direct au pages facebook, twitter et google+ de Manavi. Éléments indispensables au développement et à la fidélisation de sa communauté.
Le bloc «Notre sélection» est un ensemble de produits choisis par l’administrateur selon les critères qui lui sont propres. Ce sont les premiers produits visibles sur la page c’est à dire qu’ils sont qu’autant plus mis en avant.
administrable
«Nos valeurs» fait référence à la qualité de service du site. Ce bloc met en avant 4 points forts de la marque, et pointe vers une page décrivant l’ADN de la marque plus en détail.
administrable
Élement indispensable à la vie communautaire de Manavi, le bloc « Actu » relait dynamiquement l’introduction des articles mis en ligne sur le blog de Manavi.
Élément classique des sites e-commerces, la barre de rassurance permet comme son nom l’indique de rassurer le consommateur sur le type de paiement, la livraison, et la qualité des produits.
dynamique
statique
49
LA PAGE LISTE DES PRODUITS
dynamique
50
Le faceting permet à l’internaute d’affiner sa recherche de produits. Plusieurs critères sont disponibles, ils sont relatifs à la catégorie de produit sur laquelle il se trouve.
Le choix de l’affichage des produits en mode wildcard ou liste se fait au simple clic sur l’icone.
dynamique
En mode wildcard, l’affichage des produits se compose de : • le label si disponible • la photo du produit • le nom du produit et une courte description • le prix du produit • l’élément global est cliquable et renvoie vers la page du produit
administrable
En mode liste, l’affichage des produits se compose de : • la photo du produit • le nom du produit et une courte description • le producteur • le label si disponible • le prix du produit • un bouton renvoyant vers la page du produit
administrable
dynamique
dynamique
51
LA PAGE LISTE DES PRODUCTEURS
dynamique
52
Le faceting des producteurs permet à l’internaute de trier les producteurs par zone géographique, et par taille de l’entreprise. Ces informations sont renseignées par les producteurs via le backoffice.
Le choix de l’affichage des produits en mode wildcard ou liste se fait au simple clic sur l’icone.
dynamique
En mode wildcard, l’affichage des producteurs se compose de : • la photo du producteur • le nom du producteur • une courte description • l’élément global est cliquable et renvoie vers la page du producteur
administrable
En mode liste, l’affichage des producteurs se compose de : • la photo du producteur • le nom du producteur • une courte description • un bouton renvoyant vers la page du producteur
administrable
dynamique
dynamique
53
LA PAGE PRODUIT
dynamique
administrable dynamique
administrable dynamique
54
Le nom du produit est, évidemment, placé au début de la page.
Les visuels offrent au visiteur une vision approfondie du produit. L’image principale switch par un simple passage de la souris sur les miniatures. Un clic sur l’image ouvre une lightbox permettant une voir en plein écran du produit et le passage de la souris sur l’image principale propose un zoom sur cette dernière.
Après le descriptif produit, on retrouve un encart dédié au producteur, avec une description détaillée de son activité et un lien vers ses autres produits du site.
Le module permettant d’effectuer l’achat et de visualiser le statut du produit se trouve en haut à gauche, afin d’être accessible sans manipuler la scrollbar. Le positionnement de cet élément respecte les conventions des sites de e-commerce, afin de ne pas bousculer le consommateur dans ses habitudes. Le bouton «ajouter au panier» est mis en évidence par sa taille et sa couleur.
dynamique
Le descriptif du produit fait apparaitre dans une première partie les références du produit afin de faciliter les recherches particulières (notamment pour les professionnels) et permet de télécharger la fiche produit en PDF. La seconde partie, rempli par le producteur, fournit un descriptif détaillé du produit au consommateur.
administrable dynamique
55
LA PAGE PRODUCTEUR
dynamique
administrable dynamique
administrable dynamique
56
Le nom du producteur est, évidemment, placé au début de la page. La photo du producteur est placée en haut à gauche, afin d’offrir aux visiteurs du site une visualisation rapide.
En dessous de chaque description de producteurs se trouve un encart contenant ses produits. Cet encart a pour vocation de faire connaitre tous les produits du producteur afin de valoriser son travail et mettre en valeur son coeur d’activité.
Le descriptif du producteur permet de renseigner le client sur la vocation de la société et sa façon de travailler. Il est rempli par le producteur lui-même dans la partie backoffice.
administrable
Le bloc « informations supplémentaires » fournit de plus amples renseignements sur le producteur. Ces informations sont : • métier • pays • région • taille de l’entreprise • spécialité Il est rempli par le producteur lui-même dans la partie backoffice.
administrable
dynamique
dynamique
57
LA PAGE MON PANIER
dynamique
Chaque article mis dans le panier apparait dans un affichage type Liste.
statique
Le bloc « Service client » donne le contact disponible pour le SAV
statique
58
On retrouve la barre de rassurance, comme sur la page d’accueil, afin de supprimer les doutes pouvant subsister sur le sérieux de Manavi au moment de l’achat
Le bloc « Total » indique le prix total des achats à valider, ainsi que la mention livraison gratuite.
Les boutons « Continuer mes achats » et « Étape suivante », comme leurs noms l’indiquent permettent respectivement de revenir sur la page Liste des produits ou de rentrer dans la validation de ses achats.
dynamique
statique
59
LA PAGE DE CONNEXION AU COMPTE
60
statique
La partie « Se Connecter », une fois les champs correctement remplis, renvoie vers la page Mon Compte de l’utilisateur enregistré.
statique
Le bloc « Réseaux Sociaux » permet l’inscription à la newsletter et l’accès direct au pages facebook, twitter et google+ de Manavi. Éléments indispensables au développement et à la fidélisation de sa communauté.
Le formulaire «S’inscrire» permet de créer son compte pour effectuer ses achats. Il est suivi d’un email de confirmation qui est envoyé sur le mail du futur abonné afin de vérifier son existence réelle.
statique
61
LA PAGE MON COMPTE
statique
statique
62
Le sous-menu « Mon Compte » permet d’accéder directement aux pages associées au compte. Il fait office de navigation à travers les onglets de la partie compte personnel.
Le bloc « Service client » donne le contact disponible pour le SAV
Un cours texte introductif accueille le client et certifie sa connexion à son compte.
statique
Le bloc « Mes Commandes en cours » permet à l’utilisateur le suivi de achats et renforce le sérieux et la transparence de Manavi.
dynamqiue
Le bloc « Mes Favoris » est un bloc géré directement par le consommateurs. Il résume les derniers favoris que le client a ajouté à sa liste.
dynamqiue
63
LA PAGE MON COMPTE : LES SOUS-MENU
Le bloc « Mes Coordonnées » permet au client de mettre à jour ses coordonnées.
Le bloc « Mes Favoris » est un bloc géré directement par le consommateur, afin de marquer des produits susceptibles de l’intéresser, qu’il souhaite partager avec d’autres prospects, ou globalement auquel il souhaite pouvoir se référer de nouveau.
Le bloc « Changer mon mot de passe » permet au client de modifier son mot de passe. 64
Le bloc « Mon carnet d’adresse » permet au client de créer et/ou de modifier les adresses où il pourra être livré (le choix de l’adresse de livraison se fait lors de la commande), ainsi que son adresse de facturation.
Les commandes en cours d’acheminement, qui ont été validées par le client mais pas encore livrées. Les anciennes commandes passées qui permettent un récapitulatif de l’activité du consommateur depuis son inscription.
65
LE MARKETING
LES MAILS
68
Les e-mails Manavi ont été conçus de manière responsive, afin qu’ils puissent être consultés sur n’importe quel support. Pour répondre à ces caractéristiques techniques, certains éléments ont été simplifiés (notamment la texture Kraft et la typographie «bitter»).
69
LE BLOG
Manavi agrémente son site e-commerce d’un blog d’actualité tenu à jour avec des informations sur l’écologie, le commerce équitable et les produits éco-responsables.
70
Il permet de développer d’aspect communautaire qui gravite autour de la marque et de diversifier l’offre proposée aux internautes.
71
LES RÉSEAUX SOCIAUX FACEBOOK Facebook vient s’inscrire dans l’objectif de tenir informer les abonnés de la marque des nouveautés aussi bien du site e-commerce comme des nouveaux articles du blog. Il permet également de gérer les retours clients et d’apprécier les commentaires et avis des internautes
72
TWITTER Twitter s’inscrit lui aussi dans l’idée d’informer et fidéliser les internautes mais permet aussi et surtout d’assurer un service après vente de qualité en se montrant réactifs aux questions et permettant une interface de dialogue en cas de problème.
73
LES SUPPORTS PRINT
74
75
LE GUIDE D’UTILISATION
SPÉCIFICATIONS TECHNIQUES Arborescence du FrontOffice
TECHNOLOGIES :
78
Serveur : Ruby 2.1.2
Langage de développement : Rails 4.1.5
Arborescence du BackOffice
Framework : Foundation
Responsive : oui
Langages d’intégration : SLIM et SASS
79
LE BACKOFFICE
LE TABLEAU DE BORD Retour sur l’accueil du site
1 Visualisation des infos récentes
Le backoffice est l’interface qui permet d’administrer le site web: ses contenus, ses utilisateurs, gérer les produits qu’il propose et les commandes de ces derniers. Pour y accéder, il vous suffit de vous rendre à l’adresse suivante: www.manavi.fr/administrator et de vous authentifier avec vos identifiants personnels.
2 Gérer les commandes et les retours 3 Gérer les produits, les catégories et les producteurs 4 Gérer les clients 5 Gérer les contenus du site 6 Gérer les actualités du blog Statistiques instantanées: • Les dernières commandes passées sur le site • Les derniers clients ayant créé un compte
82
1
2
3
4
5
6
Clore la session
Liste des producteurs et des produits que vous devez approuver pour leur admission sur le site Manavi. • Pour valider les producteurs : Catalogue > Gérer les producteurs > trier par statut • Pour valider les produits: Catalogue > Gérer les produits > trier par statut
Statistiques sur les produits les plus vendus depuis le début du site.
83
LES COMMANDES ET LES RETOURS
Retrouvez toutes les informations relatives aux commandes passées sur le site ici. Vous pouvez consulter le contenu et les informations des commandes en cliquant sur « Voir ». Il en va de même pour les retours de commandes dans l’onglet « Retours ».
84
LES PRODUITS Supprimer des produits déjà présents sur votre site
Cocher le(s) produit(s) souhaité(s) et « Supprimer ».
Examiner et valider les produits proposés par vos producteurs
Ranger les produits par statut et repérez ceux signalés comme « En attente ». Cliquez sur « Editer » le produit. Pour valider le produit : Général > Statut = activé ou désactivé pour le refuser Pensez à bien vérifier les informations de tous les onglets (à gauche) avant de valider. De plus, c’est à vous de choisir la catégorie dans laquelle apparait le futur produit parmi la liste proposée. A savoir qu’il faut choisir la catégorie la plus précise à laquelle appartient le produit.
Modifier des produits déjà présents sur votre site
« Editer » le produit et modifier les informations souhaitées puis « Sauvegarder ».
85
LES PRODUITS Ajouter de nouveaux produits 1
 Général Remplir tous les champs concernant le produit et le label si nécessaire (nouveauté, soldes, édition limitée, fin de stock).
2
Images Choisir jusqu’à 5 images conformes à la charte graphique du site (voir document). Sélectionner l’image principale du produit qui le représente au mieux.
3
Description La description courte correspond au petit texte de 25 caractères maximum juste en dessous du titre sur la page d’accueil. La description longue doit être exhaustive et présenter en détail le produit. Elle sera affichée sur la page dédiée à l’article.
4
Caractéristiques techniques Choisir parmi la liste les attributs qui qualifient au mieux votre produit et qui seront affichés sur la page dédiée à l’article.
5
Catégorie Sélectionner LA catégorie à laquelle appartient votre produit. Le choix ne peut se faire que parmi le niveau de classement le plus profond pour une meilleure catégorisation.
6
Producteur Associer votre produit à son producteur en choisissant parmi la liste de ceux inscrits sur le site. Si vous n’avez pas renseigné au préalable le producteur, cliquez sur « Ajouter un producteur ». Astuce : Pensez à organiser vos producteurs grâce à l’icône pour les retrouver plus facilement.
7
Fiche technique Sélectionner la fiche technique au format PDF correspondant à votre produit qui sera proposée en téléchargement sur la page du produit.
86
1 2 3 4 5 6 7
87
LES CATÉGORIES Pour une utilisation optimale du site, nous conseillons de ne pas dépasser 6 catégories de produits. Vous pouvez les subdiviser en 2 niveaux d’information (catégorie, sous-catégorie, sous-sous-catégorie). 
88
Vous pouvez « Editer » les catégories déjà présentes sur le site (renommer, déplacer), « Ajouter une catégorie » quel que soit son niveau d’information ou en « Supprimer ».
89
LES PRODUCTEURS Examiner et valider les producteurs candidats
Ranger les producteurs par statut et repérez ceux signalés comme « En attente ». « Voir » le producteur pour accéder à sa fiche détaillée. Pour valider le producteur : « Editer » Informations producteur > Statut = activé ou désactivé pour le refuser. Pensez à bien vérifier les informations de tous les onglets (à gauche) avant de valider.
Supprimer des producteurs déjà présents sur votre site
Cocher le(s) producteur(s) souhaités et « Supprimer » ou passer le statut du producteur sur « Désactivé ».
Voir une fiche producteur
Cliquez sur « Voir » pour accéder aux informations de vos producteurs. Modifier des producteurs déjà présents sur votre site. « Editer » le producteur lorsque vous êtes sur sa fiche détaillée et modifier les informations souhaitées puis « Sauvegarder ».
Modifier des producteurs déjà présents sur votre site
« Editer » le producteur lorsque vous êtes sur sa fiche détaillée et modifier les informations souhaitées puis « Sauvegarder ».
90
91
LES PRODUCTEURS
Ajouter de nouveaux producteurs 1 Informations producteur Remplir tous les champs concernant le producteur et sélectionner une image 2 Description Remplir la description du producteur et de son activité qui sera affichée sur la page dédiée au producteur 3 Coordonnées Remplir tous les champs concernant les renseignements de contact du producteur 4 Mot de passe En cas de besoin vous pouvez changer le mot de passe du producteur directement ici 5 Coordonnées bancaires Le RIB du producteur lui permettant de recevoir le solde de la vente de ses produits 6 Informations supplémentaires Renseigner les informations de la liste qui seront affichés sur la page dédiée au producteur
92
1 2 3 4 5 6
93
LES CLIENTS Supprimer des clients
Cocher le(s) client(s) souhaité(s) et cliquer sur Supprimer pour effacer un client de votre base de données client.
Voir une fiche client
Cliquez sur « Voir » pour accéder aux informations de vos clients.
Modifier les clients déjà inscrits sur votre site
« Editer » le client lorsque vous êtes sur sa fiche détaillée et modifier les informations souhaitées puis « Sauvegarder ».
94
Ajouter un nouveau client 1 2 3 4
 Informations client Remplir tous les champs de renseignement concernant le client et stipuler son inscription (ou non) à la newsletter. Coordonnées Remplir tous les champs concernant l’adresse postale du client. Adresse de facturation / livraison Choisir une ou plusieurs adresses de livraison/facturation pour les commandes du client. Mot de passe En cas de besoin vous pouvez changer le mot de passe du client directement ici.
1 2 3 4
95
LE CONTENU LES PAGES
Supprimer une page
Cocher la(les) page(s) souhaité(es) et cliquez sur « Supprimer ».
Ajouter une page
Dans certains cas (exemple : jeu concours) vous pouvez être amené à créer une page sur votre site. « Ajouter une page » permet de créer une page de contenu avec son URL propre que vous pouvez relayer sur les réseaux sociaux ou dans vos articles.
Modifier une page « Editer » votre page pour en modifier le contenu, le titre, le chemin.
96
LA HOMEPAGE
Se rendre dans l’onglet « Blocs statiques » pour modifier les éléments dynamiques de la page d’accueil
Le slider
Nos valeurs
(Slider, sélections de produits et de producteurs, valeurs).
Les producteurs
Notre sélection/ Les nouveautés
97
LE CONTENU
RÉÉCRITURE D’URL
La fonctionnalité réécriture d’URL permet de créer des adresses de pages personnalisées, des redirections temporaires ou permanentes.
98
ACTUALITÉS / BLOG Cette rubrique vous permet de gérer les articles du blog associé au site : écrire de nouveaux articles, modifier ceux déjà publiés, les supprimer…
Ajouter un nouvel article 
99
ROOM 102
studio de crĂŠation
Chef de projet Manon Horlacher manon.horlacher@gmail.com
IntĂŠgratrice Adeline Monnot monnot.adeline@gmail.com
Designer Thomas Derweduwen thomas.derweduwen@gmail.com