TPI - Maquette site web by Gisèle Alves

TPI

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

Table des MatieRes 1.

Introduction

4-5

Planification et organisation

6-7

Analyse web marketing

8 - 11

3.1

Public cible

8-9

3.2

Besoins du client

3.3

Besoins du site web

3.4

Benchmark concurrentiel

10 - 11

Définition des pages du site et de leur contenu

12 - 13

Analyse de thèmes Wordpress

14 - 15

Wireframe

16 - 21

Moodboard

22 - 23

Maquettes

24 - 37

8.1

Maquettes Photoshop statiques

8.2

Maquettes Marvel dynamiques

24 - 35 36 - 37

Identité visuelle

38 - 45

10. Réservation en ligne, analyse de solutions 10.1

Plugin Wordpress

10.2

Service en ligne

46 - 49 46 - 47 48 - 49

11. Réseaux sociaux 11.1

Création des pages Facebook et Instagram

11.2

Campagne Facebook

50 - 55 50 - 52 52 - 55

12. Proposition pour la suite du projet

56 - 57

13. Liens

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

INtroDuCTion

Le mandat proposé par le Media Engineering Institute ou MEI1 (le mandant) via son responsable M. Daniel Rappo, consiste à développer la communication digitale d’une entreprise en devenir. Sandrine et Mathieu Divorne sont frère et sœur (le client). Il est spécialisé dans la vente de vêtements, elle est conceptrice en multimédia, talentueuse et passionnée de design2. Elle s’initie depuis quelque temps au monde du tatouage. Ils rêvent de réunir leurs forces dans une entreprise commune et proposent un concept de salon de tatouage doublé d’un commerce de T-shirts qui mettrait en valeur les dessins de Sandrine. Ils ont un nom et un logo pour promouvoir leur future marque (Dade’s) et prévoient de louer une surface commerciale prochainement afin de pouvoir démarrer leurs activités. Les objectifs de ce travail sont fixés dans le formulaire du cahier des charges fourni en annexe3. Il s’agit tout d’abord, de créer un design d’une maquette de site web avec une fonction e-commerce, sur la seule base du logo fourni par le client. Ensuite, il s’agit d’analyser et de proposer trois solutions de réservation en ligne pour le salon de tatouage. Finalement, quelques actions de promotion de la marque via les réseaux sociaux (Facebook et Instagram) doivent être proposées. Ce projet a été conçu afin que l’apprentie puisse approfondir les domaines suivants : design, administration et gestion d’entreprise, marketing et communication et gestion de projet. Le présent document reflète à l’aide de textes et illustrations, les démarches et réflexions qui ont conduit la candidate au produit proposé.

1 2 3

http://mei.heig-vd.ch Pour voir son portfolio : http://www.sandrine-divorne.com Cf. annexe 1, formulaire de cahier des charges

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

MATTHIEU DIVORNE Agent d’exploitation Gestionnaire de vente

SANDRINE DIVORNE Conceptrice en multimédia Tatoueuse

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

pLaNiFICation et oRgaNisation

Le temps imparti pour ce projet est de 90 heures. La répartition est fixée dans le cahier des charges : Proposition d’une déclinaison graphique pour le site (logo fourni)

Réalisation d’une maquette statique de site web

34h

Maquette interactive et responsive4 du shop en ligne

10h

Analyse et proposition de solutions de type agenda et réservation en ligne

Création des pages corporate Facebook et Instagram

Conceptualisation d’une campagne Facebook

Organisation proposée pour la suite du projet

Documentation du projet et journal de travail

20h

Suite à la prise de connaissance du mandat, une liste des tâches détaillée pour toutes les étapes du projet a été réalisée5. Trello est un service collaboratif de gestion de projet. Il permet aux membres d’une équipe de définir des tâches (des cartes), de les organiser (dans des tableaux). Il facilite la répartition des tâches, il permet de modifier les priorités. Chacun peut commenter, échanger, voir qui travaille sur quoi, ce qui a été fait, ce qui reste à faire, etc. Pour le bon déroulement du TPI, et pour permettre au client et au mandant d’avoir une information continue sur l’avancement du projet, un groupe Trello a été créé. Les tâches détaillées ont été transformées en cartes qui devront être rangées dans des listes (to do, doing, done, to validate).

Copie d’écran du groupe Trello TPI

4 5 6

Adapté à la consultation sur un écran de téléphone portable Cf. annexe 2, Liste des tâches détaillée http://www.trello.com

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

A la demande des experts un « macro-planning » initial, « imprimable », a été produit sur Excel. Il reprend les tâches dans les grandes lignes, sous la forme d’un diagramme de Gantt, et fixe un ordre et donc des priorités. Pour la documentation un minimum de 1h30 de rédaction par jour a été prévu. Chaque étape importante est validée par client pour ne pas perdre du temps, être sûr qu’il est satisfait et que le projet se déroule bien.

