CAHIER DES CHARGES · page 3 PRESENTATION Modula Formation 381, boulevard du Président Wilson 33200 Bordeaux 05 56 44 58 68 Description de l’établissement : Modula Formation est

page 1

CAHIER DES CHARGESModula Formation

Page 2

SOMMAIRE

1. PRÉSENTATION ............................................................................................ 3 1.1. Les coordonnées 1.2. Description de l’établissement 1.3. Contexte 2. PRÉSENTATION GÉNÉRALE DU PROJET .............................................................. 4 2.1. Objectifs du site 2.2. Public visé 2.3. Date et budget prévus

3. DESCRIPTION DES SOLUTIONS SOUHAITÉES ....................................................... 5 3.1. Graphismes et aspect visuel 3.2. Contenu du site 3.3. Arborescence du site - Charte graphique 3.4. Fonctionnalités attendues 3.4.1. Contenu, gestion du site, administration 3.4.2. Formulaires et questionnaires 3.4.3. Animation et interactivité 3.4.4. Site marchand 3.4.5. Fonctionnalités particulières 3.5. Hébergement et nom de domaine 3.6. Référencement 3.7. Plateformes de partage et réseaux sociaux 3.8. Services complémentaires

4. ANNEXES ................................................................................................... 9 4.1. Exemples de sites. 4.2. Le parcours de l’Utilisateur 4.3. UI Design 4.4. Référencemen - Législation 4.5. Documents joints

page 3

PRESENTATION

Modula Formation

381, boulevard du Président Wilson

33200 Bordeaux

05 56 44 58 68

Description de l’établissement :

Modula Formation est un centre de formation professionnelle

continue situé à Bordeaux. Il propose des formations courtes

(bureautique, CAO-PAO, Web, Communication, Management,

Commercial, Langues, Comptabilité, RH Droit, Sécurité) ainsi que

deux titres professionnels (Designer Web et Développeur Web).

Contexte :

Le projet consiste en la refonte du site internet existant :

www.modula-formation.com

Page 4

PRESENTATION GÉNÉRALE DU PROJET

Objectifs du site :

Le site doit permettre, à travers un bon référencement et un Design UX efficace,

d’améliorer la notoriété du Centre avec pour dessein final d’augmenter son activité.

Public visé :

Le site vise tous les internautes susceptibles d’être concernés par une formation

professionnelle. Demandeurs d’emploi ou salariés intéressés par l’acquisition de

nouvelles compétences ou le perfectionnement de connaissances, ainsi que les

entreprises et collectivités et les acteurs du marché de l’emploi.

Usage des internautes :

L’analyse de Google Analytics sur l’année passée révèle que 85% des visiteurs utilisent

leur ordinateurs pour se connecter sur le site contre 12% qui le font avec leur mobile

(+5% de progression en un an toutefois). L’usage des tablettes restent anecdotique

(<3%). Les heures de connection vérifient ce fait : principalement la journée, pendant les

heures de bureau.

Date et Budget :

Deux mois de développement prévu.

page 5

DESCRIPTIONS DES SOLUTIONS SOUHAITÉES

Graphisme et aspect visuel :

(voir Charte Graphique)

- Le menu doit être fixe avec le logo en entier en haut à gauche. Dès que l’on scrolle, le

logo devient minimaliste et la couleur du menu change.

- Prévoir des animations sur les « hover » d’images ou de CTA.

- Le site doit être responsive design.

Contenu du site :

Récupération des contenus du site en place (photos, pdf notamment), après étude des

textes par rapport au référencement.

Arborescence du site :

Templates à créer :

La page d’Accueil La page Contact

La page Témoignages La page Modula Formation

La page Financement La page Formations Courtes

La page Section-Formation La page Titres Professionnels

La page Formation: détails La page Articles

Au total, il y aura 127 pages (voir arborescence ci-contre).

Page 6

- Arborescence du Site -

Formations courtes

Titres Pro

Modula Formation Contact

Accueil

...

RH - Droit

Sécurité

Bureautique

PAO CAO Mul-timedia

Word Init

Photoshop

...

...

Windows

Autocad

...

L’actu

Articles

...

FinancementsTémoignages

Règlement Intérieur

Mentions Légales

Footer

Evaluations

Google Forms

Test de pré-admission

Documentation

Programme détaillé

Dossier de candidature

Test de pré-admission

Documentation

Programme détaillé

Dossier de candidature

Programme

Inscription

Programme

Inscription

Programme

Inscription

Programme

Inscription

Designer Web

Développeur Web

SST

SST MAC

Sage Paie

Gestion Paie

page 7

FONCTIONNALITÉS ATTENDUES

3.4.1 Contenu, gestion du site, administration

Présentation du Centre de Formation, ce qui fait sa spécificité.

Présentation des différentes formations et des titres professionnels.

