Agence Swell x SurfingWays - Rapport de stage 2018 by Glen Struillou

Maître de stage : Cédric Henry

Tuteur : Pascal Chatonnay

Glen Struillou

Rapport de Stage

Agence Swell x SurfingWays

LWPD 2018

Avant toute chose, j’aimerai remercier tout particulièrement Cédric pour son accueil et sa bonne humeur, de m’avoir fait confiance sur de nombreux projets et de m’avoir accompagné le long de ce stage tout en prenant le temps de répondre à mes nombreuses interrogations. Enfin, merci à Jean-Philippe et Thomas du Village by CA ainsi que à Elouan et Dominique de chez Eldom pour leur accueil chaleureux.

Sommaire

8 10 16

Introduction

Lâ&#x20AC;&#x2122;entreprise

Mes missions Sous-traitance Sites clients SurfingWays

Bilans

Introduction

Baigné dans l’art, la musique et la technologie depuis mon enfance, je me suis nourri des nombreuses inspirations et influences qui m’entouraient pour construire mes envies et développer mes compétences. Venant d’une formation dans les arts appliqués, je me suis dirigé vers les domaines du numérique pour leurs attrayantes évolutions et la passion, sans-cesse renouvelée, qu’ils m’apportent. Avec la conviction que l’on peut vivre de sa passion et avec le développement économique lié à internet et aux nouvelles technologies, j’ai suivi mes envies en me dirigeant vers le domaine du webdesign et du développement web en intégrant la licence professionnelle webdesign à l’IUT de Belfort-Montbéliard.

Dans le cadre de cette formation, ce présent écrit va présenter, expliquer et développer le stage que j’ai pu effectuer en cette année 2018. Convaincu que l’on peut allier différentes passions dans un métier, je me suis mis comme objectif de vivre au maximum de ces dernières. Après un stage de BTS Design Graphique option médias numériques dans la culture musicale, j’ai eu cette année l’opportunité d’effectuer mon stage de fin d’année dans une entreprise de communication orientée en partie dans le domaine du surf tout en travaillant en parallèle sur une application destinée aux surfeurs et autres riders.

Lâ&#x20AC;&#x2122;entreprise

#WeAreWavePlayers C’est donc SurfingWays que j’intègre en tant que stagiaire afin d’aider Cédric dans les différentes tâches de son métier. Durant ces seize semaines, j’ai pu participer à la fois aux projets de l’agence de communication Swell et à la conception de l’application SurfingWays. Cédric, avec son air enjoué et sa volonté d’entretenir des relations humaines simples et vraies, m’a permis de rapidement m’intégrer à l’entreprise et il m’a vite pris à parti pour la conception et la réalisation de certains projets, n’hésitant pas à me demander sur quoi je voulais travailler.

Cédric Henry, mon maître de stage, est un surfeur globe-trotteur qui travaille dans la communication depuis plus de 10 ans. Voulant allier sa passion et son métier, il fonde en 2011 à Saint-Brieuc dans le département des Côtes d’Armor, l’Agence Swell, une entreprise dédiée à la communication 360°. Travaillant seul, en indépendant, l’agence fonctionne cependant plutôt comme un collectif où des artistes, photographes, graphistes et développeurs interviennent sur différents projets.

Ayant réalisé la communication de la plupart des écoles de surf en Bretagne, l’Agence Swell vise également les entreprises hors de ce secteur. Après plusieurs années de réflexions et de préparations,il créer et lance officiellement en 2017 la première version de SurfingWays, une application à la grande ambition de devenir la boussole numérique des « joueurs de vagues ».

À l’écoute de mes propositions, j’ai pu participer pleinement et activement aux projets en apportant ma propre vision mais aussi beaucoup de questions. Car il ne faut pas oublier, le stage est avant tout un moyen d’apprendre et de comprendre le fonctionnement d’une entreprise tout en continuant de développer ses compétences. Et je n’ai pas manqué à cet apprentissage durant cette intéressante mais courte période de stage.

Le surfeur au Village Dans l’esprit startup qu’est la jeune entreprise SurfingWays et par son caractère innovant, Cédric intègre en septembre 2017 la pépinière de startups Le Village by CA, un écosystème et un bâtiment au sein de la caisse départementale Côte d’Armor du Crédit Agricole. Cette structure permet aux jeunes entreprises de bénéficier de bureaux à prix avantageux et d’un accompagnementau développement. Plusieurs startups y sont présentes et l’ambiance est bon-enfant ! JeanPhilippe est le « maire » du Village et s’occupe d’accompagner les startups avec son stagiaire Thomas. À la fin de mon stage, ce sont deux stagiaires qui sont venus aider Cédric pour la commercialisation : Alizée et Victor.

Cri de ralliement : Café ?

Mes missions

en fonction du prix. Les clients viennent principalement du bouche à oreille et des contacts que Cédric a pu se faire depuis ses débuts.

Fonctionnement Pour Cédric, il est important d’avoir une bonne ambiance de travail pour bien travailler. C’est donc dans un esprit détendu que les projets se réalisent. Blagues, musique, pauses café et moments de calme rythment la journée.

