Embed Size (px)
DESCRIPTION
Cahier technique et graphique du projet Manavi - Efficom CIW 2013/2014
Citation preview
MANAVI
2
Le contexte...................................................................4 Vision du projet................................................................................................................................................................6
La charte graphique.....................................................8 Le logo......................................................................................................11 Le Logotype...................................................................................................................................................................12 Variations.......................................................................................................................................................................14 Utilisation......................................................................................................................................................................16
les codes graphiques................................................................................18 La typographie...............................................................................................................................................................20 La chromie.....................................................................................................................................................................22 Le tampon.....................................................................................................................................................................24
La communication visuelle.......................................26 Le print....................................................................................................28 La papeterie...................................................................................................................................................................30 La livraison.....................................................................................................................................................................34 Utilisations diverse..........................................................................................................................................................36 Goodies.........................................................................................................................................................................38
Le web......................................................................................................40 Le site web....................................................................................................................................................................42 Le style guide.................................................................................................................................................................44 Les éléments récurrents..................................................................................................................................................46 La page d’accueil............................................................................................................................................................48
SOMMAIRE
3
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écificationstechniques................................................................................................................................................78
Lebackoffice............................................................................................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
LE CONTEXTE
6
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.
La segmentation de la clientèle visée par Philippe est trèsimportantecarellejustifiesonpositionnementsurlemarché:la différenciation.Lesarticlesqu’ilproposeseplacentaudessus duprixdesproduitséquivalents.L’intérêtdelastratégierésidedans la notion de portail universel et dans l’adaptation àuneciblequirecherchele“prestige”.Parconséquent l’atmosphèregraphiqueglobaledusiteiradanscesens, à savoir une ambiance sobre, épurée et très visuelle.
Depuisunedizained’années,lesproblématiquesliéesàl’impactné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 àlarépartitionéquitabledesressources.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 serevendiquant«écolos».
Dans un soucis d’accès facilité à ces produits de consommation éco-citoyenne, notre client souhaite concevoir un site marchand quiregroupeencatégoriesunéventailricheenproduits diversetvariésissusducommerceé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écessairessurlesproduitsetleursfabriquantsdans la base de données de son site.
INTRODUCTION POSITIONNEMENT
VISION DU PROJET
7
COMPOSISTION DU SITE NOTRE PROPOSITIONUnepaged’accueilsurlaquellefigurel’accèsauxproduitsclasséspar catégorie et aux autres pages du site, un diaporama des éléments importants du site, des produits mis en avant, du contenu informationneletunfild’actualité. Cettepagedoitêtretrèsintuitive et faire l’objet de l’image de marquedusite.
Des produits classés en catégories selon leur nature, associés à des fabriquantsetvendusenquantitédéfinieàunprixdonné. Les internautes peuvent en ajouter certains au panier tandis qued’autresnesontquedes «produitsvitrine»pourlesquels ilfautconsulterlesfabriquants.
Deproducteurs,quirenseignentleurs informations essentielles dans un but auto-promotionnel, etquipeuventêtrecontacter.
Unepage«quisommes-nous» quiinformelesinternautessur la nature du site, son engagement et fournit les coordonnées pour contacter le service client du site.
Unsystèmedepanier,danslequel les internautes peuvent placer des articlesqu’ilssouhaitentacheteret les payer directement en ligne grâce à un système de paiement adéquate.
Unepage«moncompte»dédiée aux acheteurs du site où ils peuvent suivre leurs achats sur le site marchand, retrouver leurs anciennes factures et les éditer.
Les valeurs fortes du site marchand réside dans ces trois termes : écologie – simplicité – proximité.
Enutilisantlescodesdumilieuécologiqueassociésauxtechniquesd’ergonomieetdemiseenventesurleweb,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,faciled’utilisationaussibien pourlesinternautesquepoursesadministrateurs etcelled’unnometd’unlogoquicorrespondent au mieux à l’image et au positionnement du projet de notre client.
LA CHARTE GRAPHIQUE
LE LOGO
12
Loin du site de vente à distance discount et de masse, Manavi serevendiquecommeunlieud’échangeetderespectauniveaude la consommation diverse et variée. C’estunespaced’équilibrequel’internautevachercher àretrouver,c’estpourquoilamiseenpageestépurée, ettendversunesimplicitéchromatique. L’atmosphèredesobriétéévoquelasélectiondel’essentielsanssuperflu,leretourauxsourcesetl’équilibredusystèmeemployéparlamarque.L’universtendàrassureretmettreenconfiance le visiteur dans le cadre de son processus d’achat. L’interface alterne entre des couleurs douces, rassurantes etdescouleurspluschaudesetdynamiques.Onnoteégalementuneforteprésencedugris,quivientappuyerl’universépuré.
MANAVIDéveloppons l’esprit responsable
LE LOGOTYPE
13Développons l’esprit responsable
MANAVIDéveloppons l’esprit responsable
14
Développons l’esprit responsablemanavi
Fortedesonconceptlamarquedoitaussirefléteruneimage puissanceetinspirerlaconfiance.C’estpourquoiManaviaconçu sonlogodanscetteoptique, enrappelantavecunetête d’éléphant la puissance, larobustesseainsiquelasagesse.
L’univers“tampon”érigeManaviaurangdemarquederéférenceducommerceéquitable,commeunecertificationdelaqualité desproduitsqu’elledistribue.
niveaux De gris
VARIATIONS
15
Développons l’esprit responsable Développons l’esprit responsable
noir & blancnégatif
16
Développons l’esprit responsable
x
x x
x
x
ZONE DE PROTECTION DU LOGO
Ne rien inclure dans la zone de largeur X
UTILISATION
17
Développons l’esprit responsable
Développons l’esprit responsable
Développons l’esprit responsable
Développons l’esprit responsable
Développons l’esprit responsable
Développons l’esprit responsable
x
v
Développons l’esprit responsable
Développons l’esprit responsable
INTERDITS PETITES TAILLES
horizontal vertical
Pour l’utilisation du logo à un format de petite taille ( < 3cm ), une optimisation aétéeffectuéeafind’éliminerlesartefactsvisuels dus aux détails du grand format.
simplificationducrénelage«tampon»
LES CODES GRAPHIQUES
20
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
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
01234567890123456789
BITTER L’utilisation d’une police Serif pour lestitresrappellequeManaviest unservicequalitatifetplonge
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 dansl’identitévisuelledelamarque
et cette union rappelle encore une fois le côté artisanal
et traditionnel du service.
LA TYPOGRAPHIE
21
PORTEZCEVIEUXWHISKYAUJUGE BLONDQUIFUMEPortezcevieuxwhiskyaujugeblondquifume
portezcevieuxwhiskyaujugeblondquifume portezcevieuxwhiskyaujugeblondquifume
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
01234567890123456789
TAHOMA Pour le corps de texte, la police est sans serif, pour une meilleure adéquationaveclemodede lecture sur le web mais aussi pourunequestiondesimplicité 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 unsupportclairequinenécessitepas d’efforts de lecture de l’internaute.
LA TYPOGRAPHIE
22
R190 V39 B45C18M95J82N8#BE272D
R137 V29 B37C29M97J79N34#891D25
R237 V98 B108C0M74J45N0#ED626C
R154 V154 B154C41M32J33N11#9A9A99
R77 V77 V77C62M52J50N48#4D4D4D
R227 V227 B277C13M9J11N0#E3E3E3
le rouge Manavi le gris D’accoMpagneMent
Les couleurs sont présentées avec leurs nuances foncées et claires, à utiliser pour les créations diverses.
base
foncé
clair
LA CHROMIE
23
+
=
R163 V124 B82C29M45J67N22#A37C52
R109 V82 B56C40M54J70N47#6D5238
R209 V163 B121C17M37J54N5#D1A379
R202 V167 B128C19M33J51N7#CAA780
R150 V123 B96C33M43J57N26#967B60
R226 V208 B191C13M19J25N1#E2D0BF
le Marron Kraftfoncé
le Kraftle Marron Kraft clair
24
LE TAMPON
25
Manavi,cesontdesvaleurs,c’estunecertification,c’estunlabel. Pourfairetransparaîtrecesvaleurs,lamarqueachoisil’éléphantcomme emblème, symbole de robustesse et de sagesse et le tampon comme logo.
Deux notions-clé sont à retenir :
Qualité artisanale
Certifié éco-responsable
Letamponestutilisédanslesélémentsdecommunicationafinderappeler auprospectlelogo,maisaussilespromessesdeManavi.Ilpeutapparaîtresurdenombreuxsupportstelsquelescourriers,mails,colis,flyers,publicités,véhicules, site web, vitrines, ...
LA COMMUNICATIONVISUELLE
LE PRINT
30
Manavi est une identité forte, sur chacun de ses courriers on y retourve les éléments représentatifs delamarque:lamargedepapiercraftetletamponcertifié delamarqueainsiquelapolice de titre Serif.
LES EN-TÊTES DE LETTRES
LA PAPETERIE
31
LA PAPETERIE
32
LA PAPETERIE
33
Développons l’esprit responsable
Philippe LEGRANDGérant
146 rue Nationale59000 Lille
03 20 15 16 7706 20 15 16 66
manavi.fr
Manavi.fr : vente en ligne de produits éco-responsableset artisanaux, issuent du commerce équitable.
Les cartes de visite Manavi sont dépliables ! En effet, il s’agit de carte de visite à deux positions : lorsqu’oneffectuelespliages,on se retrouve non plus avec une carte à plat, mais avec son mini colis Manavi en papier recyclé : encore un emblème de lamarqueetpourlecoup une manière originale de s’affirmercommeleréférenten matière de vente à distance issueducommerceéquitable!
LA CARTE DE VISITE
LA PAPETERIE
34
Lesélémentsusuelsduquotidienfont partie des meilleurs vecteurs de communication.Eneffet,mêmesipeudegens s’arrêterontsurlelogod’uncamionou d’un colis, cela permettra néanmoins au logo et donc à Manavi d’imprégner l’inconscient de futurs prospects potentiels.
LES COLIS ET LE CAMION
LA LIVRAISON
35
LA LIVRAISON
36
La communication visuelle passe parl’omniprésencedelamarque à 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’ilestassociéàdesmatériauxquien renforce ses valeurs: le bois, le verre, le carton, le papier recyclé…
ELEPHANT EVERYWHERE !
UTILISATIONS DIVERSES
37
38
GOODIESAméliorerlamémorisationdelamarqueet renforcer la cohésion de l’identité visuelle avec de multiples goodies est un vrai plus.Originaleetimpliquée,lamarque devient omniprésente.
UTILISATIONS DIVERSES
39
LE WEB
42
Manaviestuneplateformequiveutregroupertouslesacteurs de l’éco-citoyenneté, de ce fait le site est responsive, conçu pour tout type d’écran et toutes les navigations pourquechacunpuissel’utiliseràsamanière.
LE SITE WEB
43
Manaviapensésoninterfacesimpleetagréablepourque consommerbiennesoitpasunetâchedifficileetquechacun puissecommandersesproduitssansdoutenidifficulté.
44
LES PHOTOS LES ICONES
Les photos sont présentées sous un ratio 1:1.
De préfèrence, les photos doiventêtredétourées.
Enprévision,ellespeuventcependantl’êtreou 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.
icônes de navigation :
icônes des valeurs :
icônes de rassurances :
LE STYLE GUIDE
45
Le slider de la page d’accueil regroupe toutes les infos et réductions du moment. Ildynamiselapage,sonapparencedoitêtretrèssoignéecarc’estlepremieraperçu dusite,ildoitêtreirréprochable.Les visuels sont au format 1000 x 250 px, ils se composent d’une image de fond etd’untextedescriptifsurunfondreprennantlachartegraphiquedelamarque, rouge et crénelé.
LES BANNIÈRESLES ICONES
46
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.
Lorsdudéfilementdelapage,celle-cirétrécitetvientsecollerenhautdel’écranpourêtretoujoursaccessible
LES ÉLÉMENTS RÉCURRENTS
47
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.
48
administrable
administrable
administrable
statique
Lesliderestplacéenhautdepageafind’avoirunevisibilitémaximum.Ilsertprincipalementà mettre en avant les offres promotionnelles, les évènements et autres éléments de marketing nécessitant une bonne visibilité.
Lebloc«Nouveautés»permetdemettreenavant les nouveaux produits arrivés sur le site. Ilpermetdemontrerquelesiteestvivantetrégulièrement mis à jour.
Lebloc«Producteurs»metenavant les 3 partenaires de votre choix. C’estunvecteurqualitatif,permettant de rassurer dès la 1ère page du site l’intégrité desproducteursetlaqualitéduserviceoffertpar Manavi.
Lebloc«RéseauxSociaux»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àlafidélisationdesacommunauté.
LA PAGE D’ACCUEIL
49
administrable
administrable
dynamique
statique
Lebloc«Notresélection»estunensemble de produits choisis par l’administrateur selon lescritèresquiluisontpropres. Ce sont les premiers produits visibles sur lapagec’estàdirequ’ilssontqu’autantplusmis en avant.
«Nosvaleurs»faitréférenceàlaqualitédeservice du site. Ce bloc met en avant 4 points fortsdelamarque,etpointeversunepagedécrivantl’ADNdelamarqueplusendétail.
Élement indispensable à la vie communautaire deManavi,lebloc«Actu»relait dynamiquementl’introductiondesarticles mis en ligne sur le blog de Manavi.
Élémentclassiquedessitese-commerces, la barre de rassurance permet comme son noml’indiquederassurerleconsommateursur le type de paiement, la livraison, etlaqualitédesproduits.
50
Le faceting permet àl’internauted’affiner sa recherche de produits. Plusieurs critères sont disponibles, ils sont relatifs à la catégorie de produit surlaquelleilsetrouve.
dynamique
LA PAGE LISTE DES PRODUITS
51
dynamique
dynamique
dynamique
Lechoixdel’affichagedesproduitsenmodewildcard ou liste se fait au simple clic sur l’icone.
Enmodewildcard,l’affichagedesproduits 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émentglobalestcliquableetrenvoie
vers la page du produit
Enmodeliste,l’affichagedesproduits 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
administrable
52
dynamique Le faceting des producteurs permet à l’internaute de trier les producteurs par zone géographique,etpartaille de l’entreprise.Ces informations sont renseignées par les producteurs via lebackoffice.
LA PAGE LISTE DES PRODUCTEURS
53
dynamique
dynamique
dynamique
Lechoixdel’affichagedesproduitsenmodewildcard ou liste se fait au simple clic sur l’icone.
Enmodewildcard,l’affichagedesproducteurs se compose de :• la photo du producteur• le nom du producteur• une courte description• l’élémentglobalestcliquableetrenvoie
vers la page du producteur
Enmodeliste,l’affichagedesproducteurs se compose de :• la photo du producteur• le nom du producteur• une courte description• un bouton renvoyant vers la page
du producteur
administrable
administrable
54
administrable
administrable
dynamique
dynamique
dynamique
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.
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.
Le nom du produit est, évidemment, placé au début de la page.
LA PAGE PRODUIT
55
administrable
dynamique
dynamique
Le module permettant d’effectuer l’achat et de visualiser le statut du produit se trouve enhautàgauche,afind’êtreaccessiblesansmanipuler la scrollbar.Le positionnement de cet élément respecte les conventions des sites de e-commerce, afindenepasbousculerleconsommateurdans ses habitudes.Lebouton«ajouteraupanier»estmis en évidence par sa taille et sa couleur.
Le descriptif du produit fait apparaitre dans une première partie les références duproduitafindefaciliterlesrecherches particulières (notamment pour les professionnels) et permet de télécharger laficheproduitenPDF.La seconde partie, rempli par le producteur, fournit un descriptif détaillé du produit au consommateur.
56
administrable
administrable
dynamique
dynamique
dynamique
Endessousdechaquedescription de producteurs se trouve un encart contenant ses produits.Cet encart a pour vocation de faire connaitre touslesproduitsduproducteurafin de valoriser son travail et mettre en valeur son coeur d’activité.
La photo du producteur est placée en haut àgauche,afind’offrirauxvisiteursdusite une visualisation rapide.
Le nom du producteur est, évidemment, placé au début de la page.
LA PAGE PRODUCTEUR
57
administrable
dynamique
Le descriptif du producteur permet de renseigner le client sur la vocation de la société et sa façon de travailler.Ilestrempliparleproducteurlui-même danslapartiebackoffice.
Lebloc«informationssupplémentaires» fournit de plus amples renseignements sur le producteur. Ces informations sont :• métier• pays• région• taille de l’entreprise• spécialitéIlestrempliparleproducteurlui-même danslapartiebackoffice.
administrable
dynamique
58
LA PAGE MON PANIER
statique
statique
dynamique
Onretrouvelabarrederassurance,commesurlapaged’accueil,afindesupprimer les doutes pouvant subsister sur le sérieux de Manavi au moment de l’achat
Lebloc«Serviceclient»donnelecontactdisponible pour le SAV
ChaquearticlemisdanslepanierapparaitdansunaffichagetypeListe.
59
statique
dynamiqueLebloc«Total»indiqueleprixtotaldesachatsàvalider,ainsiquelamentionlivraisongratuite.
Lesboutons«Continuermesachats» et«Étapesuivante»,commeleursnoms l’indiquentpermettentrespectivement de revenir sur la page Liste des produits ou de rentrer dans la validation de ses achats.
60
statique Lapartie«SeConnecter»,unefois les champs correctement remplis, renvoie vers la page Mon Compte de l’utilisateur enregistré.
statique Lebloc«RéseauxSociaux»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àlafidélisationdesacommunauté.
LA PAGE DE CONNEXION AU COMPTE
61
statiqueLeformulaire«S’inscrire»permetdecréer son compte pour effectuer ses achats. Ilestsuivid’unemaildeconfirmationqui estenvoyésurlemaildufuturabonnéafin devérifiersonexistenceréelle.
62
statique
statique
Lebloc«Serviceclient»donnelecontactdisponible pour le SAV
Lesous-menu«MonCompte»permet d’accéder directement aux pages associées aucompte.Ilfaitofficedenavigationàtraversles onglets de la partie compte personnel.
LA PAGE MON COMPTE
63
dynamqiue
dynamqiue
statiqueUn cours texte introductif accueille le client etcertifiesaconnexionàsoncompte.
Lebloc«MesCommandesencours»permetà l’utilisateur le suivi de achats et renforce le sérieux et la transparence de Manavi.
Lebloc«MesFavoris»estunblocgéré directement par le consommateurs. Ilrésumelesderniersfavorisque le client a ajouté à sa liste.
64
Lebloc«MesFavoris»estunblocgérédirectementpar leconsommateur,afindemarquerdesproduitssusceptibles del’intéresser,qu’ilsouhaitepartageravecd’autresprospects, ouglobalementauquelilsouhaitepouvoirseréférerdenouveau.
Lebloc«MesCoordonnées»permetauclientdemettreàjour ses coordonnées.
Lebloc«Changermonmotdepasse»permetauclientdemodifierson mot de passe.
LA PAGE MON COMPTE : LES SOUS-MENU
65
Lebloc«Moncarnetd’adresse»permetauclientdecréer et/oudemodifierlesadressesoùilpourraêtrelivré(lechoix de l’adresse de livraison se fait lors de la commande), ainsiquesonadressedefacturation.
Lescommandesencoursd’acheminement,quiontétévalidéesparle client mais pas encore livrées.Lesanciennescommandespasséesquipermettentunrécapitulatifde l’activité du consommateur depuis son inscription.
LE MARKETING
68
LES MAILS
69
Les e-mails Manavi ont été conçus de manièreresponsive,afinqu’ilspuissentêtreconsultéssurn’importequelsupport.
Pourrépondreàcescaractéristiques techniques,certainsélémentsontétésimplifiés(notammentlatextureKraft etlatypographie«bitter»).
70
Manavi agrémente son site e-commerce d’un blog d’actualité tenu à jour avec des informations sur l’écologie, le commerce équitableetlesproduitséco-responsables.
LE BLOG
71
Ilpermetdedévelopperd’aspectcommunautairequigravite autourdelamarqueetdediversifierl’offreproposée aux internautes.
72
FACEBOOKFacebook vient s’inscrire dans l’objectif de tenir informer les abonnés delamarquedesnouveautésaussi bien du site e-commerce comme des nouveaux articles du blog.Ilpermetégalementdegérerlesretoursclients et d’apprécier les commentaires et avis des internautes
LES RÉSEAUX SOCIAUX
73
TWITTERTwitters’inscritluiaussi dans l’idée d’informer etfidéliserlesinternautesmais permet aussi et surtout d’assurer un service après ventedequalitéen se montrant réactifs aux questionsetpermettant une interface de dialogue en cas de problème.
74
LES SUPPORTS PRINT
75
LE GUIDE D’UTILISATION
78
TECHNOLOGIES : Serveur : Ruby 2.1.2 Langage de développement : Rails 4.1.5
arborescence Du frontoffice
SPÉCIFICATIONS TECHNIQUES
79
Framework : Foundation Responsive : oui Langages d’intégration:SLIMetSASS
arborescence Du bacKoffice
SPÉCIFICATIONS TECHNIQUES
LE BACKOFFICE
82
Le backofficeestl’interfacequipermet d’administrer le site web: ses contenus, ses utilisateurs, gérerlesproduitsqu’ilproposeet les commandes de ces derniers. Pour y accéder, il vous suffitdevousrendreàl’adressesuivante: www.manavi.fr/administrator etdevousauthentifieravec vosidentifiantspersonnels.
Retour sur l’accueil du site
Visualisation des infos récentes
Gérer les commandes et les retours
Gérer les produits, les catégories et les producteurs
Gérer les clients
Gérer les contenus du site
Gérer les actualités du blog
Statistiquesinstantanées:• Les dernières commandes
passées sur le site• Les derniers clients ayant
créé un compte
11
2
2
3
3
4
4
5
5
6
6
LE TABLEAU DE BORD
83
Statistiquessurlesproduitslesplusvendus depuis le début du site.
Clore la session
Listedesproducteursetdesproduitsquevousdevez 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
84
Retrouvez toutes les informations relatives aux commandes passées sur le site ici. Vous pouvez consulter le contenu etlesinformationsdescommandesencliquantsur«Voir».Ilenvademêmepourlesretoursdecommandesdansl’onglet«Retours».
LES COMMANDES ET LES RETOURS
85
suppriMer Des proDuits Déjà présents sur votre siteCocherle(s)produit(s)souhaité(s)et«Supprimer».
exaMiner et valiDer les proDuits proposés par vos proDucteursRanger les produits par statut et repérez ceux signalés comme« En attente».Cliquezsur«Editer»leproduit.Pour valider le produit : Général > Statut = activé ou désactivé pour le refuser
Pensezàbienvérifierlesinformationsdetouslesonglets (à gauche) avant de valider. De plus, c’est à vous de choisir lacatégoriedanslaquelleapparaitlefuturproduitparmi lalisteproposée.Asavoirqu’ilfautchoisirlacatégorielapluspréciseàlaquelleappartientleproduit.
MoDifier Des proDuits Déjà présents sur votre site «Editer»leproduitetmodifierlesinformationssouhaitéespuis«Sauvegarder».
LES PRODUITS
86
ajouter De nouveaux proDuits Général Remplirtousleschampsconcernantleproduitetlelabelsinécessaire(nouveauté,soldes,éditionlimitée,findestock).
ImagesChoisirjusqu’à5imagesconformesàlachartegraphiquedusite(voirdocument).Sélectionnerl’imageprincipaleduproduit quilereprésenteaumieux.
DescriptionLa description courte correspond au petit texte de 25 caractères maximum juste en dessous du titre sur la page d’accueil.Ladescriptionlonguedoitêtreexhaustiveetprésenterendétailleproduit.Elleseraaffichéesurlapagedédiéeàl’article.
Caractéristiques techniquesChoisirparmilalistelesattributsquiqualifientaumieuxvotreproduitetquiserontaffichéssurlapagedédiéeàl’article.
CatégorieSélectionnerLAcatégorieàlaquelleappartientvotreproduit.Lechoixnepeutsefairequeparmileniveaudeclassementleplusprofondpour une meilleure catégorisation.
ProducteurAssocier 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,cliquezsur«Ajouterunproducteur».Astuce : Pensez à organiser vos producteurs grâce à l’icône pour les retrouver plus facilement.
Fiche techniqueSélectionnerlafichetechniqueauformatPDFcorrespondantàvotreproduitquiseraproposéeentéléchargementsurlapageduproduit.
1
2
3
4
5
6
7
LES PRODUITS
87
123
4
567
88
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).
LES CATÉGORIES
89
Vouspouvez«Editer»lescatégoriesdéjàprésentessurlesite(renommer,déplacer), «Ajouter une catégorie»quelquesoitsonniveaud’informationouen«Supprimer».
90
exaMiner et valiDer les proDucteurs canDiDatsRangerlesproducteursparstatutetrepérezceuxsignaléscomme«En attente».«Voir»leproducteurpouraccéderàsafichedétaillée.Pourvaliderleproducteur:«Editer»Informationsproducteur>Statut=activéoudésactivépourlerefuser.Pensezàbienvérifierlesinformationsdetouslesonglets(àgauche)avantdevalider.
suppriMer Des proDucteurs Déjà présents sur votre siteCocherle(s)producteur(s)souhaitéset«Supprimer»oupasserlestatutduproducteursur«Désactivé».
voir une fiche proDucteurCliquezsur«Voir»pouraccéderauxinformationsdevosproducteurs.Modifierdesproducteursdéjàprésentssurvotresite.«Editer»leproducteurlorsquevousêtessursafichedétailléeetmodifierlesinformationssouhaitéespuis«Sauvegarder».
MoDifier Des proDucteurs Déjà présents sur votre site «Editer»leproducteurlorsquevousêtessursafichedétailléeetmodifierlesinformationssouhaitéespuis«Sauvegarder».
LES PRODUCTEURS
91
92
ajouter De nouveaux proDucteurs
Informations producteur Remplir tous les champs concernant le producteur et sélectionner une imageDescriptionRemplirladescriptionduproducteuretdesonactivitéquiseraaffichéesurlapagedédiéeauproducteurCoordonnéesRemplir tous les champs concernant les renseignements de contact du producteur Mot de passeEn cas de besoin vous pouvez changer le mot de passe du producteur directement iciCoordonnées bancairesLeRIBduproducteurluipermettantderecevoirlesoldedelaventedesesproduitsInformations supplémentairesRenseignerlesinformationsdelalistequiserontaffichéssurlapagedédiéeauproducteur
1
2
3
4
5
6
LES PRODUCTEURS
93
123456
94
suppriMer Des clients Cocherle(s)client(s)souhaité(s)etcliquersurSupprimerpoureffacerunclientdevotrebasededonnéesclient.
voir une fiche clientCliquezsur«Voir»pouraccéderauxinformations de vos clients.
MoDifier les clients Déjà inscrits sur votre site «Editer»leclientlorsquevousêtessursafichedétailléeetmodifierlesinformationssouhaitéespuis«Sauvegarder».
LES CLIENTS
95
ajouter un nouveau client Informations client Remplir tous les champs de renseignement concernant le client et stipuler son inscription (ou non) à la newsletter.CoordonnéesRemplir tous les champs concernant l’adresse postale du client.Adresse de facturation / livraisonChoisir une ou plusieurs adresses de livraison/facturation pour les commandes du client.Mot de passeEn cas de besoin vous pouvez changer le mot de passe du client directement ici.
1
1
2
2
3
3
4
4
LES CLIENTS
96
suppriMer une pageCocherla(les)page(s)souhaité(es)etcliquezsur«Supprimer».
ajouter une pageDanscertainscas(exemple:jeuconcours)vouspouvezêtreamenéàcréerunepagesurvotresite.«Ajouter une page»permet decréerunepagedecontenuavecsonURLproprequevouspouvezrelayersurlesréseauxsociauxoudansvosarticles.
MoDifier une page«Editer»votrepagepour enmodifierlecontenu, le titre, le chemin.
LES PAGES
LE CONTENU
97
LA HOMEPAGESerendredansl’onglet«Blocsstatiques»pourmodifierlesélémentsdynamiquesdelapaged’accueil(Slider, sélections de produits et de producteurs, valeurs).
notre sélection/ les nouveautésnos valeurs
les proDucteursle sliDer
LE CONTENU
98
RÉÉCRITURE D’URLLa fonctionnalité réécriture d’URL permet de créer des adresses de pages personnalisées, des redirections temporaires ou permanentes.
LE CONTENU
99
Cetterubriquevouspermetdegérerlesarticlesdublogassociéausite:écriredenouveauxarticles,modifierceuxdéjàpubliés,lessupprimer…
ajouter un nouvel article
ACTUALITÉS / BLOGLE CONTENU
Chef de projetManon [email protected]
IntégratriceAdeline [email protected]
ROOM 102 studio de création