Une triangulation entre réseaux sociaux, site et blog (mise à jour 2 fois/semaine)

est prévu afin d’augmenter les backlinks.

Le contenu évoluant sans cesse, le client a besoin de pouvoir intégrer du contenu

en interne (modifier les pages et ajouter des articles) et donc d’avoir accès à un

back-office.

Wordpress est donc choisi comme CMS.

3.4.2 Formulaires et questionnaires

Installer un formulaire de contact (ContactForm7 avec le texte légal à côté et un

Captcha) sur la page contact ainsi que sur toutes les pages de section-formation.

Garder le formulaire actuel avec la GoogleMaps sur la page Contact.

D’autres questionnaires sont en place dans le site (questionnaire d’évaluation et

de satisfaction) créés avec TypeForm.

Extension SlickPopUpLite qui permet d’afficher un questionnaire en pop-up, sous

forme d’un bouton vertical fixé sur le côté droit de chaque page.

Prévoir une Newsletter.

3.4.3 Animation et interactivité : Intégration du CSS animate.css pour animer les

textes et les CTA ainsi que le script Wow.js pour activer une animation au scrolling.

Ajout également de CSS supplémentaires pour animer les hover de façon originale

(page d’accueil et page de présentation des formations courtes).

Page 8

Des formulaires de contact sont intégrés au footer ainsi que des tests d’évalutation

pour permettre à l’internaute d’interagir avec le site.

3.4.4 Site marchand : pour l’instant non, mais il y a la possibilité d’installer un

WooCommerce plus tard.

3.4.4 Fonctionnalités particulières :

Le thème UDesign de Wordpress a été choisi, notamment pour ses fonctionnalités

et ses shortcodes. Mais parce que je voulais personnaliser davantage le site, j’ai

créé un thème enfant (copie et modification du functions.php, création d’une feuille

de style css, d’un screenshot.jpg, d’un dossier js pour le javascript (wow.js) et d’un

dossier css pour l’anime.css).

3-5 Hébergement et nom de domaine

Choisir un nouvel hébergeur ou rester chez OVH.

page 9

3-6 Référencement

Balisage Meta, H1, H2…, phrasing, recherche de mots-clefs => Utilisation de

l’extension Yoast SEO pour optimiser le référencement.

Inscription Annuaire Google

Arborescence du site (robots.txt, sitemap.xml, index.html, htaccess.)

3-7 Plateformes de partage et réseaux sociaux

Liens avec Facebook, LinkedIn, twitter, YouTube

Prévoir lien de partage sur les réseaux sociaux dans les pages de formations

pour augmenter la notoriété par viralité et acquérir du trafic de niveau 2.

ANNEXES

4-1 Exemple de sites concurrents :

La Piscine : https://www.lapiscine.pro

Le wagon : https://www.lewagon.com/fr

Philomatique : http://www.philomathiquebordeaux.com/

4-2 Documents joints :

- Charte Graphique

- Wireframing XD

Page 10

- Charte Graphique -

Couleurs

Reprise des couleurs principales de l’ancien site (ligne 1) plus ajout de couleurs secon-daires (ligne 2)

# 96D1DA #3CA6A6 #878787 #72829A #E0B61E

RVB 150-209-218 RVB 60-166-166 RVB 135-135-135 RVB 0-108-109 RVB 224-182-30

#183E81 # E1600F #E20E32 #8C0C58 #72829A

RVB 24-62-129 RVB 225-95-15 RVB 226-14-50 RVB 140-12-88 114-130-154

page 11

Polices

On garde le style SerifSans de l’ancien site :

OpenSans pour le texte et Palanquin Dark pour les titres

H1 - PalankinDark 48 px

abcdefghijklmnopqrs-tuvwxyzABCDEFGHI-J K M N O P Q R S T U -

VWXYZ12346789H2 - PalankinDark 34 px

abdefghijklmnopqrstuvwxy-zABCDEFGHIJKLMNOPQRSTU-

VWX12346789H3 -OpenSans Bold 24px

abcdefghi jklmnopqrstuvwxyzABC-DEFGHIJKLMNOPQRSTUVWXYZ12345679

Paragraphe - OpenSans 13px

Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et sta-tionibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat exti-mas partes.

Page 12

LE PARCOURS DE L’UTILISATEUR

L’internaute (salarié, demandeur d’emploi ou étudiant, voire DRH), à la recherche

d’une formation, se retrouve sur la page d’accueil de Modula Formation.

Grâce à la barre de recherche située en haut

à gauche, il accède directement à la formation

recherchée.

La page décrit la formation en détails, les compétences qu’elle permettra d’acquérir,

puis les dates et le tarif, les pré-requis, le niveau de sortie, ainsi que les débouchés.

Cette formation l’intéresse et grâce au CTA « testez-vous », il vérifie s’il a les aptitudes