Planning initial

Enfin, le MEI utilise Slack pour la gestion de ses projets. Slack est un système de messagerie instantanée conçu pour le travail d’équipe. Il permet d’échanger facilement des fichiers et s’intègre efficacement avec une quantité de services (Trello, Google Drive, Dropbox, Github, etc.). Sandrine Divorne (qui représente le client) est également collaboratrice du MEI. Pour cette raison un “channel” Slack a été créé spécialement pour le TPI, avec Sandrine Divorne, Daniel Rappo et la sous-signée, Gisèle Alves comme membres. Cet outil permet un contact permanent entre les intéressés et la communication autour du projet est très réactive.

Copie d’écran du groupe Slack TPI

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

Analyse Web MarketiNg

Avant le lancement de la réalisation graphique de la maquette du site web, une recherche web marketing s’impose.

3.1

public cible

Afin de s’adresser à la bonne clientèle, un profil client a été réalisée (voir l’illustration ci-dessous). Les informations importantes comme, l’âge, le sexe, la zone géographique, les habitudes et les hobbies des personnages que la marque veut cibler sont essentiels pour se mettre à leur place et ainsi offrir un produit et un service adaptés. La marque adopte un style « vintage » ou « neo-retro » qui participe à la définition de la cible (cf. Moodboard ci-dessous pour une explication approfondie).

PROFIL DES FUTURS CLIENTS POTENTIELS DE LA MARQUE DADE’S • Femmes et hommes • En couple ou célibataires • 18 à 60 ans • Habitent en Suisse • Amoureux des vieilles motos et voitures (oldtimer) • Souhaitent se faire tatouer et/ou acheter un t-shirt design • Veulent s’informer des techniques et des tarifs utilisés • N’aiment pas perdrent du temps

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

LIFE 9

GISELE ALVES

3.2

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

besoins du client

D’abord, les potentiels acheteurs ont besoin de s’identifier par l’image de marque. Puis, d’être rassurés par la qualité des produits et services offerts.

3.3

besoins du site web

Le principal objectif du site web est de vendre les produits et services proposés par la marque, d’attirer des nouveaux clients et de les fidéliser. Pour ce faire, il est important d’avoir une plate-forme dont le design représente les valeurs et l’image de marque de l’entreprise, d’avoir un shop en ligne doté d’un système de paiement sécurisé (pour les t-shirts) ainsi qu’un système d’agenda et de prise de rendez-vous en ligne (pour les taouages).

3.4

benchmark concurrentiel

En Suisse, il n’existe évidemment pas de concurrents directs dans le secteur combiné du tatouage et de la vente de t-shirt. Toutefois, afin de bien positionner le site du client, trois analyses ont été réalisées: un salon de tatouage seul, un salon de tatouage et de piercing, ainsi qu’un site e-commerce de t-shirts personnalisés.

PHŒNIX TATTOO Activité : Lien :

Salon de tatouage http://www.phoenix-tattoo.ch/

Points positifs : Bonne impression lorsqu’on arrive sur la page d’accueil. On comprend tout de suite qu’il s’agit d’un salon de tatouage. Le site bénéficie d’un bon référencement sur Google, avec les termes « tatouage en Suisse ». Le contenu est bien structuré, le style visuel est uniforme dans l’ensemble du site, un lien Facebook est accessible depuis l’en-tête du site et sur la page de contact.

Points négatifs : Certaines photos sont sombres et on des tailles différentes. Beaucoup de texte, la fonte choisie rend la lecture difficile, et le site n’est pas responsive.

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

SAM’S PIERCING & TATTOO Activité : Lien :

Salon de tatouage et piercing http://www.sams-piercing.ch/

Points positifs : Le contenu est bien structuré, il renvoie sur sur une communauté Facebook importante (4793 likes). Le shop en ligne propose également un système de promotion pour Facebook.

Points négatifs : Le design est désuet, au premier coup d’œil la page d’accueil propose au moins six fontes de caractères différentes, les couleurs sont inadaptées à l’ensemble du design, le site n’est pas responsif, les deux niveaux de menus portent à confusion, les photos sont de différentes tailles, leur qualité est moyenne et il n’est pas possible de les zoomer.

SHIRTCITY Activité : Lien :

E-commerce de t-shirts personnalisés http://www.shirtcity.ch/fr/

Points positifs : Bonne impression, la page d’accueil propose une petite vidéo décontractée sur le déroulement de la commande à l’envoi du produit au client. Liens vers les réseaux sociaux, Facebook, Pinterest et Google+ sont disponibles depuis le pied de page. Bon référencement sur Google, avec les termes « t-shirt personnalisé en Suisse ». Contenu bien structuré, le style visuel est uniforme sur l’ensemble du site responsive. Il est très simple de choisir et modifier un produit. Chaque article peut être « liké », commenté ou partagé.

