UI Design

Refonte du média
numérique de batiweb

Batiweb, média connu depuis 1996, présente l’actualité du BTP et met à disposition des professionnels une bibliothèque complète de produits.
Pour moderniser son service, la marque avait pour objectif le déploiement de son site sur mobile avec une version plus aéré afin de faciliter la lecture des articles.

Wireframing avancé

Pour commencer à réunir les informations denses, il m'a fallu définir la hiérarchie de l'information du design avec des Wireframes afin d'élaborer plus simplement la mise en page selon le fil conducteur que le client désirait suivre pour ses utilisateurs (Principalement des artisans et architectes).

Approche atomic design

Différentes problématiques de mise en page m'ont été demandées : conserver la colonne de droite, adapter les emplacements publicitaires sur mobile, faciliter les futurs évolutions... J'ai pris donc l'initiative d'utiliser la méthode de l'atomic design en construisant des éléments d'interface pouvant facilement s'implémenter dans tous types d'environnement.

La partie produit

Il existe plus de 13 500 produits référencés sur le site de Batiweb.
J'ai donc catégorisé les produits par type de métier puis simplifié le parcours utilisateur en mettant en place un filtrage intuitif sur une page unique listant tous les produits pour chaque catégorie afin que les utilisateurs puissent trouver ce qu'ils cherchent en moins de temps possible.

Modals sur Batiweb

Un design adaptatif

Avec plus de 60% de l'audience qui lit les articles de batiweb sur smartphone, j'ai pensé dès le début du projet à un design adaptatif en commencent par le mobile. C'est pourquoi tous les composants de la charte sont modulables en fonction des différentes tailles d'écrans.