requises pour y assister.

Il cherche ensuite des renseignements sur le centre de formation, sur son sérieux.

Il raura pris connaissance sur la page d’accueil des taux de réussite des certifications

et le pourcentage de retour à l’emploi, va sur le blog pour voir les dernières actualités

(ça renseigne sur le rythme des mises à jour, l’activité et le dynamisme du Centre),

jette un œil aux témoignages. Puis il va sur le net à la recherche d’informations plus

objectives (les avis sur Google MyBusiness, le site Facebook, les vidéos YouTube qui

lui donnent une idée des locaux, du matériel mis à disposition… => penser à insérer les

vidéos directement dans le site).

En fonction de son statut (page d’accueil : salarié, demandeur d’emploi ou étudiant),

il a accès aux informations concernant les possibilités de financement.

Une fois qu’il est rassuré sur le sérieux du Centre, il se renseigne sur les types de

formations délivrées (diplômantes, qualifiantes, PCIE, est-ce qu’elles sont reconnues

par l’Etat ?).

Lorsque sa décision est prise, il clique pour prendre renseignements et/ou rendez-

vous sur le CTA « contactez-nous » qui se trouve dans le footer, ou grâce au formulaire

page 13

de la page contact ou à ceux qui sont disponibles dans toutes les pages section-

formation.

Sur le côté droit, un bouton «contact» fixe est également disponible à chaque instant

de la navigation sur toutes les pages quel que soit le media utilisé.

Les blocs de lecture sont placés à gauche (zones froides) tandis que tout ce qui

requiert une interaction avec l’internaute (les CTA, le menu accordéon des formations,

les formulaires) sont placés à droite (zones chaudes).

Le site est responsive, dans l’optique d’une utlisation grandissante de l’usage du

mobile.

L’UI DESIGNL’objectif principal du site est de gagner en notoriété et d’obtenir un bon taux de

conversion, c’est-à-dire d’accrôitre ses contacts au moyen des formulaires (direct) ou d’appels téléphoniques (indirect).

Clarté et concision => Page d’accueil :

1 - Hero Section (plutôt qu’un slider afin d’optimiser le temps d’’affichage de la page) avec un léger mouvement zoom in. Des accroches efficaces : 2 questions, 1 réponse. Deux CTA clairement identifiés qui amènent vers les deux types de formations proposées.

2 - Qu’est-ce que fait la spécificité du centre ? Quatre visuels avec des animations.

3 -Les partenaires.

4 - Les différents statuts avec animations et des dessins personnalisés.

5 - Lien vers le blog.

Efficacité :

La navigation, grâce à la barre de recherche en page d’accueil, permet à l’internaute d’obtenir une réponse immédiate à sa question. Pour celui qui veut explorer le site, l’information finale (la formation) se trouve à moins de trois clics.

Toutes les formations ont été hiérarchisées afin de faciliter la navigation.

Page 14

LE RÉFÉRENCEMENT

Une attention particulière a été portée aux principes de référencement.

STRUCTURE INTERNE :

Balisage pour chaque page (balises meta-title, meta-description, balise H1, H2..)

Bien définir les mots-clés et expression-clés pour chaque formation. Le contenu du texte doit être en adéquation avec le titre (Google Analytics - Search Console). Il doit intéresser l’internaute pour qu’il reste plus longtemps sur la page et s’élever dans le PageRank

Maillage interne : liens sur les mots-clés, liens sur les pages

Optimisation des images : poids, nom de l’image, alt, title, description

Meta names (title, description, robots - viewport) et Meta-properties (og:title, og:description, og:image)

METTRE DES BOUTONS DE PARTAGE DE RÉSEAUX SOCIAUX SUR LES DIFFÉ-RENTES FORMATIONS POUR ACQUÉRIR UN TRAFIC SUR UN NIVEAU 2 ET AUGMEN-TER LA NOTORIÉTÉ DU CENTRE

STRUCTURE EXTERNE :

Référencement triangulé : Site, Blog et Réseaux Sociaux. Augmenter les backlinks.

REFERENCEMENT PAYANT (SEM) : Prévoir une campagne AdWords ponctuelle.

page 15

LA LÉGISLATION

1 - Mettre son site en conformité par rapport aux cookies :

Rappel des obligations légales (CNIL) :

Avant de déposer ou lire un cookie, les éditeurs de sites ou d’applications doivent :

- informer les internautes de la finalité des cookies

- obtenir leur consentement

- fournir aux internautes un moyen de les refuser.

La durée de validité de ce consentement est de 13 mois maximum.

Nécessité d’installer une extension pour afficher le bandeau d’information préalable

2 - Collecte des données formulaires (Mentions CNIL) :

Les « mentions CNIL » correspondent aux informations qui doivent être communiquées aux consommateurs au moment de la collecte de leurs données personnelles.