Cédric travaille beaucoup, notamment pour financer son application, et ses journées commencent souvent tôt le matin, voir la nuit. Ce sont donc de nombreux petits projets qu’il enchaîne. Cette affluence de projets apporte son lot d’appels. De nombreux appels. Beaucoup. Et d’emails. C’est là que je me suis rendu compte de la difficulté de gérer une entreprise seul tout en développant un projet en parallèle. Cela demande beaucoup de temps et d’énergie.

L’agence travaille sur des projets variés, des écoles de surf aux grandes entreprises en passant par les petits artisans. Cela permet d’apporter de la variété dans le travail, où l’on aborde des projets ouverts à la créativité et d’autres moins passionnants mais tout de même nécessaires au fonctionnement de l’agence. Les budgets sont donc tout aussi variés, allant du site vitrine sous WordPress dans les 1400 € à des e-shops sous WordPress ou PrestaShop dans les 2500 €. N’ayant pas les compétences d’un développeur back-end, ni l’envie de le devenir, il travaille à partir de thèmes WordPress et de Visual Composer. Cela lui permet d’avoir des prix attractifs et d’éviter les longs projets. Evidemment, les prix sont variables en fonction des clients et les projets sont variables

C’est justement avec le déploiement de l’application et avec ses nombreux contrats que j’ai pu avoir un rôle à jouer au sein de l’entreprise. J’ai donc assisté Cédric à la fois sur des projets clients et sur la conception de l’application.

Outils de travail Les outils de travail sont simples et classiques. Pour la création : Adobe Photoshop et Adobe Lightroom pour la retouche et optimisation des images, Adobe Illustrator pour les logotypes et icones, Adobe XD pour le maquettage. Pour le développement j’utilisais l’éditeur Atom puisque familiarisé avec, et FileZilla pour la mise en place des sites internet par ftp sur les serveurs de l’agence Swell.

Pour la communication entre nous, nous avions Slack pour sa praticité et facilité en tant que messagerie instantanée. Pour la gestion de projet, nous utilisions Asana pour les plannings et le transfert de certains fichiers. Pour le transfert et la sauvegarde de fichiers importants ou lourds, nous utilisions le serveur de l’agence Swell, hébergé dans le bureau.

Retouche

Communication

Adobe Lightroom Optimisation et export de photos.

Asana Gestion de projets. Slack Discussion instantanée.

Adobe Photoshop Retouche, optimisation et export de photos.

Création

Web

Adobe Illustrator Logotypes et icones.

Atom Éditeur de texte.

Adobe XD Maquettes web et mobile.

FileZilla Mise en ligne, gestion du serveur.

Sous-traitance Fonctionnement Dans le cadre de mon début de stage, Cédric a voulu me familiariser avec le fonctionnement de l’agence avec des petits projets de sites vitrines en HTML, CSS et JS à partir de templates qu’il avait établi. Ces projets venaient d’une agence de marketing basée à Bordeaux pour laquelle on sous-traitait. Projets à petits budgets, les sites se devaient d’être rapidement mis en place, d’où l’utilisation de templates.

L’agence de marketing se chargeait de vendre des sites aux clients, artisans ou PME, et nous transmettait par mail les besoins, les contraintes et les médias nécessaires (quand il y en avait).

Croisières Marco Polo

Le Marco Polo est un navire de croisière à Bordeaux qui propose des balades le long de la Garonne et de la Dordogne. Il propose des prestations pour des événements privés ou professionnels tels que des mariages, conférences ou encore des séminaires.

Mon maître de stage avait déjà travaillé sur le site avant mon arrivée et je n’ai eu qu’à continuer le travail qu’il avait commencé. L’agence de marketing nous avait transmis des photographies de bonne qualité, l’idée était donc de mettre en avant ces photographies à travers des sliders et sections pleine largeur. Pour apporter du dynamisme et mettre en page le texte, nous avons également utilisé des sections en moitié/moitié : texte d’un côté, photographie de l’autre.

L’utilisation d’un template, une première pour moi, permet une exécution rapide et efficace du projet ou le développement consiste principalement en retouches et ajustements (marges, hauteurs…). J’ai noté tout de même une redondance dans la pratique, notamment pour la mise en place des galeries ou il faut mettre à la main la totalité des images dans le code : pas de difficultés mais peu intéressant.

J’ai pu également me familiariser pour la première fois à Adobe Lightroom pour l’optimisation des images pour le site internet. Ce logiciel est plutôt simple de compréhension et permet un gain de temps dans les exports (gestion du poids, de la taille et des meta-donnés de l’image).

Le problème récurrent à ce type de projet à petit budget, c’est l’absence de matière. Ici nous avions de belles images, mais pas de logotype. Cédric a donc dû trouver une police équivalente à celle du nom du bateau pour créer un logotype faisant l’affaire. Ce type de petites prestations sont comprises dans le contrat et peu de temps doit y être accordé dans le fait que le but n’est pas de proposer une identité visuelle à part entière.

Même problématique pour les couleurs, nous avons simplement utilisé une couleur se rapprochant de celle visible sur le bateau. Merci la pipette !

Ce fut le premier projet en binôme avec Cédric qui m’a permis d’appréhender mon début de stage. Cela m’a introduit doucement au fonctionnement avec l’agence de marketing et j’ai pu comprendre les enjeux et aboutissants de ce type de contrats.

