Dossier de conception Web et Print - Antipodes, agence de voyage

Dossier de conception - Antipodes : Projet fil rouge -

Séjours en immersion dans la nature

- Lisa Waterlot La Piscine Janvier 2020 https://antipodes.mwat.fr/

1

2

SOMMAIRE

4• Contexte

Présentation 6• Environnement

Benchmark concurrentiel

La cible

Persona 1 Scénario

Persona 2 14• Identité visuelle Moodboard Logotype

Gammes de couleurs Typographie Mockup 24• Mise en place du site

Conception du site Wordpress 26• Parcours utilisateur

Flowchart, zoning et wireframes Maquettes

Maquettes et mockup

Tests utilisateurs 34 • Remerciements

3

Contexte

Présentation LE CONCEPT

Antipodes propose des séjours sportifs 100% outdoor. Ces séjours mêlent pratiques extrêmes que ce soit d’un aspect sportif ou pour l’apprentissage de techniques de survie en milieu hostile.

Plusieurs formules sont proposées : Extreme; en mode survie, Exploration; pour la découverte en profondeur d’un lieu d’exception et Expedition; un séjour longue durée qui mêle sport et découverte.

OBJECTIF DE CONCEPTION DU SITE

L’objectif d’Antipodes est de proposer une expérience outdoor hors du commun aux particuliers. Le site web doit donc permettre de consulter le catalogue des séjours, d’en savoir plus via des témoignages, des photos et des vidéos, et également de pouvoir contacter la société. La réservation fera l'objet d'une mise à jour ultérieure du site

PÉRIMÈTRE DU PROJET

Aucun support de communication existant (Absence de charte graphique, Logo etc). Le contenu rédactionnel est libre. L’objectif est de faire connaître l’activité et de développer la présence en ligne du client. L’offre de service donc le site s’adresse aux particuliers.

L’ambiance recherchée est moderne et simple.

4

Contexte

Cahier des charges FONCTIONNALITÉS

LIVRABLES

- Module d’inscription à une newsletter - Formulaire de contact - Vidéo, galerie photo, réseaux sociaux - Avis clients, offre commerciale (Prestations)

- Logo et charte graphique - Zoning et wireframes fonctionnels - Maquettes graphiques avec points de rupture (Ordinateur / Tablette / Mobile) - Etre conforme aux dispositions du RGPD (gestion des préférences des cookies ...), une page d’erreur 404

CONTRAINTES LÉGALES

Photographies et typographie gra- - Conception du site via un CMS tuites, non contractuelles et libres de - Tests utilisateurs sur le prototype interactif (Retours fichier PDF) droit.

5

Environnement

Benchmark Concurrentiel MAPPING DE LA CONCURRENCE

S-Faire «Ecole de savoir-faire traditionnel» offre quant à elle la possibilité d’effectuer des stages de techniques de survie dans la nature mais aussi de reconnaissance de plantes ou encore de vannerie ou filage sauvage. Wecandoo est une plateforme qui permet de s’inscrire à un atelier et de réaliser soimême un objet (maroquinerie, textile, D’autres concurrents proposent de céramique...). nombreux stages ou séjours à sensations fortes comme Adrenactive ou Enfin, d’autres plateformes permettent Cap Adrenaline. Ceux-là peuvent être de réaliser leur voyage ou atelier sur parfois plus familliaux et proposent des mesure, auto-organisé avec les particiséjours avec les enfants. L’UCPA pro- pants, comme Couchsurfing, Copines pose des séjours sportifs pour tous les de Voyage ou On Va Sortir. ages et en tous lieux.

Parmi les concurrents directs de Antipodes, on peut trouver Survivor Attitude. qui propose des stages de survie urbaine, des treks de survie, des séjours militaires /commando ou encore des stages d’aguérrissement. Ils sont uniquement situés dans les Hautes-Alpes en région Provence-Alpes-Côte d’Azur.

Sport Extreme Outdoor Survivor attitude Antipodes

Couchsurfing

Adrenactive

Copines de voyage

Cap Adrenaline

OVS

UCPA

Séjour autoorganisé

Séjour organisé S-faire Wecandoo

Atelier, Activité manuelle