Points négatifs : Pour personnaliser un article avec une image ou un logo individuel il est nécessaire de créer un compte, il aurait été plus agréable de pouvoir essayer avant.

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

deFiNition DeS paGes du SiTe et de Leur ConTenu

Le challenge de cette maquette consiste à créer un espace représentant la marque en deux déclinaisons (Dade’s ink et Dade’s shop) qui proposent un produit et un service différents, tout en gardant une cohérence homogène. Le header7 et les footers8 sont identiques sur toutes les pages.

ACCUEIL Cette page va présenter : • les produits (t-shirts personnalisés) et services (tatouages et dessins uniques) proposés par la marque via deux sliders et des zones dédiées • un endroit réservé aux annonces d’évènements liés au public cible de Dade’s, comme par exemple, des conventions de tatouages, de motos et de voitures anciennes. Cette rubrique est importante car si elle est bien alimentée, elle peut devenir une référence pour les adeptes du style (vintage) véhiculé par Dade’s et générer du trafic régulier sur le site web

A PROPOS Un espace dédié à l’équipe, à l’historique de la marque ainsi qu’une zone spécifique à Dade’s Shop et Dade’s Ink sur laquelle les créateurs pourront s’exprimer sur leur parcours, formations, etc.

7 8

En-tête Pieds de page

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

TATTOO

SHOP

Une section réservée au tatouage, un filtre va permettre de trier les photos des tatouages et les dessins, un endroit pour que la tatoueuse puisse exposer les techniques qu’elle privilégie ainsi qu’une partie pour l’hygiène et la prise de rendez-vous.

E-commerce de la vente de t-shirts reprenant les dessins réalisés par l’artiste.

CONTACT Google maps, formulaire de contact, une photo de la vitrine de l’entreprise, du magasin et du salon.

SITE MAP La structure des pages a été réfléchie de manière à rendre l’expérience utilisateur agréable, avec un seul niveau de menus permettant de trouver les informations avec le moins de clic possible.

ACCUEIL

A PROPOS

TATTOO

SHOP

CONTACT

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

Analyse de Themes WordpRess

L’analyse de quelques thèmes Wordpress sert pour la suite du projet. L’objectif consiste à choisir un thème qui réponde au mieux aux besoins du client. L’étape de personnalisation du thème vient juste après. Les éléments graphiques à créer ensuite doivent s’adapter aux contraintes des templates (types de page) qui composent le thème choisi. Cette tâche facilitera l’intégration du design et du contenu ultérieurement. Différents critères ont servi à faire une première sélection : • • • • • • •

responsive shop integré bonne diffusion (nombre de téléchargements) recommandations (nombre de votes) fonts de caractère interchangeables widgets disponibles (éléments de contenu) comportement des sliders et degré de liberté pour les paramétrer

Voici les thèmes retenus pour un premier tri: • http://demo.zooka.io/?item=monaco • http://monaco.zooka.io/demo13/ • http://themeforest.net/item/ronneby-highperformance-wordpress-theme/full_screen_ preview/11776839?ref=cirvitis • http://themes.dfd.name/ronneby/second/ • http://themes.dfd.name/ronneby/third/ • http://themes.dfd.name/ronneby/shop-first/ • http://themes.dfd.name/ronneby/twenty_ninth/ • http://themeforest.net/item/tattoo-pro-your-tattoo-shop-wordpress-theme/full_screen_ preview/11690958 • http://themeforest.net/tags/vintage

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

Le thème Wordpress finalement choisi par le client se nomme « Ronneby », il est disponible pour 59 $ US sur la plateforme Envato9. De là, il est possible de démarrer l’étape suivante, le wireframe.

http://themeforest.net/item/ronneby-highperformance-wordpress-theme/11776839

GISELE ALVES

WireFRame ACCUEIL

Les wireframes ont d’abord été réalisés sur papier, pour permettre une première discussion avec le client. Ils ont ensuite été corrigés et recréés sur le logiciel en ligne de mockups, Balsamiq10. Ils ne sont pas interactifs mais montrent clairement la structure souhaitée des pages, c’est un travail dédié à l’architecture de l’information, qui reprend point par point les conclusions du chapitre 4 pour illustrer graphiquement la position de chaque élément et fonctionnalité.

TRAVAIL PRATIQUE INDIVIDUEL

http://www.balsamiq.com

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

A PROPOS

GISELE ALVES

TATTOO

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

SHOP

GISELE ALVES

SHOP

TRAVAIL PRATIQUE INDIVIDUEL

SHOP

Page du shop responsive tablette

Page du shop responsive smartphone

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

CONTACT

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

MoodBoaRd

Le moodboard est un outil qui permet d’exprimer l’ambiance du site, d’un point de vue graphique (couleurs, typographies, style d’images). Les images du moodboard ont été fournies par le client. Le style « vintage » est prédominant, il évoque le « millésime », l’authentique, l’original qui n’est pas une imitation. Ce point est essentiel puisque c’est bien sur la garantie de qualité, d’originalité et d’exclusivité des dessins de l’artiste que se base la communication.

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

