Scrim Tracker : Moteur de recherche de l'e-Sport 🎮

Scrim Tracker est un site web réalisé en 2014 par mon ami Jordan D. et moi-même qui répond à la problématique :  

Comment mettre en contact les équipes de sport électronique et faciliter leurs échanges ?

  Nous allons voir dans ce dossier comment nous avons répondu à cette problématique avec notre projet Scrim Tracker. Je vais détailler les fonctionnalités et le développement graphique/technique du site. Je vous invite à visiter le site en parallèle afin de mieux comprendre ce projet. Il est accessible en ligne : Accéder à Scrim Tracker

Le contexte

L'e-Sport, scrim : kézako ?

Le sport électronique ( ou e-Sport ) c'est la pratique en réseau d'un jeu vidéo seul ou en équipe. Un scrim est le nom donné aux matchs compétitifs entre joueurs/équipes.

L'histoire

Quand nous jouions avec mon équipe d'e-Sport aux jeux-vidéo sur PC, nous avions l'habitude de faire des rencontre amicales ou en tournois contre des joueurs français. Vu que la majorité des jeux PC sont disponibles sur la plateforme de jeu Steam, c'est par cette plateforme nous passions pour discuter, se mettre en relation, demander des matchs amicaux aux autres joueurs/équipes.

Problématique

Oui mais voilà, Steam n'offre aux joueurs que la possibilité aux joueurs d'échanger par messages textes, vocaux ou au sein d'un groupe. Le problème, c'est qu'une équipe est composée le plus souvent d'au moins 4 joueurs et ceux-ci doivent tous être informés de la date, de l'heure, du jeu sur lequel ils vont jouer mais également connaitre les joueurs adverses. Steam ne parraît alors pas suffisant pour répondre à ces critères. Programmer et automatiser les processus d'invitation et d'échanges doit alors passer par une autre plateforme. Nous avons créé Scrim Tracker : un endroit où les joueurs se rencontrent.

Fonctionnalités du site

Le site web propose plusieurs services qui accompagnent les joueurs dans leurs rencontres. Voici une liste de ce qui actuellement disponible en ligne :

• Inscription et paramètres de compte (pseudo, équipe, e-mail...)
• Dépôt d'annonces de scrims/tournois
• Accepter une annonce de scrim
• Chat textuel
• Gérer ses requêtes de scrims

Fonctionnalités attendues :

• Statistiques des joueurs/équipes
• Profil de joueur/équipe
• Classements
• Gérer un tournoi et son bracket

Le but est de supporter toutes les plateformes de jeu ainsi que la majorité des jeux multijoueurs populaires.   Voici une arborescence du site qui permet de comprendre le chemin de l'utilisateur : Au vu de notre petite équipe de 2 personnes, la charge de travail était plutôt élevée pour des lycéens. Durant toute la durée du projet, Jordan à réalisé tout le développement web, tandis que j'ai réalisé la partie design graphique. Il y a bien-sûr plusieurs autres tâches comme le community management que nous avons géré ensemble.

Éléments graphiques

Par manque d’expérience et de formation, beaucoup de mes choix manquaient d’explications et de stratégie. Je vais essayer d'expliquer un maximum les choix graphiques.

Le nom

"Scrim Tracker" en français : "Traqueur de scrim" est le nom que j'ai choisi pour le service. La traduction en anglais en volontaire, d'une part car une partie de notre cible communique en anglais sur Internet, et d'autre part car cela renvoie une image corporate et internationale.

Typographie

J'ai sélectionné la typographie Bebas Neue pour tous les textes du projet, ce qui n'était pas un choix optimal. La typographie est en lettres capitales uniquement, ce qui ne rends pas très lisible les textes courant du site. Il aurait donc fallu sélectionné une autre typographie pour tous les textes qui ne sont pas des titres afin d'améliorer la lisibilité globale et la structuration du contenu.

Logo

Voici le logo original créé en Février 2014, il se compose d'une part des lettres "S" et "T" assemblées et d'autre part le nom du site écrit en toutes lettres. Il est nécessaire de rappeler le nom du service car nous n'étions pas encore connus. Je pense que ce logo est une réussite car il reste visuellement en mémoire et il est apprécié de la communauté. Néanmoins, il ne respecte pas certaines règles de design, par exemple, les proportions sont à revoir et le style à actualiser.   Voici la première maquette de la page d'accueil du site (à gauche) comparée à la page d'accueil actuelle (à droite) : Étant donné que la seconde version de Scrim Tracker est une version améliorée de la première, il n'y que très peu d'intérêts de détailler les éléments graphiques et fonctionnels du site en version 1. Nous allons donc se focaliser uniquement sur la version actuelle, qui propose une interface plus actuelle. Voici des aperçus des différentes pages du site reprenant les fonctionnalités clé :

