Everyday grocery shopping, designed for mobile.

FreshDash is a grocery delivery case study focused on the full customer journey — from browsing categories and collections to search, product detail, cart, account, and checkout. The work demonstrates proven e-commerce UX across mobile and responsive web, with interaction patterns familiar to Shopify storefronts.

The project was designed in Figma first — with organised pages for user flows, wireframes, a component library, desktop and mobile screens, and developer handoff — then built as a live frontend prototype to show how design decisions translate into production-ready interfaces.

Status

In Progress

Type

E-commerce UI/UX Case Study + Live Prototype

Timeline

Ongoing Personal Project

Category

Grocery Delivery / E-commerce / Shopify-Inspired UX

Technology

Next.js 16 / React / TypeScript / Tailwind CSS / Framer Motion / Lucide React

Platforms

Mobile Web / Responsive Web / Progressive Commerce

Location

South Africa

Role

UI/UX Design / Product Design / Design Systems / Frontend Development

Designing a grocery experience that handles complex commerce tasks without overwhelming mobile users.

Grocery shopping online requires product discovery, filtering, favourites, quantity controls, delivery preferences, persistent carts, and account management — all within a small screen. The challenge was to structure this information clearly while keeping the experience fast and intuitive.

The design needed to adapt responsibly across breakpoints: navigation collapsing into mobile menus, product grids shifting from four columns to two, filters moving into bottom sheets, and touch-friendly controls replacing hover-dependent patterns.

Another goal was to create reusable components — product cards, cart drawers, collection headers, promotional sections — that could integrate with Shopify or a custom backend while maintaining a consistent visual language.

A grocery commerce prototype covering complete shopping journeys.

FreshDash presents end-to-end shopping flows including category browsing, collection pages, advanced search, favourites, animated mini-cart interactions, account menus, and a streamlined checkout path — documented in Figma and validated through a working frontend build.

The interface demonstrates strong typography hierarchy, spacing discipline, mobile-first layout decisions, motion used for feedback rather than decoration, and accessibility-conscious states throughout the experience.