6

SURVIVOR ATTITUDE https://www.survivorattitude.com/

Audit ergonomique

Critères ergonomiques de Bastien et Scapin

Guidage - Pas de fil d’Ariane mais mise en avant de la page active dans le menu Charge de travail - Menu très chargé et mal hiérarchisé - Formulaire d’inscription PDF fait sortir du site et nécessite des actions supplémentaires Contrôle explicite - Contrôle après clic sur «envoi» du formulaire de contact Adaptabilité - Site responsive mais avec un seul point de rupture - Couleurs contrastées et d’autres tons sur ton Gestion des erreurs - Pas d’alerte d’erreur au remplissage du formulaire de contact Homogénéité / cohérence - Code couleur de l’agenda peu homogène, le reste est cohérent Signifiance des codes - Peu d’icones donc pas de confusion Compatibilité - Grille de mise en page aléatoire

7

UCPA https://www.ucpa.com/

Audit ergonomique

Critères ergonomiques de Bastien et Scapin

Guidage - Fil d’Ariane, Call to actions mis en avant, hover et guidage sont bons.

Charge de travail - Pas très concis, beaucoup d’informations Contrôle explicite - Pas de confirmation avant d’appliquer l’action (retour à la commande etc) Adaptabilité - Site responsive à 3 points de rupture - Couleurs assez contrastées - Compréhensible pour habitués et nouveaux utilisateurs Gestion des erreurs - Signalisation des erreurs dans le formulaire avant l’envoi Homogénéité / cohérence - Les couleurs et les codes utilisés sont cohérents Signifiance des codes - L’information affichée est en adéquation avec son référent Compatibilité - Les termes et les textes sont adaptés à la cible, les éléments sont placés là où on les attend

8

COPINES DE VOYAGE

Audit ergonomique Critères ergonomiques de Bastien et Scapin

https://www.copinesdevoyage.com/

Guidage - Pas de fil d’Ariane - Aide et repères bien faits Charge de travail - Calendrier clos avant fin de tâche - Bonne hiérarchisation des infos - Beaucoup de scroll Contrôle explicite - Pas d’annulation possible de commande ou d’appel de l’aide Adaptabilité - Site responsive, couleurs parfois insuffisamment contrastées * Gestion des erreurs - Aide en ligne via chat ou tel - Confirmation des actions Homogénéité / cohérence - Code couleur et grille cohérents Signifiance des codes - Icônes cohérentes ou explicitées Compatibilité - Suggestion des voyages en tête de page est inhabituel

* Outil utilisé pour la vérification des contrastes : https://www.checkmycolours.com/

9

Environnement

La Cible

CIBLE ET MOTS CLÉS

Le coeur de cible d'Antipodes est les jeunes actifs en quête d'aventures.

Entre 25 et 35 ans, ils sont indépendants et souhaitent vivre des aventures qui les évadera de leur quotidien et dont ils ne reviendront pas indifférents ! Plusieurs profils peuvent se dégager : les "serial testeur", qui essaieront le service une fois avant de tenter de nouvelles expériences ou encore les "tenaces" qui retenteront ou varieront d'expérience en recherche de performance. Aussi les "slow traveller" remettent en question leur façon de voyager.

STRATÉGIE DE COMMUNICATION

Le ton adopté sera donc dynamique et entrainant. On s'adressera à la cible par la tutoiement car Antipodes ne se veut pas un service "académique".

La marque sera présente à terme sur les réseaux où sa cible est présente : Facebook, Instagram et Twitter. Elle communiquera sur des sujets autour du sport, de l'outdoor et de la survie.

Elle pourra inviter des professionnels à s'exprimer et à partager leur expérience.

Survie

«Slow travel» Vitesse

Immersion Observation Autonomie

Visiter autrement

Découvertes Vertigineux

Sensations fortes

Adrénaline

Déconnexion 10

Environnement

Persona

Antonin Barré INFOS PERSOS Age

26 ans

Profession

Etudiant en gestion

Situation

Célibataire, vie en colocation

Ville

Toulouse

MOTIVATIONS

Antonin aime essayer de nouvelles activités et il aime proposer à ses amis des sorties originales. Il test tous les nouveaux concepts, en bonne compagnie sans aucun doute !