8.1

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

MaquetTes maquettes photoshop statiques

La disposition des éléments a été conçue de manière à créer un équilibre entre Dade’s shop et Dade’s Ink. Le design de la maquette a été inspiré du logo fourni par le mandataire, du wireframe réalisé auparavant puis du thème Wordpress choisi par le client.

ACCUEIL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

A PROPOS

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

TATTOO

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

SHOP

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

SHOP

Page du shop responsive smartphone

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

CONTACT

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

8.2

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

maquettes marvel dynamiques

Marvel11 est un service en ligne qui facilite le design et le prototypage de maquettes de sites et d’applications mobiles. Il permet la collaboration en offrant des fonctions de partage, par exemple pour montrer ses réalisations et récolter les commentaires des clients et des membres de l’équipe de projet. Il permet également d’exporter ses maquettes dans plusieurs formats (dans un dossier compressé pour consultation offline, en mode PDF, pour les plateformes iOS et Android). Comme exigé par le cahier des charges, seule la partie shop du site sera interactive. Pour cette étape, à partir de la maquette du shop pour mobile, six planches supplémentaires ont été réalisées. Le format choisi est celui du smartphone, à la demande du client. Le prototype a été réalisé de manière à permettre au client de se rendre compte du comportement de l’interface. Les interactions mises en place sont les suivantes : • activation du menu • mode hover sur le panier • clic sur le produit pour accéder à la fiche détaillée

Page du shop en vision normale

Menu déployé

http://www.marvelapp.com

Aperçu du contenu du panier

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

Page de détail du produit séléctionné

GISELE ALVES

Menu déployé

Aperçu du contenu du panier

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

IDeNtiTe visueLle

Comme indiqué dans le cahier des charges, les typos ainsi que les logos ont été fournis par le client.

Logo principal de la marque

declinaisons du logo

Logo de la marque Dade’s (représentant la combinaison du salon de tattoo et du shop) est utilisé pour promouvoir l’ensemble des services proposés par Dade’s.

Plusieurs déclinaisons du logo principal sont possible, ceci permettant une adaptation et une lisibilité sur un maximum de supports visuels.

Chacun des personnages représente un des services proposés ainsi que la personne concernée.

Certaines versions se présentent en négatifs ou sans fond. Il est également possible de faire disparaître les deux personnages.

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

adaptation du logo pour la partie salon de Tatouages

adaptation du logo pour le shop

Lorsque le salon de tatouage fait ses propres communications, il utilise un logo adapté, avec, uniquement, la partie « ink ».

Pour la promotion du shop, celui-ci utilise également, comme le salon de tatouage, un logo adapté.

GISELE ALVES

pictogrammes et autres elements graphiques

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

typographies

bernier

BERNIER

Jamoer rough JAMOER ROUGH

abcdefghijklmn opqrstuvwxyz 0123456789!?

ABCDEFGHIJKLMN OPQRSTUVWXYZ 0123456789!?

abcdefghijklmn ABCDEFGHIJKLMN opqrstuvwxyz OPQRSTUVWXYZ 0123456789 0123456789

Avenir

Poppins

nexa rust

ABCDEFGHIJKLMN OPQRSTUVWXYZ 0123456789!?

ABCDEFGHIJKLMN OP QRST U V WXYZ 0 1 2 3 4 5 6 78 9

nuancier et textures

#000000

#f f f f f f

#e3e2e3

#f19451

R V B

0 0 0

255 255 255

211 211 211

236 126 68

C M J N

0 0 0 100

0 0 0 0

13 9 10 0

1 51 71 0

Textures de briques, bois, papier, pierre, ...

Le nuancier de Dade’s est principalement basé sur le noir et blanc, avec de part et d’autres quelques nuances de gris, rappelant le côté vintage des vieux films ou encore amenant une touche classe à l’ensemble. Afin de coloré un peu le tout, des textures telles que du bois ou de la pierre viennent réchauffer l’univers graphique.

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

elements imprimes deja existants

Carte de visite actuelle, uniquement pour le salon de tattoo

CABINET PLURIDISCIPLINAIRE

Ch. d’Eysins 12 ( 2ème étage ) 1260 Nyon

WWW.FACEBOOK.COM/DADESINK

+41 ( 0 ) 79 758 39 45

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

Carte fournie au client après la session de tatouage, avec les instructions concernant les soins

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

Carte de visite ainsi que la fiche de consentement mutuel à remplir lors de la prise d’un rendez-vous

GISELE ALVES

10.

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

reseRvaTion en ligne analyse de soLutions

Il existe au moins deux façons de répondre aux besoins du client.

10.1

plugin wordpress

La première consiste à installer un plugin Wordpress d’agenda de réservation qu’il faudra adapter au style graphique du site.

