GrocerEase

Household grocery coordination is broken. Shared lists live in text threads, budgets are guessed, and the actual shopping trip has no structure. The challenge was to design a smart collaborative grocery app from scratch that replaced the dumb checklist with a genuinely useful household assistant, while keeping the experience light enough that it never felt like more work than the problem it solved.

I designed GrocerEase around three distinct interaction modes, each with its own flow and visual rhythm: list building, active shopping, and post-trip reflection. List building centres on a drag-and-drop item architecture with category grouping, assignment, urgency flags, and inline budget tracking. Shopping Mode shifts the UI into a focused, checklist-driven state with a Pre-Departure Checkpoint modal that surfaces health warnings before the user leaves the house. Trip Recap closes the loop with an animated badge reveal, turning a mundane task into a moment worth finishing. The component architecture enforces clear separation between modal types, using a bottom sheet on mobile and a centred dialog on desktop throughout, with a gamification layer (8 badges, streak tracking, and a Usuals carousel) woven into the experience rather than bolted on. A Pro tier introduces an analytics suite built with Recharts, including a dual-view Price History chart that defaults to a table on mobile for touch usability. The visual system runs on CSS custom properties for full dark mode fidelity, with Motion used for spring-animated reveals and micro-interactions that reward task completion without adding noise.

GrocerEase shipped to production at getgrocerease.com as a fully functional, monetisation-ready MVP. The three-mode UX structure, gamification system, and Pro analytics suite are live and operational, with the end-to-end product loop from onboarding through to paid conversion validated in a real production environment.