Rincon métallerie

Rincon est une petite entreprisesituée à Blanquefort dans les alentours de Bordeaux. Elle est spécialisée dans la métallerie, la ferronnerie et la serrurerie. Le but du projet est d’apporter un meilleur référencement et mettre en avant le travail de l’entreprise

Enfin, nous avons dû mettreen place le logo avec une image en basse définition ce qui nous a empêché de le mettre en avant dans le site. Nous avons tout de même réussi à l’utiliser dans le header après un traitement sous Adobe Photoshop.

Premier problème avec le projet, c’est le peu de moyens que l’on avait. Les photographies étaient prises par l’entreprise et n’étaient pas de qualité (petites, mal exposées…). Avec l’obligation de mettre en avant les travaux de Rincon, il a donc été difficile de la faire de façon harmonieuse avec le site. Le contenu rédactionnel étant très succin, il a fallu broder et au final, il y a peu de texte sur le site.

J’ai pu également travailler sur le référencement du site à travers la mise en place de pages dédiées à quelques localités ciblées par le client. Une méthode qui amène du contenu qui se répète mais qui reste efficace en matière de référencement.

Sur ce projet j’ai pu m’apercevoir de la difficulté de réaliser un site internet avec très peu de moyens. La communication a été difficile pour la réalisation du projet, qui a subi beaucoup de retours clients, plus que prévu. Cédric étant celui qui communiquait avec l’agence de marketing et vu que j’étais sur un autre projet par la suite, il s’est occupé des retouches qui sont arrivées. Un projet qui a pris plus de temps qu’il n’a rapporté.

Oeuf Plein Air

Le site internet Œuf Plein Air est une commande du producteur L’œuf de l’Agenais dans le Lot et Garonne. L’entreprise a pour éthique des œufs frais et distribués dans la localité.

J’ai eu une première étape de veille graphique, notamment au niveau de l’aspect de la poule, n’ayant pas le temps d’expérimenter plastiquement. Je suis vite passé à l’étape de conception en travaillant sur Adobe Illustrator.

Pour la réalisation du projet, c’est Cédric qui s’est occupé du site internet avec la mise en place du template et l’intégration du contenu. Pour ma part, j’ai eu à réaliser le logotype en reprenant la demande du client. Il fallait intégrer à la fois, l’œuf, la poule, un élément naturel (herbe) et le nom Œuf Plein Air.Comme souvent, on s’est retrouvés avec une surcharge d’éléments graphiques à intégrer et l’impossibilité d’expliquer au client les meilleures solutions. Etant donné que ce n’est qu’un plus dans le contrat, nous n’avons pas perdu de temps dessus et je me suis plongé directement dans la création.

Pour simplifier la réalisation et l’utilisation sur tous supports, je suis parti sur un œuf comme forme enveloppante, une bannière pour le nom et enfin l’ornementation par des brins d’herbe pour donner de la profondeur. Avec le peu de temps qui m’était disposé, je n’ai pas pu sortir des sentiers battus et j’ai donc proposé trois solutions simples. Pour la gamme colorée, je me suis basé sur les éléments naturels qui reflètent le produit : le bleu pour le ciel et le vert pour l’herbe qui reflètent la partie « plein air » du produit et enfin de l’orange pour l’œuf.

Le client ayant choisi la proposition ci-dessus, Cédric s’est donc attelé à l’intégrer au site internet. Ce court projet, qui m’a pris environ une demi-journée, m’a apporté un peu de respiration dans ce de stage où j’ai pu décrocher un petit peu du développement web. Je suis un peu déçu du résultat qui mériterait plus de travail, mais avec le peu de temps que j’avais et les contraintes du client, je suis arrivé à un résultat que j’estime correct.

Conclusion et qui s’éternisaient sur certains projets, alors que sur des petits budgets comme ceux-ci ils ne devraient pas y avoir tant de temps passé aux modifications. L’agence de marketing gérant les clients, il était difficile, voire parfois impossible, d’expliquer pourquoi telle ou telle demande n’était pas adaptée au projet. Les projets étant peu rémunérateurs et chronophages, Cédric a donc décidé d’arrêter ses contrats afin de se concentrer sur des plus gros projets.

Cédric a lancé cette solution de sous-traitance dans un but alimentaire, pour financer son application mais également pour me faire travailler sur des petits projets dans un premier temps. Cependant, avec la conception de l’application et d’autres projets de sites internet sur lesquels j’étais occupé, Cédric c’est vite retrouvé à enchaîner tout seul les contrats pour l’agence de marketing. De plus, certains points ont été difficiles, notamment les retours clients qui ne s’arrêtaient pas

Ces travaux m’ont permis de mieux appréhender la réalisation de sites internet à petits budgets, qui restent une grande partie du marché. L’utilisation de templates est, de mon point de vue, une certaine bride à la créativité et à l’originalité que l’on pourrait trouver sur internet. Cependant ils restent une bonne solution pour offrir une réalisation contemporaine à ce que demande avant tout le client : un site pas cher et qui marche.

Sites clients

