Jeanna Dufraisse

Coaching sportif personnalisé à distance

jeannadufraisse.com ludovic bourgoin

Vue d'ensemble

Jeanna est une coach sportive parisienne. Elle aide les femmes à se sentir bien dans leur peau et à avoir confiance en elles grâce au sport et au fitness.

En plus de son activité de personal training, elle souhaitait lancer un service de coaching à distance. Ce programme viserait les femmes actives qui n’ont pas la possibilité d’être accompagnées physiquement par un entraîneur personnel, mais qui ont malgré tout besoin de rester motivées pour atteindre leurs objectifs. Jeanna souhaitait donc fournir des programmes d'entraînement personnalisés, ainsi qu’un suivi de ses clientes au quotidien via Messenger.

Mon rôle a été de créer l’identité de marque de ce nouveau service, de concevoir et de développer un site internet performant, moderne et ergonomique . Un des challenges était de permettre à ses clientes potentielles de comprendre rapidement et facilement le fonctionnement du programme, de l’inscription au suivi personnalisé, afin de le rendre aussi clair que possible 🤓.

Role

Branding, UI design, Dévelopment responsive

Timeframe

Novembre - Décembre 2019

Définition des attributs de marque

Il peut être difficile de définir la marque d’un service ou d’une entreprise, et parfois plus difficile encore d’être en adéquation avec le client sur le sujet. Celui-ci peut ne pas savoir ce que la marque représente ou doit représenter. Qu'est-ce qui est important ? Par où commencer ? C'est là que les attributs de la marque entrent en jeu. Les attributs sont là pour nous aider à définir la marque. Dans cet exercice, j'ai aidé Jeanna à simplifier le processus en le divisant en 6 catégories : Culture, Clients, Voix, Sentiment et Impact. La sixième catégorie étant ’facteur X’ : qu'est-ce qui la rend différente ? En lui fournissant ce modèle, j'ai été en mesure de comprendre ce qui était important pour Jeanna, et ce qu’elle voulait faire passer comme message et comme émotions au travers de sa nouvelle activité.

ludovic bourgoin

Inspiration

Une des exigences pour ce projet était d'utiliser la couleur rose. Après avoir trouvé plusieurs styles de design à base de rose sur Dribbble et Lapa, je les ai soumis à ma cliente. Nous avons discuté ensemble pour définir ce qui lui plaisait le plus. Nous avons aussi discuté des différents styles de design web: artistique, graphique, minimaliste, basé sur l’illustration ou la photographie. Cela m'a aidé à comprendre la direction visuelle qu'elle voulait atteindre. Nous avons finalement opté pour un design minimaliste, des illustrations choisies et des photographies.

ludovic bourgoin

Création de l'identité de marque

J'ai ensuite travaillé sur le développement de l'identité de marque qui communiquerait ses valeurs de la meilleure manière. Comme elle souhaitait travailler avec des jeunes femmes ayant besoin d’accompagnement et de douceur, il était important qu'elle soit perçue comme étant bienveillante et attentive aux autres. En tant que coach sportive, il était aussi important pour elle d’être vue comme quelqu’un de fiable, sur qui on peut compter. J'ai donc défini les éléments visuels (les typographies, couleurs et iconographies) en adéquation avec ces valeurs.

ludovic bourgoin

Sketching

Première étape de la conception concrète du site, le sketching (‘croquis’ en bon Français) m’a permis de définir l’architecture global du contenu. J’en ai profité pour rédiger les titres principaux. Travailler en premier lieu sur du papier invite à la critique et permet d’explorer, de tester et d’évaluer plusieurs idées de mises en page. Cela permet finalement de s’assurer que l’on est sur la même longueur avec son client. Plus d'informations à ce sujet dans the 4 steps sketch (vidéo).

Wireframing

Le wireframing (‘maquettage’ en français) est une étape essentielle, car elle me permet de déterminer la disposition et les interactions de l'utilisateur sans la distraction des couleurs, des visuels et même de ce que la plupart des gens considèrent comme du « design ». Pendant la construction des maquettes, j'ai rédigé une ébauche de tous les textes que j'ai soumis à Jeanna pour révision. Nous avons ensuite travaillé ensemble à rédiger les textes complets. Textes qui doivent répondre à trois critères fondamentaux: ils doivent être (1) faciles à comprendre, (2) évidents et (3) sans ambiguïté pour l’utilisateur final.

ludovic bourgoin

Prototyping

Une fois que les wireframes et l’intégralité des textes ont été validés par ma cliente, j’y ai ajouté les éléments d'identité de marque déjà conçus (typographies, couleurs et iconographies) pour créer un prototype de ce à quoi le site ressemblerait.

ludovic bourgoin

Créer une mise en page responsive avec CSS Grid

Une grille apporte de la cohésion à une mise en page. Elle informe les utilisateurs sur ce qu'ils doivent lire en premier, puis sur ce qu'ils doivent lire ensuite, et sur l'attention qu'ils doivent y accorder.

Vous trouverez ci-dessous une présentation de la façon dont j'ai utilisé les propriétés CSS Grid dans la section bénéfices du site.

Sur la vue mobile, les blocs seraient affichés les uns au-dessus des autres. Sur les tablettes et écrans de taille moyenne en revanche, je voulais que l'affichage de l'image soit centré en haut, puis que les 4 bénéfices soient affichés sur 2 colonnes. Sur les écrans d’ordinateurs plus larges, je souhaitais que les 4 éléments gravitent autour de l'image. Cette mise en page ne peut pas être réalisée en utilisant uniquement Flexbox. J'ai donc créé une grille différente pour chacun des 3 types d’écrans en utilisant les propriétés CSS Grid suivantes :

responsive grid layouts

Voici le style pour l'affichage sur écran large :

atom css grid screenshot

Chaque media query crée une grille différente. Ainsi, je peux être libre d'afficher mes blocs html où je le souhaite en fonction de la taille de l’écran du visiteur. J'ai créé un CodePen sur lequel j'ai reproduit le composant complet.

ludovic bourgoin profile picture

Ludovic Bourgoin

Web Designer

Dévelopé avec Tachyons, Middleman et Netlify. Code source sur Github.