EXEMPLE A Nom : Lien :

Calendarize It http://codecanyon.net/item/calendarize-it-for-wordpress/2568439

Calendarize It, est une extension Wodpress qui offre un fonctionnement simple pour la création d’évènement. Pour la prise de rendez-vous, l’administrateur doit définir des tranches horaires pour les clients. Cet outil propose des nombreuses fonctionnalités, voici les plus importantes : Il propose une interface intuitive, simple d’utilisation, souple et modifiable selon les besoins de l’entreprise. L’outil utilise Visual CSS Editor, qui permet de customiser facilement les couleurs, le style et les fontes. Le plugin fonctionne avec ou sans Visual Composer, un outil qui facilite la mise en forme des éléments. Aucune connaissance de programmation est nécessaire car, le plugin utilise le système de Drag and Drop. Il existe 8 configurations prédéfinies à disposition. L’interface est responsive. Le plugin est en anglais mais peut être facilement traduit en français. Il propose des fonctionnalités supplémentaires, comme la gestion de droits utilisateurs. • Il est compatible avec IE10, IE11, Firefox, Safari, Opera, Chrome, Edge. • • • • • • •

La dernière mise à jour a été effectuée le 2 avril 2016. Nombre d’achat : 6’589. Niveau de satisfaction des utilisateurs : 4.27 sur 5 Licence standard, 29 $ pour 6 mois

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

sa v e th e da te

November

EXEMPLE B Nom : Lien :

PINPOINT http://wordpressbooking.systems/

PINPOINT, est un plugin Wordpress de système de réservation en ligne qui fonctionne avec AJAX. Cet outil propose des nombreuses fonctionnalités, voici les plus importantes : Il possède une puissance zone d’administration avec AJAX. Le design est épuré, très intuitive et facile à utiliser. L’interface est responsive. L’agenda peut être consulté sur tous les navigateurs et appareils. L’outil propose un support multilingue et un service de payement sécurisé Paypal. Il met à disposition des modèles d’emails et de notifications. La gestion de réservation permet d’ajouter, approuver, rejeter, annuler, supprimer, filtrer afficher les évènements du calendrier. • Il permet le contrôle du temps, avec une définition précise des tranches horaires disponibles pour le client. • L’interface graphique est modifiable. • Il offre la possibilité de créer un nombre illimité de calendriers. • • • • • • •

La version Pro affiche plus de 10’000 téléchargements.

Version Pro 50$ le plugin pour 1 site internet pendant 1 année

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

10.2 service en ligne La deuxième façon de subvenir aux besoins du client consiste à utiliser un service en ligne externe qui sera installé dans Wordpress via un plugin ou appelé avec une ou deux lignes de code.

EXEMPLE C Nom : Lien :

Agenda.ch http://agenda.ch/

Agenda.ch, est un outil Suisse, simple et efficace pour gérer un agenda en ligne. Cet outil propose des nombreuses fonctionnalités, voici les plus importantes : • • • • • • • •

• •

Il utilise un système de rappel des clients par SMS et par e-mail, afin de diminuer les oublis. Le service est souple et modulable, il s’adapte selon les besoins de l’entreprise. Pendant la configuration de l’agenda, une équipe d’accompagnement individuel est à disposition. L’outil est souvent mis à jour selon les besoins des clients. Chaque collaborateur dispose de son propre agenda qu’il peut synchroniser et gérer individuellement. Le patron garde le contrôle des agendas et des disponibilités de l’ensemble des collaborateurs. Il est possible d’exporter les rendez-vous agenda.ch vers d’autres périphériques (smartphones et tablettes) en sélectionnant finement les informations à importer. Il est possible d’utiliser le service en mode offline. Plus qu’un agenda, il est aussi un outil marketing, il permet d’avoir à disposition une base de données de l’historique des derniers rendez-vous pour chaque client. Il est possible ainsi de noter les préférences afin de proposer des services toujours plus personnalisés et adaptés à la clientèle. En outre, il dispose également d’un système de fidélisation avec des offres exclusives envoyé par SMS ou par e-mail et permet la gestion de newsletters. Il est accessible depuis plusieurs types de périphériques, desktop, tablette et smartphone, il propose le paiement en ligne (Paypal), peut être également utilisé pour Facebook.

La version d’essai est de 15 jours, sans engagement. Agenda.ch a plus de 300 clients en Suisse.

Licence standard, 29 $ pour 6 mois

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

EXEMPLE D Nom : Lien :

Agendize http://www.agendize.fr/