Fonctionnement Cependant, dans le cas de clients proches, il se déplace pour faire connaissance. La majeure partie des sites se font sous WordPress tandis que certains, des e-shops plus importants, se font sous Prestashop. Travaillant sur des projets aux petits budgets, Cédric utilise essentiellement des thèmes, avec Visual Composer, qu’il personnalise. Durant ce stage, j’ai eu deux tâches globales dans ces projets : modifications et création.

L’Agence Swell à comme cœur de travail la réalisation de sites internet pour des entreprises aux domaines variés. Visible grâce à son site internet, l’agence tire cependant la plupart de ses clients grâce à son expérience et aux divers contacts de Cédric. Travaillant comme un collectif, l’entreprise propose également des prestations comme la refonte d’identité visuelle, de la communication imprimée, des shootings photos etc. Ainsi, selon les projets, Cédric fait appel à un graphiste, un photographe, etc. La communication avec les clients se fait principalement par mail et téléphone, ces derniers étant souvent trop loin.

Minou Surf School

Minou Surf School est une école de surf et de bodyboard située à Brest dans le Finistère. Ayant déjà fait développer leur site internet sous WordPress par Cédric auparavant, ils ont cette fois-ci contacté l’agence pour des modifications et mises à jour. Afin de m’introduire au fonctionnement de l’agence pour les projets WordPress, Cédric a décidé de m’attribuer les modifications.

L’école propose des cours à la mer et des cours de stand up paddle sur un lac. Auparavant ils parlaient des deux univers dans la même page, mais pour une meilleure compréhension ils ont décidé de séparer les deux environnements : une page « Côté Mer » et une page « Côté Lac ». Dans un premier temps, j’ai dû appréhender Visual Composer que je n’avais jamais utilisé auparavant. Connaissant déjà le principe, je n’ai pas mis beaucoup de temps à comprendre le fonctionnement et j’ai pu m’atteler directement aux retouches. Le site internet étant déjà réalisé, je me suis conformé à l’esthétique déjà présente sur le site mais j’avais tout de même une grande liberté en ce qui concerne la mise en page. N’étant pas encore tout à fait à l’aise avec les nombreuses possibilités et personnalisations de Visual Composer, je suis parti sur une mise en page simple et efficace.

L’une des particularités des écoles de surf, c’est le nombre de différents tarifs qu’ils appliquent. Afin de rendre compréhensible les différences, j’ai travaillé à l’aide d’onglets, un module que Visual Composer permet d’intégrer facilement. J’ai aussi travaillé sur le CSS dans Visual Composer afin de personnaliser l’apparence de certains éléments et d’adapter la mise en page au contenu. Le long de ce petit projet, j’ai pu découvrir les différentes fonctionnalités de Visual Composer et me l’approprier de façon à proposer des mises en page personnalisées. Les quelques difficultés que j’ai pu rencontrer n’ont jamais été longues à régler, grâce à l’aide de Cédric ou simplement après quelques recherches. La principale difficulté est de bien comprendre comment fonctionne Visual Composer et comment l’utiliser afin d’arriver à ce que l’on souhaite. A ce stade, je n’ai vu qu’une petite partie de ce que peux faire ce plugin mais j’ai pu comprendre les tenants et aboutissants de son utilisation.

Une autre particularité des écoles de surf, c’est l’importance de la photographie. En effet, de belles photos sont essentielles afin de convaincre le visiteur du sérieux et de l’intérêt de l’école : belles vagues, accessibles aux débutants et grands sourires ! Sur les sites internet d’écoles de surf,il y a souvent un grand nombre de photos, et il faut donc les préparer à la mise en ligne. J’ai pu effectuer cette préparation avec Adobe Lightroom afin de réduire la taille et le poids des images tout en intégrant des metas-données afin d’apporter un plus au référencement.

Ocean Ride

Ocean Ride est une école de surf située à Lacanau-Océan en Gironde. Elle propose des cours de surf et des locations de matériel. Ocean Ride a fait appel à Cédric pour la refonte de leur site internet qui se faisait vieillissant. Cette fois-ci, les gérants nous ont donné un brief complet avec l’arborescence, les éléments qu’ils voulaient dans chaque page, le texte en français et en anglais ainsi que des photos de bonne qualité. M’étant familiarisé avec Visual Composer sur le projet de Minou Surf School, Cédric a décidé de me laisser le projet entier. Ocean Ride est donc mon premier projet complet en semiautonomie dans l’agence.

Dans un premier temps, je devais installer WordPress sur le nouveau site dans le serveur interne de l’agence. Cependant, un conflit avec un autre fichier m’en a empêché et c’est Cédric qui a fini par s’en occuper. Il a donc installé le thème, Foundry pour sa grande flexibilité et personnalisation, et les plugins nécessaires comme WPML pour la gestion bilingue (français – anglais) ou encore Revolution Slider pour créer des sliders entièrement personnalisables. Le brief des gérants de Ocean Ride étant bien détaillé, cela m’a permis de me lancer rapidement dans la réalisation du site. Je savais où mettre des sliders, avec quelles images, quels titres utiliser… Même si on peut se dire qu’un brief précis peut brider la création, c’est surtout un soulagement et une aide précieuse : pas besoin de créer du contenu et on est sûrs qu’il n’y aura pas (trop) de correction de leur part au niveau du contenu ou des photos.

