CrowdBuilder
Description
Le réseau européen de salles de concerts Live DMA s’est approché de moi pour développer un site web autour d’un outil conçu par ses soins.
L’outil est un dispositif participatif destiné à accompagner les équipes organisatrices de concerts dans leur stratégie de développement de publics.
L’objectif était de retranscrire cet outil dans un site web simple, fluide et accessible.
- Conseil
- Création
- Développement sur-mesure
- Formation
- Maintenance web
- Site web vitrine
- Ux design
- Webdesign
Services
En collaboration avec Alexane Querrec de Tinibuni
Objectifs
L’objectif est de retranscrire cet outil dans un site web simple, fluide et accessible, qui
proposera :
- Une version interactive de l’outil
- La possibilité pour l’utilisateur d’enregistrer sa progression et de revenir plus tard
- L’accès à sa version complétée, avec une option d’export (PDF, email, etc.)
- Une interface entièrement en ligne
- Base de projets inspirants sous forme de mosaïque, filtrables par thème et pays
- Le site devra être multilingue
- Gestion simple des contenus du site, notamment pour ajouter de nouveaux projets
- Prise en compte de critères écologiques dans la construction du site : hébergement,
poids et complexité des pages, sobriété visuelle - Responsive (tablettes, ordinateurs, mobile)
UX / UI Design en éco-conception Web
UX Design
Au vu du projet, il me semblait préférable de commencer le projet avec un atelier d’idéation et la définition des personas. Cet atelier notamment grâce à la méthode de la pire conception a permis de discerner les points les plus importants pour les futurs utilisateurs et utilisatrices de l’outil :
- possibilité d’enregistrer à tout moment son avancée lors de son parcours
- avoir une version traduisible
- voir sa progression
- ne pas avoir besoin de créer un compte pour utiliser l’outil
Au vu de la complexité de l’outil, un user flow était primordial pour poser les bases de l’outil et mieux comprendre visuellement le parcours des utilisateurs et utilisatrices.
Toute la conception a été centralisé sur l’outil et aussi sur la collaboration collective de celui-ci.
UI Design
En lien avec Alexane alias Tinibuni, nous avons commencé le travail d’UI Design. Suite à la création de l’identité visuelle par Alexane, j’ai pu commencer à travailler sur un moodboard web pour définir la tendance, l’univers graphique du futur site web.
En lien avec la charte graphique, je suis parti sur un univers pop, joyeux et chaleureux grâce aux éléments et couleurs fournis par Alexane. Le design néo-memphis sur le site web associé légèrement à l’univers gaming était plus qu’une évidence. J’ai eu aussi l’idée d’une onde parcourant certaines sections pour rappeler l’univers musical mais aussi apporter du dynamisme.
Lors de la conception je souhaitais apporter du dynamisme également par les animations CSS que ce soit dans le footer mais aussi dans le header. Pour ce dernier, je voulais apporter une animation assez poussée qui rappelle à la fois l’univers du gaming mais aussi la lumière et le soleil grâce à l’outil. C’est une allégorie à la positivité.
Toutes les animations ont été conçues pour les créer seulement en CSS pour limiter l’utilisation des ressources.
Typographies
Couleurs
Maquettes graphiques
Développement en éco-conception Web
Le travail en UX Design a permis de déterminer un cahier visuel des charges fonctionnelles pour travailler idéalement sur l’outil.
J’ai pu trouver une solution technique via un outil viable, flexible, traduisible et ayant un impact limité.
Toutefois, l’utilisation d’un plugin même modulaire constitue souvent une dette technique. Il fallait donc se rattraper au-delà de l’outil.
J’ai donc réduit le nombre de pages mais aussi le volume de ces pages. Les pages créées quant à elle, ont été réduites au maximum pour pallier à la dette technique de l’outil.
Performances Web
Performances éco à la mise en ligne :
• Ecoindex : catégorie B (75 / 100) – (Grade A à partir de 81/100)
- Poids moyen des pages : 700ko (moyenne du Web : 2410Ko)
- Requêtes moyenne par page : 24 (moyenne du Web : 78)
- Taille moyenne du DOM : 378 (moyenne du Web : 693)
• Website Carbon Calculator :
0,08 équivalent C02 à chaque visite du site contre 4.61g de CO2 en moyenne pour un site non éco-conçu
Performances globale sur la page d’accueil :
- Google Page Speed version ordinateur : 83/100
- Google Page Speed version mobile : 91/100
- Pingdom Tools : 88/100