Agendize, est un outil français, simple d’utilisation avec une interface intuitive. Cet outil propose des nombreuses fonctionnalités, voici les plus importantes : • Il utilise un système de rappel et d’envoi de promotions et d’offre d’anniversaire aux clients via SMS et e-mail. • L’outil offre un chat en ligne dans lequel il est possible d’écrire et de répondre directement aux utilisateurs. • Il met également à disposition une base de donnée de l’historique des rendez-vous, des appels et des chats via le CRM Salesforce, afin de simplifier la gestion des utilisateurs, il est aussi compatible avec les CRM Zaho et Capsule. • Il est possible de mesurer le retour sur investissement des campagnes marketing pour mieux gérer le budget et d’analyser tous les échanges avec les clients via les rapports avancés du logiciel. • Il est disponible pour le web, pour Facebook et pour les plateformes iOS et Android via l’application Agendize Staff. L’outil ne fonctionne pas en mode offline. • Agendize est compatible avec Wordpress, il suffit de copier et coller le code dans un widget en HTML. • L’interface dispose des nombreux paramètres qui permettent de configurer l’application en fonction des besoins et de l’activité commerciale. Il est possible d’adapter le design à celui de la marque. • Pour éviter des doublons, la synchronisation avec les calendrier Google et Windows Live est disponible. • Agendize s’intègre avec les services de Newsletter MailChimp, Constant Contact et Campaign Monitor. Il accepte les paiements en ligne (Paypal) et propose également un système de prépaiement lorsque le client confirme son rendez-vous.

Mensuel 1 utilisateur 50 CHF par mois. 500 CHF par année 3 utilisateurs 75 CHF par mois. 750 CHF par année Jusqu’à 10 utilisateurs 195 CHF par mois. 1950 CHF par année (Pour tout abonnement annuel, le prix est des 10 mois.)

Les deux types de solutions proposés par cette analyse répondent à des attentes différentes. Tout dépend de ce que l’entreprise veut et combien la marque est prête à payer. La première solution avec les plugins Wordpress est idéale pour une entreprise qui veut simplement un outil pour la prise de rendez-vous, sans aucune attente particulière. La deuxième solution de service en ligne est idéale pour une entreprise qui veut investir sur l’expérience client afin de les fidéliser. Pour cette option il faut avoir le temps et le souhait de se lancer dans le marketing personnalisé.

GISELE ALVES

11.

11.1

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

reseauX sociAux creation des pages facebook et instagram

FACEBOOK La page Facebook de Dade’s ink est déjà en production, elle a été créée par le client qui exerce ses fonctions depuis le 1er février 2016, un jour par semaine sur Nyon. http://www.facebook.com/dadesink/

Page Facebook Dade’s Ink

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

Dans un premier temps il est question de créer une seconde page Facebook, dédiée à Dade’s Shop. Elle doit rappeler celle de Dade’s ink afin de garder une cohérence graphique entre les deux. Faute de contenu, la page n’est pas encore activée, mais la capture d’écran ci-dessous donne un aperçu.

Page Facebook Dade’s Shop

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

INSTAGRAM Pour ce réseau social qui n’est pas encore occupé, une seule page sera créée. Pour les besoins de l’inscription, une adresse Gmail a été enregistrée, (sandrine.dades@gmail.com). La capture ci-dessous donne un aperçu de la page Instagram qui n’est pas encore fonctionnelle.

11.2

campagne facebook

L’objectif de ce chapitre consiste à exposer les différentes manières de promouvoir la marque et d’attirer des prospects via Facebook. 11.2.1 CRÉATION DE LA PUBLICITÉ Pour qu’une publicité soit efficace et atteigne sont objectif, elle doit être directe, percutante. Il faut que les personnes qui la voient s’identifient au message, à l’image ou la vidéo publiés. Le message passé par le biais de la publicité doit inciter les personnes ciblées à effectuer une action, (liker, commenter et partager). Poser une question directement dans une publication peut inciter les gens à interagir. La publication devient encore plus efficace lorsque l’on joue avec les émotions, (rire, choc, émotion colère, surprise, joie, secret, etc.).

11.2.2 COÛT ET EFFICACITÉ D’UNE CAMPAGNE Il faut savoir qu’il n’y a pas de coût fixe pour une publicité sur ce réseau social. Il fonctionne avec un système d’enchères. L’efficacité de la campagne est influencée par 5 variables : le type d’enchère, le budget, le ciblage, la qualité de la publicité et son emplacement. 11.2.2.1 LES TYPES D’ENCHÈRES Il est possible de faire des enchères de plusieurs façons, au CPM (coût par mille impressions), au UCPM (coût par mille unique), au CPC (coût par clic), au ou au CPA (coût par action). Voici ci-dessous une brève description de ces modèles.

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