La loi Informatique et libertés (loi de 1978 modifiée en 2004) impose de regrouper les éléments suivants dans vos mentions CNIL :

- l’identité du responsable d u traitement (votre marque)

- la finalité de l’utilisation des données (en quoi ces données vous seront utiles)

- les destinataires des données (votre service marketing par exemple)

- les droits conférés par la loi aux consommateurs (à savoir le droit d’accès, de rectification, et d’opposition), ainsi que la manière de vous contacter.

https://www.cnil.fr/fr/modele/mention/formulaire-de-collecte-de-donnees-personnelles

La réglementation RGPD rentrera en vigueur le 28 mai 2018 avec de nouvelles règles de protection.

3 - Dans le footer, mettre les mentions légales et le réglement intérieur.

4 - Toutes les photos sont fournies par le centre de formation ou sont libres de droit.

Page 16

LOREM IPSUM NOVI RAD


Pourquoi nous choisir ?

Nos partenaires

Les financements

L’ACTU


MORE... MORE...

Rechercher

Accueil FORMATION TITRES PROFESSIONNELS MODULA FORMATION L’ACTU CONTACT

Modula Formationncidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpalla facilisi.Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod

Témoignages

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut

laoreet dolore magna aliquam era»

Lorem ipsum dolor sit amet, cons

More... ->

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

volutpat. Ut wisi enim ad










Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Premier Article Deuxième Article

Modula Formation

Formation Professionnelle Continue

381. Boulevard du Président Wilson

33200 Bordeaux

2018 Modula Formation Bordeaux

Règlement intérieur de l’organisme de formation

Mentions Légales

Contactez-nous

Fin de Formation

Donnez-nous voter avis

«

PAGE D’ACCUEILConstruction de la page d’accueil.

Ajout de Css supplémentaire pour un effet original sur le survol des rubriques

« Pourquoi nous choisir» et «Financements»

MAQUETTAGE + IMPRESSION D’ECRAN

page 17

PAGE MODULES DE FORMATION

Pop-Up latéral qui permet d’accéder à un formulaire de contact à n’importe quel instant de la navigation du site

(extensions SlickPopUp + ContactForm7)

Intégration de CSS Supplémentaire pour un effet original sur le survol des différentes ru-briques de formation

Le thème ne gérant le responsive qu’avec un maximum de 4 colonnes, nécessité d’intégrer les dix modules grâce à des media queries

Page 18

Rechercher


Modula Formation



33200 Bordeaux



Mentions Légales

Contactez-nous

Fil d’Ariane

Contact

Testez-vous !

Témoignages

Formation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

Word Initiation

10 domaines de formation {

Slider Témoignagneshortcodes Blockquotes

Slider Témoignagneshortcodes Blockquotes

PAGES DE PRÉSENTATION DES FORMATIONS PAR MODULE

MAQUETTAGE

page 19

FORMATION

Télécharger Programme

Formation PCIE

PROGRAMME DETAILLE

Inscription

Rechercher


Programme> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nisl auctor, eleifend nibh eget,

> DNam mattis eros eget ligula commodo, ut rutrum purus semper.

> Vivamus sit amet nisl auctor, eleifend nibh eget,

> nisl auctor, eleifend nibh eget,

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nisl auctor, eleifend nibh eget,


1er CHAPITRE

Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.

2ème CHAPITRE


3ème CHAPITRE


4ème CHAPITRE


Type de Validation

Formation Certifiante

Eligible CPF n°0000=> Lien vers d’autres formatioins liées <#>=> Parcours PCIE et liens vers différentes formations correspondantes <#>

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nisl auctor, eleifend nibh eget,


> Vivamus sit amet nisl auctor, eleifend nibh eget,

> nisl auctor, eleifend nibh eget,

> consectetur adipiscing elit. Vivamus

0 jours - 00 heures

Première FonctionMauris nec lectus semper, porttitor felis vitae, facilisis ligula. Maecenas tempus porta augue et aliquam. In sed enim mauris. Sed id iaculis urnaMauris nec lectus semper, porttitor felis vitae, facilisis ligula. Maecenas tempus porta augue et aliquam. In sed enim mauris. Sed id iaculis urnaMauris nec lectus semper, porttitor felis vitae, facilisis ligula. Maecenas tempus porta augue et aliquam. In sed enim mauris. Sed id iaculis urna

Modula Formation



33200 Bordeaux



Mentions Légales

Contactez-nous

Fil d’Ariane

Contact

programme complet <#>

Date de Formation et Tarifs

Pré-requis

Participants

Moyens Pédagogiques

Niveau de sortie

_

+

+

+

+

PAGE DE FORMATIONMAQUETTAGE

Beaucoup d’informations qu’il faut synthétiser (notamment grâce à un menu-accordéon.)

Page 20