L’école de surf visant à la fois les locaux, les touristes français et les touristes anglophones, j’ai pu me plonger dans la gestion des pages en anglais. La tâche à été facilitée par la traduction déjà réalisée mais j’ai tout de même rencontré quelques problèmes dû au plugin et aux passages d’une langue à l’autre.

Parfois un texte qui ne se changeait pas, d’autres fois des traductions entières qui se perdaient. Au bout de plusieurs problèmes j’ai compris quelques principes de fonctionnement et j’ai pu établir une méthode qui permettait d’éviter au maximum les erreurs.

Après plusieurs aller-retours client, où ils ne trouvaient principalement que quelques détails à corriger, j’ai pu m’occuper de la mise en ligne du site sur le serveur du client. Ce projet m’a permis de développer mes compétences dans Visual Composer et j’ai ainsi pu fournir un site personnalisé sans y passer trop de temps. En revanche, j’ai passé plus de temps que j’avais prévu à la traduction des pages. N’ayant jamais réalisé cette tâche auparavant, j’avais sous-estimé la charge de travail qu’elle nécessitait. Cédric m’a aidé le long du projet sur quelques tâches afin de finir plus vite le site : mise en place dans le header de la gestion de langue via la modification d’un fichier php de WordPress, gestion des plugins, quelques modifications CSS… A terme, ce fu un bon projet pour moi, notamment avec le bon retour client que l’on a eu : toujours agréable les compliments !

Mon Tuteur

Mon Tuteur est le département formation en ligne du groupe Fitec, spécialisé dans la formation et la reconversion professionnelle. Fitec est un client régulier de l’agence Swell, ayant fait leurs différents sites par Cédric. Dans le cadre du développement d’un service de formation à distance, Fitec a lancé Mon Tuteur et a confié le développement du site à l’agence Swell. Ce projet avait une particularité par rapport aux autres : la conception a été faite par une agence de communication à Paris, nous avions donc des maquettes à suivre. Sur ce projet, Cédric m’a laissé en totale autonomie.

Dans un premier temps j’ai lancé l’installation de WordPress sur le serveur de l’agence. Dans un second temps, après que Cédric m’ait transmis les maquettes en PDF, j’ai cherché un thème qui permettait d’intégrer rapidement les éléments qui devaient être présent dans le site. Le thème Salient s’est avéré être le plus complet et le plus proche en termes de design et d’animations. J’ai ensuite pu installer le thème et les divers plugins récurrents à WordPress.

Lors du développement, j’ai pu aller encore plus loin dans l’utilisation de Visual Composer étant donné que les maquettes avaient différents éléments personnalisés par rapport à l’identité de l’entreprise. Les projets précédents m’ayant bien formés au plugin, je n’ai pas eu de soucis particuliers et cette étape s’est bien déroulée.

Si je n’ai pas eu de liberté créative, j’ai tout de même bien apprécié d’avoir pas mal de développement CSS à réaliser pour faire correspondre les éléments aux maquettes.

Le header comporte également une barre supérieure avec des informations. Le thème gère cette option mais j’ai dû entièrement personnaliser cette barre dans le fichier ‘header.php’ du thème afin d’arriver à ce qui était demandé. Le site comporte aussi des sliders avec des bulles contenant du texte et des boutons. J’ai dû batailler un petit moment avec le plugin Revolution Slider pour arriver à ce que qu’il fallait, notamment en responsive.

Je n’ai pas eu à réaliser toutes les pages du site, mais seulement les pages types, servant de modèle. Afin de rendre l’utilisation du site et l’intégration des pages plus facile par l’équipe de Fitec, j’ai sauvegardé dans Visual Composer des templates d’éléments individuels et de pages. Ainsi ils n’ont plus qu’à sélectionner un élément et intégrer le contenu au besoin.

A la fin du projet, j’ai réussi à rendre un site correspondant aux maquettes et Cédric s’est chargé de transmettre au client. Cependant, et malgré mon travail respectant les maquettes, le client à fait plusieurs retours et modifications qui n’étaient pas prévues. C’est Cédric qui s’est occupé de cette partie et qui a répondu aux demandes. Pour moi ce fu un bon projet puisque j’ai eu une grande autonomie dans la réalisation et malgré Visual Composer, j’ai pu développer un peu plus que dans les autres projets, ce qui m’avais manqué.

Urban Side

Urban Side est un skateshop situé à Lamballe dans les Côtes d’Armor. Ils vendent vêtements et chaussures de marques de surf et de skateboard et du matériel de skateboard. La propriétaire à fait appel à l’agence Swell pour la refonte de leur site et la mise en place d’un e-shop.

Pour ce projet, Cédric m’a laissé en autonomie après avoir installé WooCommerce et le thème qu’il avait choisi. Pour ce premier e-commerce, j’ai effectué dans un premier une veille sur les skateshops et surfshops en ligne. Déjà habitué à cet univers, je n’ai pas mis longtemps à savoir ce que je voulais. Cependant, j’ai vite été bloqué par le thème installé et le temps qui m’était laissé et j’ai dû revoir mon idée plus simplement, en utilisant au mieux le thème. En effet, a moins de casser entièrement le code existant, un thème WooCommerce est plus complexe et à moins de marge de manœuvre en matière de personnalisation des éléments. Après avoir dépassé ces soucis, j’ai pu mettre en place la page d’accueil, la page de présentation du magasin et enfin la boutique avec la création de trois templates pour les produits.