CPM L’annonceur paie pour le nombre d’affichages de la publicité. Il doit financer au minimum 1000 affichages, pour un coût minimal de 0.02$. Le paiement est facturé en fonction du nombre de vues. Cette méthode permet d’afficher plusieurs fois par jour la même annonce à la même personne. Il peut être pertinent si l’objectif de la campagne publicitaire est de gagner de la notoriété. UCPM Cette méthode ressemble à la précédente, la différence est que ce modèle d’enchère affiche une fois la publicité pour une personne par jour. L’avantage est qu’il touche plus de personne que la méthode précédente. Il peut être pertinent s’il est question de faire connaître la marque au plus grand nombre de personnes. CPC Le coût par clic est calculé en fonction du nombre d’engagements (clic, partages, commentaires) sur la publicité. À chaque fois qu’un utilisateur interagit avec la publicité le montant fixé au début est facturé. Les annonceurs doivent fixer un budget quotidien pour la publicité et dès que le nombre d’engagements correspondant au budget fixé est atteint, la publicité cesse de s’afficher. La mise minimale de cette enchère est de 0.01 $ par action de l’utilisateur. Le CPC est pertinent si l’objectif est par exemple d’augmenter le trafic vers un site internet. Cette méthode permet de mieux traquer les annonces et leur impact sur l’audience. CPA Le coût par action fonctionne comme le CPC, sauf que Facebook peut également facturer des affichages. Ainsi l’annonceur paye pour chaque conversion (clic, vue, etc.). Au final, il n’y a pas de meilleure méthode, le choix dépend de l’objectif visé par l’entreprise.

11.2.2.2 BUDGET Selon le type d’enchère choisi le budget peut énormément varier, il peut changer selon le type de contenu, le nombre d’affichages, le nombre de clics, la durée de la campagne, sa portée géographique, etc. Tout dépend de combien la marque est prête à payer afin de diffuser sa publicité.

11.2.2.3 CIBLAGE Pour une campagne réussie il est essentiel de s’adresser au bon public cible. Facebook permet de cibler selon des différents critères, le ciblage géographique, par âge, par sexe, par langue parlée, par centre d’intérêt, etc.

11.2.2.4 QUALITÉ DU CONTENU C’est probablement le cœur de la publicité, il faut proposer aux prospects un contenu original de qualité auquel ils peuvent s’identifier en un coup d’œil. Si le contenu est banal et peu intéressant même si le budget dédié à la publicité est important elle peut échouer et ne pas atteindre l’objectif souhaité.

GISELE ALVES

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

11.2.2.5 EMPLACEMENT DES PUBLICITÉS Les publicités sur Facebook sont affichées principalement dans deux endroits différents : • Dans la colonne de droite, disponible seulement sur la version desktop de Facebook. • Dans le fil d’actualités, sur mobile et desktop (Newsfeed), c’est l’emplacement le plus vu et cliqué sur Facebook. En outre Facebook propose divers affichages sur des sites partenaires (Instagram, Atlas, LiveRail, etc.).

11.2.3 CRÉER UNE CAMPAGNE FACEBOOK Il existe de nombreuses façons de créer et gérer une campagne publicitaire sur ce réseau social. La plus simple et la plus rapide consiste à utiliser la fonctionnalité «mettre en avant», pour promouvoir rapidement une publication. Pour une plus grande finesse dans le choix des variables, Facebook propose une interface de création de campagnes, ainsi qu’un gestionnaire de publicité. Enfin, Power Editor est un outil de gestion professionnel utile aux campagnes complexes. Grâce à l’interface ci-dessous, Facebook propose une démarche par étapes afin de guider l’utilisateur dans sa construction de campagne. D’abord il s’agit de sélectionner un des 11 objectifs proposés par la liste:

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

Ensuite, le système propose de cibler la publicité (âge, sexe, etc.), de fixer le budget global et de fixer une durée. L’exemple de campagne ci-dessus propose de mettre l’accent sur le ciblage géographique, pour faire connaître la marque dès qu’elle aura trouvé ses locaux. En effet, la future entreprise recherche un local sur Yverdon-les-Bains afin d’installer le salon de tatouage et le magasin de t-shirts dans un seul espace. Avec les informations disponibles ci-dessus, Dade’s peut désormais choisir ses types de campagnes, les budgets alloués, etc. Cela dit, pour démarrer, la méthode d’enchères CPM semble la plus adaptée. Elle permet de diffuser largement l’image de la marque afin de la faire connaître au niveau local. Pour plus de succès, une attention particulière doit être portée au contenu graphique des publicités. Ainsi, avec une centaine de francs, un ciblage sur la tranche d’âge visée sur Yverdon-les-Bains et environs peut toucher quasiment 20’000 personnes en un jour.

GISELE ALVES

12.

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

pRoposition pour la suiTe du projeT

