Création du site web de French Tech One LSE

Au service des start-up, scale-up et PME innovantes, l'association French Tech One Lyon Saint-Étienne accompagne ses membres dans leur croissance et leur internationalisation.

«
Comment refondre l'arborescence, le design, et le parcours utilisateurs d'un site Internet au rayonnement international » 
accueil-site-internet-french-tech-lyon
1.

Une multitude de contenus différents

La French Tech représente l’ensemble des acteurs de l’innovations numérique et tech en France. La fusion des deux associations de Lyon Saint-Étienne : ONE, a été créée par les acteurs de l’écosystème lyonnais et stéphanois. Au service de la croissance et de l’internalisation des entreprises du territoire, leur site Internet permet à tous acteurs du marché de s’y retrouver et d’être fédérés autour d’une seule et même vision.

 

Nous avons été sollicité pour effectuer une refonte de leur ancien site Internet, qui ne reflétait plus les ambitions de la French Tech ONE Lyon Saint Etienne. L’identité visuelle ne collait plus non plus à la charte graphique de la French Tech au niveau nationale, il fallait complètement revoir l’expérience utilisateur et le web design du site.

 

La mission est vaste : des infographies, un job board, trois annuaires différents, une partie actualités, … en passant par des documents pour aider ses membres, l’arborescence du site est chargée, et les contenus variés. La navigation n’ayant pas été revue depuis la première mise en ligne du site, il était facile de se perdre : l’expérience utilisateur n’était plus optimale.

 

Avant de démarrer les travaux, nous avons organisé un atelier collaboratif de conception avec les membres de l’équipe de la French Tech ainsi qu’un membre de l’association, pour apporter son regard extérieur au projet.

 

Durant cette atelier, nous avons décortiqués l’ensemble des contenus qui seraient présents sur le nouveau site, étudiés leurs types, leurs fonctions, et réfléchi à leur utilisation, en fardant toujours en tête que le parcours des utilisateurs devait être le plus simple possible pour retrouver les informations qu’ils étaient venus chercher.

site-internet-french-tech-lyon-1
2.

Comportement et design

Nous réfléchissons toujours à l’emplacement des éléments juste après notre atelier de définition des contenus du site et de son arborescence, à travers la création de maquettes fonctionnelles et schématiques (wireframes). C’est ce qui permet à nos clients de se projeter dans le parcours du site, de visualiser les différents CTA (boutons d’appel à l’action), définir les éléments récurrents ainsi que leur nombre comme par exemple le nombre de vignettes d’entreprises affichées sur les pages d’annuaires, ou le nombre de membres sur la partie « qui sommes nous ».

 

Chaque zone, ou bloc du nouveau site de la French tech est construite pour coller parfaitement au besoin et aux contenus qui s’y trouveront. En effet, une page « qui sommes nous » par exemple ne se façonne pas pas de la même meilleur en fonction de si l’équipe est composée de 5 membres ou des des dizaines comme c’est le cas ici, ou encore si vous avez 1 service à présenter contre 16 dans le cas présent.

 

Ici, les contenus ayant proprement été définis et bornés dans l’atelier de préparation, nous savions exactement comment construire le web design des pages autour des contenus de site. D’où l’importance de faire du « sur-mesure » et ne pas utiliser des modèles tout fait que l’on peut acquérir sur diverses bibliothèques.

 

La charte graphique du site est définie par la mission French Tech (niveau national)  pour toutes les French Tech locales : des formes vectorielles pour faire un petit clin d’oeil à la technique et l’innovation qui sont les domaines de prédilection de l’association, une palette de couleur bleu et rouge ainsi que l’utilisation du fameux coq qui nous ne permettent pas d’oublier que la French Tech, et bien c’est avant tout la France.

 

Notre périmètre d’intervention ici était, depuis cette charte graphique servant de base, de réaliser des maquettes graphique sur-mesure, d’y apposer des animations discrètes afin de ne pas alourdir le poids du site et sa complexité à développer, mais assez efficaces pour attirer l’oeil et rendre la navigation plus fluide et agréable.

site-internet-french-tech-lyon-2
3.

Développement d'un site Wordpress

Bien que le site soit entièrement réalisé sur mesure : aussi bien sur le design que l’interface d’administration rendant tous les éléments du site éditables sans avoir besoin d’un bac +5 en informatique ou de bricoler à travers des modules dans des langues inconnus comme c’est souvent le cas lorsque des agences web peu regardantes s’en servent, nous avons utilisé un moteur WordPress pour lier tout cela.

 

Cet outil nous permet de ne pas avoir à réinventer la roue pour utiliser des fonctions primaires comme la gestion des medias : ajout de fichiers images ou pdf par exemple, et mettre à disposition une interface d’administration simple à utiliser, surtout sachant que l’équipe en charge de la gestion du quotidien du site internet de la French Tech en connaît déjà les principaux rouages.

 

Dans ce projet de refonte, il avait toutefois quelques spécificités techniques ! En effet, la French Tech étant un membre clé de l’écosystème de l’innovation en France, elle fonctionne grâce à différents réseaux et ne publie pas ses contenus à un seul et même endroit. Ainsi, nous avons du nous méninger pour automatiser la gestion des événements et l’annuaire des start-up à disposition sur le site.

site-internet-french-tech-lyon-3
4.

Automatisation des tâches

WordPress étant conçu initialement pour gérer des sites vitrines ou des blogs, beaucoup pensent -à tort- qu’il n’est pas possible d’y connecter d’autres sites, d’y effectuer des développements complémentaires, ou alors d’y inclure quelconque technicité particulière. Ce qui n’est bien évidemment pas le cas. Il est certain que nous-mêmes ne recommandons pas l’utilisation de WordPress lorsque les fonctionnalités utiles au bon fonctionnement d’un site deviennent trop complexes ou nécessitent des développement très spécifiques. Mais pas ici.

 

Car dans le cas présent, nous avions besoin de récupérer les événements ainsi que leurs informations liées depuis Open Agenda, outil reconnu et largement utilisé, utilisé par la French Tech ONE pour publier les rendez-vous à venir, qu’ils soient locaux, nationaux ou internationaux, et la liste des start-ups inscrites sur un annuaire annexe. Il nous suffisait donc de savoir s’il existait une API (système permettant le transfert des données), et de savoir si nous pourrions avoir la main pour nous y connecter et récupérer ces données : ce fût le cas.

 

En allant nous connecter à la base de données Open Agenda, il nous est possible de récupérer tous les éléments nécessaires (titre, texte, tags, adresses, ou autres) et les incorporer directement dans l’interface d’administration du site afin qu’ils soient publiés automatiquement. Il est est de même pour l’annuaire des start-ups, fourni par Startupplace, auquel nous sommes également connectés.

 

Ainsi, de nombreuses parties du site de la French Tech ONE sont gérées en toute autonomie : dès qu’un évènement est publié sur Open Agenda, il est récupéré et mis en forme sur le nouveau site, au même titre que dès qu’une nouvelle start-up fait son apparition sur Startupplace, celle-ci vient se publier automatiquement dans l’annuaire du site. Les travaux colossaux de notre pôle développement sur cette mission permettent aux administrateurs du site de gagner un temps précieux.

site-internet-french-tech-lyon-4

Besoin d'une refonte ?

  • 6 cours Lafayette
  • 69003 Lyon