Dernier projet de ce stage, j’ai dû assimiler WooCommerce rapidement et ce ne fu pas si difficile. J’aurai aimé avoir plus de temps dessus pour comprendre plus en profondeur les détails du thème et de WooCommerce mais je suis satisfait, surtout que le retour de la cliente a été très bon. Un bon projet pour finir ce stage.

Principale mission de l’agence Swell, la réalisation de sites internet WordPress pour des clients directs sont, en comparaison avec les petits sites en templates HTML / CSS, bien plus intéressants pour moi, aussi bien en termes de technique, de créativité et de diversité. Ils permettent d’utiliser des outils plus puissants, avec un résultat plus convaincant. J’aurai aimé avoir des plus gros projets en matière de développement web, comme des thèmes entièrement personnalisés. Cependant, l’utilisation de thèmes et plugins WordPress permet d’avoir une méthode de travail plus rapide et qui coûte moins cher au client tout en ayant de grandes possibilités de personnalisation. Ce mode de fonctionnement étant très répandu au sein des agences de communication, ces projets m’ont été formateurs et qui plus est, appréciables.

SurfingWays Le pitch Le développement des sports de glisse sur l’eau, notamment du surf, à travers le monde depuis plusieurs décennies a fait des pratiquants de ce sport des grands ou petits voyageurs. Souvent en déplacement, dans sa région ou à travers le globe, le surfeur ou bodyboarder ne cesse de chercher la meilleure vague. Sur le chemin de cette quête partagée par des millions de personnes se trouvent de nombreux acteurs professionnels : shapers (fabricants de planches), magasins, écoles, associations, photographes, restaurants, hôtels… Loin d’être dans les sports les plus pratiqués, ce sont tout de même vingt-deux milliards de dollars de revenus uniquement matériels (planches, combinaisons…) qui sont générés par an. De plus, avec l’arrivée du surf aux Jeux Olympiques d’Eté de Tokyo en 2020, c’est un boom dans le nombre des pratiquants qui est attendu.

Ces dernières années, de nombreux guides papiers ou numériques ont été publiés afin d’aider les surfeurs dans leurs voyages ou dans leur pratique. SurfingWays est le fruit d’une longue réflexion de la part de Cédric, à la fois en tant que pratiquant du surf et chef d’entreprise. Sous la forme d’une application mobile et web, Cédric propose une boussole numérique, un surf guide pour tous les amateurs et amatrices de glisse, en surf, bodyboard ou stand up paddle. Y sont répertoriés les meilleurs établissements professionnels « surf » de la planète mais également les spots de surf les plus connus à proximité ou encore les surfcamps organisés. L’application propose aussi un service de météo surf afin que les pratiquants sachent quand et où aller surfer.

SurfingWays se veut être l’outil indispensable pour organiser son prochain surf trip que vous soyez seul, entre amis ou en famille et cela même sans connexion internet grâce à un système de cartes et de favoris « hors ligne ».

La concurrence / le positionnement Avec l’expansion d’internet dans le monde, le développement des réseaux sociaux et des supports mobiles, de nombreux guides numériques sont arrivés sur le marché. Ils offrent aux utilisateurs un pléthore de solutions : forums, blogs, applications, réseaux sociaux, répertoires… Afin de se démarquer de la concurrence, SurfingWays veut proposer une solution à la fois complète et de qualité. En effet, l’application propose la plupart des offres disponibles sur les autres plateformes mais en plus, garantie la qualité des établissements référencés et des articles publiés grâce à une vérification humaine et un travail d’échanges avec les acteurs locaux.

Mapping concurrentiel de SurfingWays.

Business plan SurfingWays est une application qui veut permettre à ses utilisateurs de profiter gratuitement des services proposés. Ainsi, pour la pérennité du projet, ce sont les professionnels qui paieront un abonnement annuel pour être référencés. Trois solutions s’offrent à eux : un abonnement gratuit, une offre « starter » et une offre « premium ».

1 La solution gratuite permet

d’être référencé mais les renseignements seront sommaires et le professionnel doit mettre en avant SurfingWays via une bannière sur son site.

3 La solution « premium » à 220 €

par an permet en plus de la fiche complète et du support dédié, d’être mis en avant sur le site, l’application et les réseaux sociaux.

2 La solution « starter » à 110 €

par an permet d’éviter la contrepartie et de profiter d’une fiche professionnelle complète et d’un support dédié.

Une refonte ?

S’intégrer au projet

J’ai pu intervenir dans ce grand projet avec le développement de la deuxième version de l’application. En effet, la première version déployée en 2017 consistait plus en une bêta et ne contenait qu’une petite partie des fonctionnalités : référencement de spots, d’établissements et de surfcamps. La deuxième version en développement pendant mon stage apporte de nombreuses fonctionnalités en plus des basiques : référencement de points d’intérêts (points de vue, restaurants…), articles sur les destinations, forum et mise en place d’un réseau social avec profils d’utilisateurs, photographies, covoiturages, compagnons de voyage, carnets de voyage, et une gestion back-office pour les professionnels. Ainsi, c’est une énorme partie de l’application qui restait à concevoir en matière d’interface utilisateur et cela a été mon rôle durant presque trois mois.