Voici quelques propositions pour la suite de ce projet. Afin de concrétiser le travail réalisé jusque là, il faut procéder à une installation Wordpress chez un hébergeur, puis télécharger le thème retenu et l’installer. Il faut ensuite créer un “child theme” afin de permettre la personnalisation du thème tout en gardant la possibilité de le mettre à jour. Les templates pourront alors utiliser les éléments fournis dans les maquettes, et la CSS pourra être modifiée en tenant compte des éléments disponibles dans l’identité visuelle. Enfin, il faudra télécharger et installer le plugin de réservation qui aura la préférence du client, puis le personnaliser. Dès que l’entreprise sera installée, la campagne Facebook pourra être concrétisée. Il est recommandé de créer des comptes sur d’autres réseaux sociaux tels que Pinterest12, qui privilégie le domaine artistique et l’image, ainsi que Google my business13, afin de toucher plus de personnes et d’améliorer le référencement naturel. Il est conseillé d’utiliser un outil de publication automatique tel que Buffer14, qui est un moyen simple et efficace d’alimenter les réseaux sociaux Facebook, Pinterest, Twitter, Linkedin et Google +. Il permet de gagner du temps car les publications peuvent être préparées et planifiées en avance. Enfin, une fois que la localisation précise sera connue, il est conseillé de développer la communication de la marque en créant des supports publicitaires imprimés plus traditionnels, flyers, affiches, cartes de visite, etc.

CONCLUSION Dans l’ensemble, le projet s’est bien déroulé, les délais et objectifs fixés au début ont été respectés. Pour cette raison, il n’a pas été jugé utile de produire un planning final puisque celui-ci est la copie conforme du planning initial. Cependant, le nombre d’heures fixé dans le mandat pour certaines tâches a été sous-estimé. C’est le cas par exemple de l’analyse des solutions d’agenda en ligne, mais également celui de la campagne Facebook. Ces deux tâches devaient prendre huit heures en tout et il en fallu une quinzaine. Par chance, ces tâches avaient été parallélisées et étalées sur trois jours, ce qui fait qu’aucune modification visible n’est à relever sur le planning.

12 13 6

http://www.pinterest.com http://google.ch/business https://buffer.com/

CPNV 2016

TRAVAIL PRATIQUE INDIVIDUEL

GISELE ALVES

Les heures en trop ont été compensées sur les 26 heures dédiées à la documentation et aux propositions pour la suite du projet. À l’issue de ce travail, au moyen d’une bonne communication, il semble que l’association entre salon de tatouage et vente de t-shirts soit tout à fait réalisable! La candidate se réjouit de la suite du projet, de sa mise en oeuvre et du succès futur de Dade’s.

REMERCIEMENTS Un grand merci à: • Mme Sandrine Divorne, pour son précieux support à la mise en page et aux créations graphiques. • M. Daniel Rappo pour sa relecture attentive et ses corrections. gisele alves yverdon-les-bains 6 avril 2016

GISELE ALVES

13.

13.1

TRAVAIL PRATIQUE INDIVIDUEL

CPNV 2016

Liens images

• http://www.freepik.com/index.php?goto=74&idfoto=723882 • http://www.freepik.com/free-vector/vector-floral-skull-tattoo_723881.html • https://www.pinterest.com/pin/463096774158016847/ • https://www.pinterest.com/pin/179862578845043925/ • https://www.pinterest.com/pin/388787380306662827/ • http://www.gratisography.com/pictures/95_1.jpg • https://unsplash.com/photos/9SyOKYrq-rE • https://unsplash.com/photos/DYROsn8AyDI • http://themes.dfd.name/ronneby/shop-first/wp-content/uploads/2015/04/white-cuckoos-nest-cuckoosnest-shirt-with-random-print-screen-590x600.jpg • http://themes.dfd.name/ronneby/shop-first/wp-content/uploads/2015/04/heather-black-oneill-hellraiser-sslash-s-screen-tee-screen.jpg • http://cache1.asset-cache.net/gc/465394636-tattoo-artist-works-on-a-tattoo-for-a-client-gettyimages. jpg?v=1&c=IWSAsset&k=2&d=GkZZ8bf5zL1ZiijUmxa7QcQhTKMvdp7DtjExm%2F6IRCtoIOKhr2Y0fEpu9poVn2WR8wBBh909NRh6IMvlQHf9vw%3D%3D • http://photopost.brownpride.com/watermark.php?file=77770 • http://themes.dfd.name/ronneby/shop-first/product/scandi_chair/ • https://www.rockagogo.com/image/big/HYR43-tee-shirt-femme-hyraw-vida-loca-tete-de-mort-mexicainemarque-tatouage-rock-1.jpg Certaines des images (non mentionnées ci-dessus) contenues dans le dossier ainsi que le projet, ont été fournies par le client.

13.2 liens publicite facebook • http://www.commentcamarche.net/faq/25093-organiser-des-campagnes-de-publicite-sur-facebook • http://www.webmarketing-conseil.fr/publicites-facebook-ads-comment-bien-gerer-vos-campagnes/ • http://www.webmarketing-conseil.fr/quel-type-dencheres-vos-publicites-facebook-cpc-cpm-ocpm-cpa/ • https://www.olivierlambert.ca/facebook-ads-comment-ca-marche-combien-ca-coute • https://www.facebook.com/business/