Présentation jordan-perrigaud.fr

E-boutique : Jordan Perrigaud

Mise en place d’une e-boutique sous WordPress dédiée à la location de vidéos en avant-première. Elle permet au gérant de publier simplement et rapidement ses vidéos, celles-ci ne devant être consultables uniquement après un don minimum.


Photographie du commanditaire, Jordan Perrigaud

Les retours sur le projet :

"Le site qu'Arthur a mis en œuvre répond exactement à mes attentes ! Sa réalisation a été rapide et Arthur a pris le temps de tout m'expliquer et de m'accompagner lors de la mise en place du site en me montrant toutes les fonctionnalités du site. Toutes mes demandes ont été suivies à la lettre et Arthur prenait soin de me tenir informé de chaque avancée ou contre temps qu'il rencontrait. Je recommande Arthur pour la création de site internet, il saura sans aucun doute être à votre écoute."

Jordan Perrigaud , Créateur de contenu sur YouTube

Le projet en détail :

Le projet commandé par Jordan à été développé sous WordPress. En passant par une importante customisation du thème Storefront de Woocommerce, le site remplit ses objectifs. Il est effectivement à même de permettre aux membres de la communauté de Jordan d’accéder à du contenu en avant-première. Cet accès se fait après avoir versé un don minimum fixé par Jordan, lui permettant ainsi de financer son activité.

La sécurité des paiements est assurée par l’utilisation de services fiables, tels que Stripe et PayPal. Suite à leurs dons, les utilisateurs sont redirigés vers leur compte où se trouve la vidéo qu’ils viennent de louer, prête à être visionnée.

Jordan Perrigaud, mon commanditaire

Jordan est créateur de contenu sur YouTube. Sur sa chaîne il relate ses expériences paranormales au travers de ses enquêtes. Sans cesse en recherche de lieux abandonnés et/ou hantés, Jordan part souvent en expédition, caméra au poing afin de nous faire partager les mystères de ces endroits, souvent au lourd passé.

Dans le but de financer son activité, particulièrement couteuse en déplacements et matériel, Jordan avait déjà mis en place une solution via tipeee, lui permettant de récolter des dons. Ces derniers étaient principalement motivés par l’envie d’aider Jordan à produire son contenu, mais également dans le but d’obtenir ses dernières enquêtes en avant-première, une semaine avant leur sortie. Pour ce faire, Jordan prenait auparavant le temps d’envoyer manuellement les liens de ses vidéos, alors publiées en « non répertoriées » sur YouTube, à chacun de ses tipeurs.

C’est dans ce contexte que je suis intervenu. Jordan avait effectivement envie d’acquérir une solution lui permettant de tout automatiser, mais surtout d’avoir un site internet, important vecteur d’identité numérique.

L’ergonomie et le design de jordan-perrigaud.fr

Peut-être l’aurez vous remarqué : l’aspect du site de Jordan n’a pas pour objectif premier de plaire sur le plan esthétique. Sa vocation est ailleurs : permettre un chargement rapide et offrir la meilleure expérience ergonomique possible. Les indications avaient pour mérite d’être claires :

Un design sobre, élégant, mais surtout épuré.

Un design fait pour être lisible et convenir à tous

L'Interface d'inscription jordan-perrigaud.fr

Des utilisateurs guidés dès l’inscription

Afin de répondre aux exigences de Jordan, le design devait promouvoir les informations pertinentes, le tout devant être lisible facilement. Cette attention particulière portée envers l’ergonomie tient du fait que Jordan s’adresse à une large communauté. Celle-ci est donc largement susceptible de compter parmi elle des membres qui ne seraient pas à l’aise avec certaines interfaces.

Afin de rendre agréable et facile la navigation de ces utilisateurs, jordan-perrigaud.fr a été pensé en premier lieu pour être lisible. Un objectif atteint par une disposition logique et guidée. Elle est renforcée d’éléments d’interface clairement définis (tels que les boutons), qui disposent également d’une largeur idéale pour la navigation mobile, en faisant ainsi de parfaites cibles tactiles.

Un autre point essentiel concourant également à l’ergonomie du site, est sans aucun doute son design épuré. Celui-ci permet aux utilisateurs de « respirer » et d’effacer l’éventuelle impression de claustrophobie que peuvent provoquer certains types de dispositions.

Dès l’inscription, les utilisateurs sont guidés le plus possible dans leurs démarches. L’interface d’inscription constitue un parfait exemple de la politique ergonomique que je me suis efforcé d’appliquer. Des indications textuelles sur les champs (via l’utilisation de placeholers) permettent aisément de savoir ce à quoi correspond chaque champ. Des retours visuels tels que la validation de l’e-mail ou celle du mot de passe ont également été ajoutés. Ils permettent à l’utilisateur de ne pas se perdre et d’inscrire un compte valide et sécurisé.


Un design pensé principalement pour appareils mobiles

Le site de Jordan possède la particularité première d’être tourné vers la diffusion de contenu audiovisuel. Ainsi, en se basant sur le fait que la grande majorité des utilisateurs consultent aujourd’hui ce type de contenu sur appareil mobile, le site a été conçu principalement pour ces derniers.

Des éléments d’interface lisibles et faciles d’accès sur mobile

Les cibles tactiles que constituent principalement les boutons et autres interactions principales voient leur taille augmentée sur mobile et leur placement redéfini, afin d’être le plus optimal possible. Ainsi, tous les types de doigts sont aptes à toucher ces éléments sans manquer leurs cibles.

Un agencement optimisé pour jordan-perrigaud.fr