ATTENTES Faire des rencontres

Avoir des sensations fortes

Challenger son potentiel

Apprendre l’autosuffisance

FRUSTRATIONS

Il a soif de nouveauté et de sensations fortes et est sans cesse en recherche d’une activité qu’il n’aurait pas encore mis à l’essai.

ATTENTES

Antonin compte bien s’amuser, se défouler et faire de nouvelles rencontres.

Il est aussi intéressé par les méthodes de survie et d’auto-suffisance qu’il pourrait apprendre. Il ne reviendra pas une seconde fois mais il fera connaitre à ses proches le service.

11

Environnement

Scénario PREMIÈRE ÉTAPE

Antonin prépare les vacances d’hiver à venir qui arriveront après les examens de l’Université. Il a besoin de souffler et il a bien l’intention de profiter de ces vacances pour vivre de nouvelles expériences. Il a découvert un nouveau concept de séjour «en mode survie» et a bien envie de proposer ça à ses amis.

DEUXIÈME ÉTAPE

Quelques uns de ses amis ont décidé de participer avec lui. Ils se sont donc inscrits via le formulaire en ligne et ont reçu des informations supplémentaires.

Certains étant inquiets du déroulé, ils ont pu contacter d’anciens participants.

Au retour du séjour, ils pourront faire de même et donner leur avis.

EXPERIENCE MAP - Future state Retours

Choix de la date, du lieux, du type de séjour Mettre une alerte

Remplir les infos persos et pratiques, Paiement

Se rendre sur le lieu du séjour et suivre le guide, rencontrer

Donner un avis pour les prochains participants

Le départ est-il certain pour moi ou pas encore?

Seul ou à plusieurs?

Est-ce la bonne formule pour moi?

Est-ce que le prix me convient?

Est-ce que les activités et l’ambiance sont à la hauteur de mes attentes?

Est-ce que je garde un bon souvenir ? Je garde contact ?

Curiosité

Opportunités

Actions

Prestation

Pensées

Inscription

Sentiments

Recherche

Rassurer sur le niveaux des sorties, l’accompagnement, l’équipement etc

Appréhension Expliquer le prix, proposer une FAQ, contact avec les anciens participants

12

Entrain

Satisfaction

Contact privilégié pour suivre le déroulé du séjour.

Garder des traces (photos etc)

Proposer un formulaire de retour, de parrainer de futurs participants

Environnement

Persona

Paula Richard INFOS PERSOS Age

31 ans

Profession

Conceptrice rédactrice

Situation

En couple

Ville

Grenoble

MOTIVATIONS

Paula a besoin de se changer les idées, de sortir de son quotidien et pour cela elle aime changer du tout au tout d’univers.

ATTENTES Faire des rencontres

Avoir des sensations fortes

Challenger son potentiel

Apprendre l’autosuffisance

FRUSTRATIONS

Elle aime son indépendance et aime partir parfois en solo parfois avec des groupes d’inconnus. Elle ne trouve pas d’offre de voyage qui allie sensations extrêmes, rencontres et découvertes.

ATTENTES

Compétitrice en puissance, Paula attend des défis à relever, de l’adrénaline et compte bien revenir changée de chacun de ses voyages. Si l’expérience lui plait, elle pourrait bien revenir de temps en temps.

13

Identité visuelle

Moodboard

14

15

Identité visuelle

Logotype

CONCEPTION DU LOGO

Le logo d’Antipodes représente les sports extrêmes à la fois grâce à la ligne de rythme cardiaque qui symbolise la montée d’adrénaline ainsi qu’avec la silhouette d’une personne escaladant cette ligne qui devient donc une montagne ou un paysage.

ADRENALINE

Le texte est scindé en deux «Anti» et «podes» étant à l’opposé, aux extrêmités l’un de l’autre. Les éléments graphiques sont mis en évidence par la couleur orangée, ainsi que le «O», symbole d’outdoor et rappelant également les pôles terrestres.

OPPOSÉS EXTREMES

16

SPORT OUTDOOR

17

Identité visuelle

Charte graphique ZONE DE PROTECTION

