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