En replaçant de manière optimale certains éléments du site, il a été possible d’économiser de l’espace. Certains blocs sont effectivement cachés ou replacés de manière à gagner de l’espace, ou à faciliter la lecture. Les deux exemples les plus flagrants se trouvent être, selon moi, les liens vers les différents comptes de Jordan sur les réseaux sociaux et la barre de recherche.

En effet, les réseaux sociaux disparaissent de la vue principale sur mobile au profit d’une apparition conditionnée par l’ouverture du menu hamburger. Lorsque le menu est fermé, c’est le titre du site qui est visible et lorsqu’on l’ouvre, les icônes apparaissent. L’ajout du mouvement possède également l’avantage de capter l’attention visuelle du mobinaute, qui prendra plus facilement conscience de l’existence de ces liens.

La logique reste la même pour la barre de recherche. Celle-ci est également présente dans le menu hamburger afin de laisser la fonctionnalité de tri du catalogue prendre une place prépondérante sur mobile.

Le menu principal scindé pour une ergonomie améliorée

L'érgonomie de jordan-perrigaud.fr

Des menus scindés pour un espace optimisé

L’ajout d’un menu situé en bas de page vise à permettre un accès rapide et ergonomique aux fonctionnalités principales. Il constitue un moyen de rendre la navigation plus efficace la facilitant pour se rendre sur les pages principales. Ce menu permet ainsi l’accès aux fonctionnalités principales du site :

  • catalogue de vidéos
  • flux de nouvelles Facebook
  • page de contact
  • panier/passer une commande
  • mon compte/se connecter et se déconnecter.

Toutes ses fonctionnalités, ont ainsi été condensées dans le menu de bas de page sous forme de simples icônes. Pour assurer une meilleure compréhension, elles sont détaillées par le biais d’info-bulles (apparaissant au touché maintenu sur l’icône). Elles sont également disponibles dans le menu hamburger (situé en haut de page) sous forme textuelle.


Le développement

Pour ce qui est du développement de jordan-perrigaud.fr, j’ai choisi de m’orienter vers le plugin WordPress Woocommerce. Ce dernier a été associé à une customisation avancée du thème par défaut Storefront. Cette association permet au site de conserver une large polyvalence, tout en étant adapté à l’utilisation qu’en fait Jordan.

Des paiements sécurisés par Stripe et PayPal, sur jordan-perrigaud.fr

N’ayant que des notions basiques en termes de sécurité, j’ai préféré m’orienter vers des solutions de paiement fiables et sécurisées, et ce dès le début du projet. Ainsi, l’utilisation de Stripe et Paypal permet aux utilisateurs d’effectuer leurs dons l’esprit tranquille. Même si les deux services prennent une commission, Jordan et moi étions d’accord pour statuer sur le fait que nous devions sécuriser le plus possible les paiements, cela afin de convaincre le plus aisément possible les utilisateurs d’effectuer des dons.

Leur intégration étant grandement facilité, il a été relativement simple des les déployer en suivant les instructions de Woocommerce. J’ai personnellement choisi d’offrir la possibilité aux utilisateurs de régler soit par PayPal, soit par Stripe. Ce dernier allant constituer la plus que probable source de replis des utilisateurs, certains étant convaincus de la nécessité d’un compte PayPal pour réglé via ce service. Stripe allait donc offrir à ces utilisateurs précis le moyen de régler par Carte Bancaire de manière sécurisée, et ce sans avoir à créer de compte, ce qui peut rebuter certains usagers.

Une interface de publication simplifiée, taillée sur-mesure pour jordan-perrigaud.fr

Jordan m’a confié dès le début du projet qu’il appréhendait le fait de gérer son site. Il cherchait avant tout la simplicité et la rapidité, dans le but premier de fournir la meilleure expérience possible à sa communauté. Pour répondre à ce besoin, j’ai très rapidement pris la liberté de concevoir une interface de publication simplifiée et plus guidée, afin que Jordan ne rencontre aucune difficulté.

La publication d’une vidéo se fait très simplement à partir du lien YouTube redirigeant vers celle-ci. Jordan doit simplement remplir une série de champs, tous associés à des indications visant à éliminer tout doute sur ce à quoi correspondent les champs. Les champs sont également découpés en trois séries, afin d’en alléger visuellement la saisie. Les URLs saisies sont vérifiées en JavaScript dans le but de déterminer si celles-ci sont correctes ou non. En cas de problème, une correction automatique est proposée, et détaillée par des explications textuelles.

Enfin, pour assurer un meilleur référencement, j’ai pris le parti d’installer le plugin Yoast SEO. Les champs étant parfois compliqués à remplir pour les non-initiés, leur implémentation se fait automatiquement lors de la publication des vidéos, lorsque cette dernière passe

par l’interface simplifiée.

Des urls vérifiées et corrigées automatiquement

Les URLs sont vérifiées et peuvent être corrigées en cas d’erreur

Représentation de l'interface de publication simplifiée (1/3)

Première partie de l’interface de publication simplifiée


 

Une documentation visant à résoudre les derniers problèmes

Si certains problèmes subsistent, une page d’aide est également présente dans l’administration. Celle-ci se charge de détailler de manière simple et précise les réponses aux questions que Jordan pourrait se poser. Des liens sont également présents afin d’assurer une redirection facilitée vers les options de configuration WordPress ou Woocommerce, afin de modifier certains réglages.

 

Arthur EUDELINE 2017

Designed by Arthur EUDELINE with and lot of coffee

lectus amet, ultricies mi, accumsan quis ipsum