Application mobile

Nous avons pensé à développer une application mobile afin de faciliter l'accès à notre service. Bien que des visuels ont été réalisés, le développement de l'application n'a pas abouti par faute de temps et de ressources.  

Technologie web

Suite aux maquettes HTML/CSS, le site dans sa première version a été intégré avec du PHP et du SQL avec un CMS personnalisé grâce à des templates Mustache. La seconde version du site est beaucoup mieux organisée et tout a été repris de zéro. Elle intègre en plus la technique AJAX pour une navigation asynchrone qui permet de construire des interfaces dynamiques directement sur le poste client, ce qui décharge le serveur et améliore les performances par exemple.

Mise en ligne et partenariats

Le site web a eu plusieurs adresses différentes, par manque de budget, nous avons commencé par utiliser des noms de domaines gratuits. Nous avons eu la chance de connaître quelqu'un qui a pu nous prêter un hébergement web rapide et sécurisé. Un nom de domaine avec l'extension ".com" a rapidement été mis en place, le site est encore disponible avec ce domaine. Nous avons tenté de rentrer en partenariat avec de plusieurs structures amateurs (ont peut appeler aussi cela des écuries de joueurs). Nous voulions proposer notre service et le faire adopter aux joueurs mais par faute de savoir-faire nous n'avons pas réussi. Aucun partenariat solide ne s'est dégagé des échanges avec les structures que nous avons contacté.

Scrim Tracker & Dexerto

Pendant l'été 2014, nous avons pris contact avec Dexerto France (Decerto à l'époque) : http://fr.dexerto.com/. Nous avons commencé à travailler sur un partenariat entre nos deux sites web. Nous avons développé un module iframe à intégrer sur leur site Internet. Il permet d'utiliser notre service de recherche et de dépot de scrims depuis un autre site. Cela permet aux visiteurs de leur site qui sont intéressés pour commencer la compétition de se lancer rapidement. Pour nous, c'est une occasion d'augmenter notre visibilité et notre sérieux. Malheureusement à la fin du développement du module, l'accord avec directeur du Dexerto n'était pas à la hauteur de nos attentes et nos avantages s'en trouvaient restreints. Après une tentative d'achat de notre service, je n'ai pas souhaité continuer le partenariat. Celui-ci aurait peu-être pu lancer plus efficacement notre site web mais nous ne pouvions pas accepter de travailler pour quelqu'un d'autre que nous même.

Communication

Dès que le site s'est trouvé opérationnel, il a fallu communiquer énormément pour atteindre notre cible (joueurs amateurs et semi-professionnels). Nous avions plusieurs canaux de communication à notre disposition, nous avons choisi de communiquer via Facebook : https://www.facebook.com/scrimtracker/, Twitter : https://twitter.com/ScrimTrackerFR et Steam : https://twitter.com/ScrimTrackerFR. C'est sur Twitter et Steam que nous étions le plus présent puisqu'ils permettent une transmission rapide et directe de l'information. De plus, publier souvent (parfois plusieurs fois par jour) n'est pas un problème sur ces réseaux sociaux. Nous postions des informations concernant le site (services, nouveautés, maintenance...) mais également la promotion de certains scrims ou tournois populaires. Les trois réseaux sociaux permettaient également de communiquer avec la communauté et - aux questions/problèmes des utilisateurs.

Refonte

Avec l’avènement du flat design, nous avons pris la décision de faire une refonte complète du site 1 an après son lancement, ce qui a donné énormément de travail à Jordan qui à complétement repris "from-scratch" le développement du site. Cette refonte n'est pas seulement graphique, elle apporte également plusieurs nouvelles fonctionnalités qui manquait à la première version. Une des nouveautés a été l'ajout d'une page dédiée pour chaque scrim. Vous pouvez constater les ajouts et modifications graphiques directement sur la version en ligne : http://scrimtracker.com/

Une pause s'impose

Le développement s'est prolongé jusqu’à l'été 2015 où Jordan et moi avons pris la décision de mettre le projet en pause par faute de temps. Nous ne pouvions pas poursuivre ce rythme soutenu de développement et continuer les études en même temps. Le projet est toujours en suspend et le site web encore disponible en ligne. Bien que j'ai envie de reprendre le développement du site, les mêmes raisons de cette pause s'appliquent encore aujourd'hui.  

Bilan

Ce projet m'a appris énormément de choses. Que ce soit en design, en communication ou en développement web, Scrim Tracker m'a permit d'évoluer professionnellement. Jordan a fait plus de travail que je n'aurais jamais pu imaginé lorsqu'on s'est rencontré et je le remercie pour son temps et ses efforts. Le projet sera peu-être repris par nos soins, un jour.