La zone de protection autour du logotype est destinée à le préserver d’un quelconque élément graphique ou textuel qui viendrait gêner sa lisibilité.

TAILLE MINIMALE ET HOMOTHÉTIE

Pour en garantir la lisibilité, une taille minimale de reproduction du logotype a été définie en fonction des utilisations. Le point de repère est la largeur du logotype.

Afin de ne pas altérer la lecture du logo, il n’est pas autorisé de réduire la taille au delà, ni de déformer ou de ne pas respecter le ratio de taille du logo.

Print : 40 mm de long

Web : 120 px de long

18

UTILISATION SUR FOND COULEUR

Le logotype Antipodes est appliqué de préférence sur fond blanc. Sur fond clair, le logotype s’applique dans sa version de référence. Sur fond moyen, il convient d’utiliser le logotype 1 couleur: #070E19 ou en réserve. Sur fond foncé, il est recommandé d’appliquer la version du logotype avec typographie en réserve.

UTILISATION DU SYMBOLE ET TEXTE

Afin de pouvoir s’adapter à des espaces plus étroits, le logo a été décliné en plusieurs éléments visuel qui peuvent être utilisé en tant qu’icône de site web par exemple.

Logo vignette

L’application du logotype en quadrichromie sur un fond orange ou bleu marine proche des couleurs du symbole est strictement interdite. Préférer la version monochrome ou en réserve.

Il est également interdit de modifier les couleurs du logo.

Le logotype de référence, quant à lui, ne peut être utilisé sans l’élément visuel ni sans le texte. En de rares exceptions, l'élément visuel peut être réadapté.

Fav icons

19

Identité visuelle

Gammes de couleurs et typographie GAMMES DE COULEURS

Les coloris utilisés sont une dominante de bleu marine, une couleur froide contrastée par un orange vif. Cette dernière couleur est dynamique et reste dans le thème du sport et de la vitalité. Ces couleurs sont contrastées et rappellent la dualité des situations extrêmes proposées par Antipodes.

La dominante sera donc au bleu marine décliné en plusieurs teintes et le orange sera utilisé avec parcimonie, en particulier pour des call to action ou autres éléments à mettre en avant.

Des autres coloris peuvent venir s’ajouter en petites quantités : un jaune et un vert demi-teintes.

PONDÉRATION DES COULEURS #020b1a R2, V11, B26 C100, M85, J55, N83 #26394a R38, V57, B74 C88, M67, J46, N47 #4a7091 R74, V112, B145 C75, M48, J27, N10 Opacité 60% #da490b R218, V73, B11 C8, M82, J100, N1 #fccc2d R252, V204, B45 C2, M20, J87, N0 #c2f74c R104, V247, B76 C33, M0, J85, N0

20

TYPOGRAPHIE

Les typographies utilisées sont Gidugu et Montserrat. Ce sont deux typographies sans-serif libres de droits qui s’appairent assez bien entre elles.

Gidugu sera utilisé pour les titres;

elle a une graisse épaisse et incarne l’aspect massif et énergique du sport.

Montserrat, plus light quant à elle sera utilisée dans les paragraphes pour contraster les titres.

Gidugu

Title font

h1. Bootstrap heading h2. Bootstrap heading h3. Bootstrap heading h4. Bootstrap heading h5. Bootstrap heading h6. Bootstrap heading

Montserrat Text font

Edia voluptas et anissi audanissit faceprescia nem hillupt atiatem que voloria tecaeruptae porem.

Boreiur aut estia accupitisquo corporest volendandit explibusam qui comnihi llibus, ullit eicae vellant videm fuga.

Nam con pos versper natium quisciisi omnihillam dolecae quiatem conseque ommolupitae simus nus.

21

Identité visuelle

Mockup

BRANDING IDENTITY & GOODIES

Broderie sur tricot

Carte de visite

22

Apple watch

Iphone

23

Mise en place du site

Conception du site wordpress PLANNING

Le site et l’identité visuelle doivent être livrés et mis en ligne avant la fin du mois de janvier selon les phases suivantes:

PHASE 1

PHASE 2

