release date
2024
Overview
The product recall remedy process is often confusing, time consuming, and parents are too busy to dedicate the time & effort. Recalls is a web application that I created to make it easier to discover and track recalled products. It was also an opportunity to tackle full-stack development.
Challenge
The Consumer Product Safety Commission (CPSC) PWA is very bare-bones has several UX issues:
- Very text heavy, means a lot of reading to get the relevant information.
- Wasted space, can only view recalls one-at-a-time.
- Only a single image for each recall and they are often cropped in ways that obscure the product.
- Can't enlarge images.
- No way to track recalls.
My Solution
My primary goal was to make the recall discovery process quicker and easier.
My approach features:
- Images are full visible and can be enlarged in a modal.
- ElasticSearch enables a fast and mistake-tolerant search experience.
- Iconography enables understanding hazards at a glance quickly.
- Thoughtfully designed UI + UX.
- Follow Companies to receive recall alerts.
- Track recalls, refunds/replacements in-progress and savings-to-date.
Promo Video
Technologies Utilized
| Frontend | Backend |
|---|---|
| Vue 3 | ExpressJS |
| Composition API | Loopback |
| Pinia | PostgreSQL |
| VueUse | ElasticSearch |
| Bulma / Buefy | NodeJS |