Dès le début du projet, j’ai dû me confronter à une des grandes difficultés de ce stage : s’intégrer au projet. Etant surfeur et étudiant en webdesign, j’étais évidemment à l’aise avec les termes techniques et l’esprit général du projet. J’avais même consacré mon projet de fin de BTS à la conception d’une application au même but. Cependant, SurfingWays est un projet très personnel et qui tient à cœur à Cédric. Arriver dans ce projet en plein rush final nécessite beaucoup de concentration et d’implication. Il faut plonger dedans !

L’application mobile avait déjà une partie conçue et développée, et le manque de temps et de moyens ne permettait pas une refonte totale. J’ai donc dû proposer des solutions permettant d’intégrer à la refonte les différents éléments déjà développés.

Un avant / après de deux pages de l’application mobile.

En effet, l’ajout de nouvelles fonctionnalités rend l’application très complète et il a été difficile au début de comprendre tous ses détails. Durant les premières semaines j’ai du tout assimiler, et au fur et à mesure du stage l’ensemble devenait de plus en plus clair. Cédric n’avait pas tout couché sur papier et n’ayant pas (encore) de tableaux dans les locaux, on s’est répétés et posé les mêmes questions de nombreuses fois. Pour pallier au tableau, évidemment nos carnets de notes se sont bien remplis !

Fonctionnement Cédric et moi-même ne nous occupions uniquement de l’interface et de l’expérience utilisateur, déléguant la partie développement mobile et web à des développeurs back-end. Le choix d’avoir des développeurs externes était simple pour Cédric : la taille du projet et sa complexité technique était bien au-delà de nos compétences.

majeures, on pense à tout en même temps ! Ce n’est peut-être pas la meilleure des façons à terme, mais avec ce projet où des petites modifications arrivaient au fur et à mesure, il était moins important de fonctionner par étapes types (comme par exemple : architecture, parcours utilisateur, wireframes puis maquettes).

Conception Avec le développement d’une application mobile et web, ce sont deux supports qu’il faut appréhender et auxquels il faut penser en même temps. En effet, une harmonie et une cohérence sont obligatoires entre les différents supports qu’un utilisateur peut utiliser pour consulter SurfingWays. Entre son ordinateur et son smartphone, il doit pouvoir s’y retrouver et ne pas s’y perdre. Cette cohérence se retrouve dans les parcours utilisateur – par l’architecture de SurfingWays qui doit être identique sur ordinateur et mobile – et dans le design graphique : un élément ne doit pas trop différer selon les supports.

Cédric travaillant sous Adobe Photoshop pour la réalisation de maquettes, je devais l’utiliser également dans un premier temps. Cependant, n’étant pas très à l’aise avec Photoshop et étant habitué à Adobe XD, Cédric m’a laissé la liberté d’utiliser l’outil de travail que je préférais. Ce fu pour moi un soulagement, notamment d’un point de vue pratique : avec le gros projet qu’est SurfingWays, Photoshop aurait vite été ralenti par la taille des fichiers. Adobe XD est lui plus adapté à la conception de maquettes et propose des fichiers légers, une réactivité accrue et une utilisation simplifiée. De plus, on peut avoir l’ensemble du projet dans un seul fichier, ce qui aide beaucoup en matière de manipulations.

Cédric ayant muri son projet depuis plusieurs années, il avait déjà en tête l’expérience utilisateur et les différentes actions possibles pour l’utilisateur. Tout n’étant pas gravé dans le marbre, et Cédric étant très à l’écoute de mes avis, j’ai pu l’aider tout au long du projet à ajuster ou renforcer certains aspects de l’application, aussi bien en termes de graphisme que de fonctionnalités. La majeure partie de mon travail fu la conception des maquettes de l’application et du site internet SurfingWays. N’étant pas seulement exécutant, j’avais également à penser à différents aspects à la fois : fonctionnalités, parcours utilisateur, graphisme et interactions. Ici, pas d’étapes

Cédric voulait apporter une peau neuve à l’ensemble du projet dans le but d’offrir une expérience utilisateur agréable tout en ayant une communication dans l’ère du temps.

Page d’un établissement Mise en place des codes graphiques et du design général. Ici une sidebar fixée au défilement réduis la taille du contenu principal.

Après cette première maquette, un style était défini et tout est allé plus vite par la suite. J’ai pu continuer sur les autres pages et fonctionnalités, en alternant site web et application mobile. Tout au long de la conception, nous avons échangé nos avis et développé nos diverses idées en les intégrant au projet. L’application regroupant beaucoup de fonctionnalités, c’est une veille journalière et constante qui s’est installée afin de garder une créativité et une efficacité. Nombreuses applications et sites web ayant certains de nos services, il était intéressant d’étudier comment ils répondaient à certaines problématiques techniques, usuelles et graphiques : comment gérer la vue d’une carte et des filtres ? Est-ce que tous les boutons sont nécessaires ? ...