• Premières propositions de l’identité • Choix d’une proposition d’identité vivisuelle et réalisation d’un wireframe suelle, réalisation de la maquette, resimple du site selon le contenu fourni. tours et modifications.

PHASE 3

PHASE 4

• Choix de l’identité visuelle définitive et validation de la maquette du site.

• Conception du site, retours et modifications.

• Validation du site et mise en ligne. Un point est fait par semaine afin d’avancer selon la méthode agile.

ASPECT JURIDIQUE

CADRE TECHNIQUE

• Les photos fournies sont la propriété d'Antipodes, ou bien sont des photos libres de droit. Le client livre également tous les textes et photos.

• À compter de la signature du devis, le prestataire livre et cède l'intégralité des droits du logo au client et de tout les éléments visuels créés. Cette cession des droits d’utilisation, de reproduction, de représentation et d’adaptation, permet à Antipodes d’exploiter librement ces éléments pour toute la durée légale de protection des droits d’auteur.

• Le prestataire devra fournir les éléments du logo et de la charte graphique sous format numérique en haute définition. L’import et l’export des fichiers se feront en SVG, JPG, PNG, PDF. Les photos fournies en maquette sont gratuites, non contractuelles et libres de droit.

• Le site sera construit sur la dernière version du CMS Wordpress avec le constructeur de pages Divi.

24

NOM DE DOMAINE ET HÉBERGEMENT MAINTENANCE ET ÉVOLUTION

- Le prestataire formera le client sur Wordpress pendant une demi journée pour expliquer le fonctionnement de l’espace d’administration aux personnes chargées de suivre le projet.

Le client pourra donc gérer le site de manière autonome.

- Cinq interventions sont offertes par - Le prestataire mettra en oeuvre un le prestataire, au delà les prestations système de protection, via l'extension feront l'objet d'une facturation.

"Wordfence", pour maximiser la sécurité du site internet.

- Le site doit respecter les normes d'accessibilité du World Wide Web Consortium (W3C), les critères «Opquast Website» ainsi que les nouvelles lois RGPD. Le nom de domaine " antipodes.mwat. fr " et l’hébergement seront achetés auprès de l’hébergeur OVH et sera pris en charge par le client.

SÉCURITÉ ET ACCESSIBILITÉ

RÉFÉRENCEMENT

Le site sera configuré de manière à répondre aux critères de référencement naturel (SEO). L’application Yoast SEO a été installée sur le thème Wordpress afin d’aider le client dans la rédaction des textes. Ce module permet d’avoir un guide pour un bon référencement naturel sur le net.

25

Parcours utilisateur

Flowchart, zoning et wireframes PARCOURS UTILISATEUR

Le site sera composé de quatre pages: la page d'Accueil, les Séjours, A propos et Contact. Le logo présent amène à la page d'accueil. On peut y consulter un aperçu du catalogue, une galerie d'images, des témoignages, une présentation brève du concept ainsi qu'un accès à la page contact.

La page de séjour permet d'accéder aux informations relatives au séjour et propose un accès à la page contact pour s'inscrire. L'inscription direct depuis le site fera l'objet d'une révision ultérieure du site. Enfin la page à propos complète la présentation d'Antipodes et la page contact propose un formulaire permettant de s'inscrire ou de s'informer sur les séjours.

ZONING ET WIREFRAMES

Afin de structurer la page web, un zoning est proposé ci-contre et répertorie en deux sections les éléments concernant les séjours ainsi que le concept.

Le wireframe détaille la composition de chaque composant visuels et textuels et est décliné pour le web, pour les tablettes et pour les mobiles afin de représenter le responsive du site.

Ainsi, la version mobile comportera des tailles de typographies réduites par rapport à la version tablette et web (de 24px à 16px pour les paragraphes) et les éléments seront redisposés de manière à faciliter la lecture et l'utilisation.

ARBORESCENCE DU SITE

Antipodes

Accueil Catalogue et suggestions Galerie d'images

Les séjours Catalogue

Présentation

Détail séjour

Témoignage

Informations essentielles

Présentation

Programme du séjour

Accès contact

A propos

Modes de séjours et univers Vidéo

Dates et tarifs Itinéraire Formalités administratives Autres participants

Flowchart Antipodes

