An online grocery store front-end optimized for quick product discovery. Search-first hero, category shortcuts, and a delivery promise on every view-port — everything designed to reduce clicks between "I need milk" and checkout.
Online grocery is a zero-margin-for-error category. If the user can't find what they need in under fifteen seconds, they bounce to the competitor. The brief was simple: make every product two clicks away from "add to cart".
Instead of a typical hero image, the page opens with a large search bar. Right below it: clickable category icons so users who don't know exactly what they want can still browse quickly. The delivery promise lives in a sticky bar so it's always visible.
Product cards are uniform in size, show price and badge prominently, and the hover state previews the "add to cart" button — reducing the cognitive load of scanning.
Fastest path from need to result.
Visual browse for casual users.
Reassurance on every scroll.
Low cognitive load when scanning.
Built with semantic HTML, SASS and Vite. The front-end is ready to plug into any back-end or headless CMS — the markup is intentionally framework-agnostic.
Next project