Visual Showcase · Online Grocery

ZipCart

Online grocery shopping made simple

Mobile App E-Commerce UX / UI Design Figma
Dashboard
Dashboard
Home Screen
Home
Order Confirmed
Order Confirmed

Visual foundations

Lato
Regular · Medium · Semibold · Bold
Ag
Regular
Ag
Medium
Ag
Semibold
Ag
Bold
Aa Bb Cc Dd 1234
Primary Green #22C55E
Background Dark #1C1C24
Surface Mid #3A3A4A
Text Light #EEEEF4

Consistent icon set used across all screens for navigation, actions, and categories.

🛒
🔍
🏠
💳
📦
❤️
📍
🔔
🥕
🥛
🍞
🛍️
👤
↩️
🧾
🚛

Screen by screen

Launch Screens

First impressions — the onboarding and authentication flow that gets users from install to shopping as quickly as possible.

Splash 1
Splash 1
Sign Up
Sign Up
Login
Login

Zipcode & Truck Selection

The user can enter their zipcode or use current location to detect the nearest trucks available to shop from.

Zipcode
Zipcode
Truck Select
Truck Select

Home Screen

A navigation menu for easy browsing, a search bar for quick item lookup. Users can explore featured products, browse different categories and manage their shopping lists.

Dashboard Main
Dashboard Main
Search
Search

Categories

Organise and group similar products together for easy navigation. Categories mirror different sections of the grocery store — allowing users to browse naturally.

Categories
Categories

My Items

Users can find all their wishlisted items, Buy Again, and favourite products easily at one place by a click or scroll. Store receipts are also managed in this section.

Wishlist
Wishlist
Buy Again
Buy Again
Favourites
Favourites
Receipts
Receipts

Item Details & Cart

Tap any product to see its full details — price, description, and smart recommendations. When you're ready, review everything in your cart, update quantities, and head straight to checkout.

Item Details
Item Detail
Cart
My Cart

Checkout

The checkout process ensures a secure and seamless transaction — allowing users to complete their grocery shopping and have items delivered or prepared for pickup.

Delivery
Delivery
Pickup
Pickup

Every corner of the app

Additional screens covering search, saved addresses, notifications, receipts, and payments — every corner of the app fully designed.

Add Address
Add Address
Search
Search
Receipts
Receipts
Addresses
Addresses
Notifications
Notifications
Account
Account
Coupon Code
Coupon
Pickup Time
Pickup Time
Payment Method
Payment
Add Payment
Add Payment
Thank you for watching

ZipCart · Visual Showcase · DST Portfolio

View full case study →
← Back to Case Study ZipCart View the full research & design process