26

Contact Formulaire de contact

Zoning

Wireframe web

27

Wireframe Wireframe tablette mobile

Parcours utilisateur

Maquettes

Zoom sur la maquette desktop- Page d'accueil

28

Maquette web

Maquette tablette

29

Maquette mobile

Parcours utilisateur

Maquettes et mockup Page A propos

Page Séjour

Page Contact

Page 404

30

Détail Séjour

31

Parcours utilisateur

Tests utilisateurs PROTOCOLE

ACTIONS À RÉALISER

INTRODUCTION

1

Consulter la page "A propos"

• Présentation d'Antipodes et du site • Objectif : tester l'usabilité du site et trouver les axes bloquants ou d'amélioration.

• Détail du déroulé de test et des actions à réaliser • Mise en confiance : c'est le site qui est évalué et non la personne qui test.

2

Consulter le séjour en Sicile

3

Faire une demande d'inscription

4

S'inscrire à la newsletter

OBSERVATION

QUESTIONNAIRE ATTRAKDIFF

Pour tester le site, j'utilise le questionnaire AttrakDiff, élaboré par • L'utilisateur effectue les actions de- Hassenzahl et ses collègues en 2003? mandées directement sur le site ou la C'est un outil de mesure quantitative maquette du site. de l’expérience utilisateur et est un • Guidage de l'utilisateur si nécessaire outil de référence pour les chercheurs en UX. Il permet d’évaluer les qualités hédoniques (pourquoi on possède et on utilise un produit particulier) RETOUR UTILISATEUR et pragmatiques (utilité, utilisabilité, réalisation des tâches) des systèmes • Le participant remplit à l'écrit et de interactifs. manière anonyme le questionnaire Ces deux qualités vont influencer la perception de l’attractivité du produit AttrakDiff. ou système, qui va donner naissance à • Retour de ses impressions • Remerciements des participants pour des comportements et des émotions.

Le questionnaire comporte 28 leur temps et leur disponibilité questions, toutes sous forme d'échelle linéaire permettant d'évaluer deux termes opposés notés de 1 à 7. La retranscription des ses résultats se fait de façon précise et s'interprète dans les shémas suivants.

32

RÉSULTATS DU TEST

Schéma 1 - Diagramme des paires de mots

Schéma 2 Diagramme ou histogramme des valeurs moyennes

Schéma 3 - Portfolio des résultats

INTERPRÉTATION

Le Schéma 1 met en avant les valeurs extrêmes, critiques ou positives qui appellent à une amélioration : ici le site est perçu comme conservateur et peut être retravaillé en ce sens.

Le schéma 2 indique que les valeurs éloignées de la zone neutre sont à considérer comme des points positifs ou négatifs du système. Ici l'usabilité permet aux utilisateurs d'atteindre leur but (QP) et de s'identifier au produit (QH-I).

Enfin, le schéma 3 permet de détecter les dimensions du système qui remplissent déjà les objectifs de

Score Attrakdiff Intervalle de confiance

qualité définis et quelles dimensions ne répondent pas à ces critères. Ici, la désirabilité peut-être améliorée.

La suite du processus consistera à améliorer les aspects les plus faibles pour garantir une meilleure expérience utilisateur.

33

34

Remerciements

Je souhaite remercier toutes les personnes m'ayant accompagné pour ce projet. Merci à mes formateurs et à l'équipe encadrante du centre de Formation La Piscine pour la qualité des cours, pour leur investissement et pour leurs conseils. Merci à mon formateur Thomas Andrieux Laclavetine qui a initié et suivi ce projet.

Merci à mes amies, notamment Aurore Vauzelle et Kelly Michel pour leur disponibilité mais surtout pour leur avis critique et avisé sur mes productions.

Merci à mes parents, ma soeur et mon compagnon d'être présents quoi qu'il arrive et de m'apporter leur motivation, aide et soutien.

Merci à vous lecteur, d'avoir lu ce projet.

J'espère qu'il vous aura plu !

Lisa Waterlot

35

- Lisa Waterlot +33 6 87 81 28 78 13 Villa Haussmann 92130 Issy-Les-Moulineaux lisa.waterlot@free.fr

36