Dans un premier temps, j’ai eu trois jours en autonomie afin de réaliser une première maquette pour le site – celle de la page d’un établissement professionnel – et de définir un style graphique. Cédric m’avait briefé sur le contenu à intégrer dans la page ainsi que quelques références pour l’inspiration. Après une veille graphique d’une demi-journée, à naviguer entre les réseaux sociaux Behance, Dribble et Pinterest, j’ai pu commencer le travail de conception et, à la fin des trois jours, aboutir à une maquette presque complète avec un style graphique défini. Après débriefing avec Cédric, et quelques ajustements, nous nous sommes accordés sur la version finale.

Comment ils font Airbnb ?

Adobe XD permet d’exporter les maquettes et les différents assets de façon optimisée pour les différents supports, ce qui offre un gain de temps considérable comparé à l’utilisation de Photoshop par exemple. Cependant, cette étape est fastidieuse et lente : isoler les différents éléments, les exporter… Enfin, il est impératif de classer correctement, et de la façon la plus logique possible, l’ensemble des éléments afin que les développeurs ne passent pas trop de temps à déchiffrer notre travail.

Exports Après chaque étape de finalisée, nous envoyons les maquettes et assets (éléments tels que les icones) aux développeurs. Avec un développeur web et deux développeurs mobile, ce sont deux méthodes de travail différentes. Le développeur web travaillait à partir de fichiers Adobe PDF pour les maquettes et de fichiers vectoriels SVG pour les icones et divers éléments tandis que les développeurs mobile travaillaient uniquement à partir de fichiers image PNG.

Accueil Avant : mise en avant de l’application. Après : mise en avant de l’univers.

SurfingWays, c’est 260 maquettes, déclinaisons comprises, versions mobile et site internet confondus, et 25 pages A4 de réflexions et notes.

Ce grand projet que j’ai pu effectuer durant la majeure partie de mon stage fu énormément bénéfique pour moi. Dans un premier temps, l’application m’a passionné et j’ai beaucoup aimé y consacrer mon stage. C’est de plus un aboutissement personnel, une touche finale concrète, à l’application que j’avais imaginé lors de mon BTS. Dans un second temps, le travail avec Cédric était agréable, passionnant et motivant. En effet, nous avons beaucoup échangé et nous partageons souvent les mêmes avis. Le travail que j’ai effectué durant ce projet plaisait à Cédric, et c’est toujours gratifiant et motivant d’avoir de bons retours. Et enfin, participer à un projet de cette envergure m’a permis de développer mon utilisation des logiciels et d’encore mieux appréhender l’étape de conception dans un projet.

Bilans

Une expérience enrichissante Durant ce stage, j’ai pu vivre différentes expériences qui m’ont été fortes en apprentissage. J’aurai cependant aimé avoir plus eu le temps d’approfondir certains points, notamment côté clients avec lesquels je n’ai pas eu de contacts. Cependant, l’agence Swell et SurfingWays avec Cédric, c’est avant tout une expérience humaine forte et passionnante. Tout le long du stage, nous avons entretenu une bonne relation et cela à toujours été agréable de travailler avec lui. Et de surfer aussi ! Avec cette facilité de communication et la bonne ambiance qu’il y a dans les locaux, on est forcément content de venir travailler !

techniques essentielles au travail dans une agence de communication. Avoir travaillé sur SurfingWays, c’est aussi une meilleure perception de la gestion d’un projet et une expérience en conception très enrichissante. J’aurai aimé pouvoir intervenir et discuter avec les développeurs de SurfingWays, notamment pour mieux appréhender leur fonctionnement, mais la grande liberté que j’ai eu sur la conception graphique de l’application compense énormément cet aspect !

Une formation de qualité

De nouvelles compétences Je ressors de cette expérience professionnelle avec des compétences affinées et mieux définies. Si j’ai pu ressentir un manque de projets plus poussés en matière de développement web ou de graphisme, notamment dû aux projets à petits budgets, je reviens avec de nouvelles compétences

La licence professionnelle webdesign m’a apporté de nombreuses bases nécessaires à ma professionnalisation. J’y ai pu confirmer des acquis et développer de nouvelles compétences. La pluralité des parcours des étudiants au sein de la formation entraîne une différence de niveaux durant l’année, mais apporte surtout une grande diversité de compétences, de pratiques et de personnalités favorables à la créativité !

Ces seize semaines de stage sont passées très vite et il me tarde de continuer dans cette voie. J’ai pu découvrir les différentes facettes du métier de webdesigner à travers à la fois une agence de communication et une startup. Si j’ai pu déceler des inconvénients et difficultés dans le métier, j’en retiens surtout une passion qui ne cesse d’être renouvelée. C’est confiant que je m’avance vers le monde professionnel avec la même intention qu’au départ : allier mes différents centres d’intérêts et en faire mon métier.

Crédits photo

Projets déjà en ligne

Nikola Bikar Jeremy Bishop Mathyas Kurmann Nattu Adnan

Rincon rincon-eurl.fr

Ocean Ride ocean-ride.com

Minou Surf School minousurfschool.com

Mon Tuteur montuteur.fr

Urban Side urban-side.fr

Swell est une agence de communication | SurfingWays est une application pour les surfeurs | Cédric c’est mon maître de stage | Dans ce rapport, c’est seize semaines de conception UI/UX, de développement web, de café et de surf avec Cédric et moi-même.