Project Overview
1. Objective
Design a simple, clean grocery shopping app interface for fast daily use. The goal was to make everyday ordering feel smooth, light, and intuitive — especially for busy users who already know what they want.
2. My role
From Research to interface.
3. Goal
UI Design – Visual layout, flow clarity, and component system
The Idea Behind the Design
Many grocery apps feel overloaded — too many pop-ups, discounts, filters, and distractions. I wanted to strip it down:
“How can I make a grocery app feel as fast and familiar?”
So I designed Grocart — a calm, mobile-first UI with large tap targets, reorder shortcuts, and a visual hierarchy that speeds up decisions.
Process
📱 Mobile-First Layout
Designed entirely for thumb zones and short sessions
Easy-to-scan sections, card-based grids, soft corner visuals
🧾 Product Cards
Quick tap “+” to add to cart
Clear item name, weight, and price at a glance
Priority on clarity, not promo clutter
🛒 Cart UX
Always accessible from the bottom nav
One-swipe cart view, with editable items and smart suggestions
🧭 Navigation Logic
Home, Categories, Offers, Cart, and Orders — just 5 core sections
No hidden gestures, no guesswork
Visual Language
Color Palette: Fresh greens, soft neutrals — evoke calm, cleanliness, and freshness
Typography: Friendly sans-serif with strong price visibility
Icons: Simple, custom-drawn — familiar but light
Spacing: Generous padding to reduce visual clutter and help each product “breathe”
Key Features Screens
Tools & Techniques
Figma – Full UI design and component system
Design Tokens – For consistency in colors, spacing, and radius
Atomic Design System – Reusable cards, buttons, inputs
📂 Project Details
Type: UI/UX Design – Solo Project
Duration: ~1 weeks
Conclusion
Grocart is more than just another grocery app design.
It’s a UI built with intention — for everyday people, quick decisions, and repeat orders.
A soft, structured, and satisfying way to shop, every day.