Product Recalls Page.
UX redesign of a critical page: search, filters and navigation by year to make 48+ recalls browsable.
htmlcssjavascript
AvantAprès
Challenges
- 01.Handle 48+ recalled products across several years
- 02.Enable fast, intuitive search
- 03.Visually distinguish active recalls from archived ones
- 04.Create clear navigation through the history
Solutions
- 01.JS search with real-time filtering
- 02.Status filters (All / Active / Archived) with counters
- 03.Per-year accordions for the history
- 04.Product cards with status badges and animations
Real-time filteringjavascript
1function filterRecalls() {2 const searchTerm = searchInput.value.toLowerCase();3 const activeFilter = document.querySelector('.recall-toolbar__filter--active').dataset.filter;45 const filtered = recalls.filter(recall => {6 const matchesSearch = recall.title.toLowerCase().includes(searchTerm)7 || recall.description.toLowerCase().includes(searchTerm);89 const matchesFilter = activeFilter === 'all'10 || (activeFilter === 'current' && recall.status === 'current')11 || (activeFilter === 'archived' && recall.status === 'archived');1213 return matchesSearch && matchesFilter;14 });1516 renderCards(filtered);17 updateCounts();18}
→ NextOther projects