La Déferlante, design web
Après plusieurs années d'utilisation du site et de développement du média (newsletters, maison d'édition, abonnements, événements...), de nouveaux usages sont apparus, et d'anciens étaient à repenser en UX. J'ai créé une nouvelle direction artistique web en prolongation et en adaptation web de celle des produits imprimés.
Aperçu de l'utilisation du nouveau design system et exemples de blocs et variants.
Header et footer
Nouveau header clarifié, le menu est désormais construit avec des onglets présentant les trois verticales du média : les revues, les livres et les newsletters. Au clic, s'affichent plus d'informations sur ces produits.
Le footer a été refait pour être plus versatile et exhaustif, en rangeant les entrées par catégorie et accès rapides. La newsletter est aussi bien mise en avant.
Les versions mobile sont assez différentes pour que l'expérience soit aussi commode sur téléphone.
Page d'accueil
Nous avons recomposé la page d'accueil en ouvrant sur des articles à la Une, pour clarifier la dimension vrai site média, où on trouve du contenu, en opposition à un site purement commercial ou informationnel.
Nous avons aussi mis en avant les trois axes du média : la revue, les newsletters, la maison d'édition — mais aussi les nouveaux formats comme le glossaire et l'agenda des événements. À la fin, une section rappelle ce qu'est La Déferlante et quel est son fonctionnement.
Abonnement et boutique
Ici, nous avons introduit des cartes dont les détails se déploient au clic pour comparer les offres d'abonnement — tout en faisant la part belle au visuel du produit.
Produit et sommaire
Nous avons pensé une page permettant de rassembler sous le même modèle toutes les pages produit : une ouverture sur une zone d'achat direct avec les détails, et, pour les numéros des revues, un sommaire détaillé, menant aux articles lisibles en ligne. Les dossiers sont mis en avant sur un arrière-plan coloré, et la couleur principale pourra changer pour aller avec chacune des revues.
Glossaire
Le glossaire permet à la rédaction de La Déferlante d'expliquer avec leurs mots des termes abordés dans ses pages, d'aller plus loin dans leur indépendance rédactionnelle, et lier vers les articles mentionnant cette définition. C'est aussi un outil puissant pour le référencement.
Tunnel de paiement
L'objectif était de simplifier le processus d'achat, en intégrant des options comme Apple Pay ou Google Pay, mais aussi en clarifiant les étapes et en rendant l'ensemble plus cohérent avec l'identité visuelle globale, pour rassurer. Une FAQ est ajoutée en bas de chaque page utile, en affichant les meilleures questions.
