Decathlon · Voir en ligne

Page Rappels Produits

Refonte UX d’une page critique : recherche, filtres et navigation par année pour rendre 48+ rappels consultables.

HTMLCSSJavaScript

Année: 2025
Stack: HTML · CSS · JavaScript
Type: Refonte (avant / après)
Rôle: Dev front + UX

Avant / Après

AvantAprès

Conception & réalisation

Problèmes rencontrés, décisions UX et livrables.

Problèmes identifiés

4 points

1.Gérer 48+ produits rappelés sur plusieurs années
2.Permettre une recherche rapide et intuitive
3.Différencier visuellement les rappels en cours des archivés
4.Créer une navigation claire dans l'historique

Actions réalisées

4 livrables

1.Recherche JS avec filtrage en temps réel
2.Filtres par statut (Tous / En cours / Archivés) avec compteurs
3.Accordéons par année pour l'historique
4.Cards produits avec badges de statut et animations

Code

javascript

Filtrage en temps réel

javascript

1function filterRecalls() {
2  const searchTerm = searchInput.value.toLowerCase();
3  const activeFilter = document.querySelector('.recall-toolbar__filter--active').dataset.filter;
4
5  const filtered = recalls.filter(recall => {
6    const matchesSearch = recall.title.toLowerCase().includes(searchTerm)
7      || recall.description.toLowerCase().includes(searchTerm);
8
9    const matchesFilter = activeFilter === 'all'
10      || (activeFilter === 'current' && recall.status === 'current')
11      || (activeFilter === 'archived' && recall.status === 'archived');
12
13    return matchesSearch && matchesFilter;
14  });
15
16  renderCards(filtered);
17  updateCounts();
18}

Suite du parcours

Accéder aux autres projets ou me contacter.

Retour aux projets Me contacter Voir en ligne