Mobile apps · Design concept
Grocery pickup app
A grocery app concept linking browsing, a four-pack apple product and pickup review, with proposed quantity and stock messages.
Design concepts, not client projects. Screens are static mockups; names and data are illustrative.
The design brief
Keep the product unit clear as a shopper moves from browsing to pickup review. A four-pack of apples provides a concrete example of pack quantity versus item count.
- Designed for
- Shoppers choosing groceries for a proposed collection order.
- Constraints to consider
- The four-pack at HKD 24 is fictional sample pricing. No live stock, order, payment or collection reservation is created.
The proposed journey
- 01
Browse groceries
The browsing screen introduces grocery options.
- 02
Check the pack
Apple detail presents a four-pack with an illustrative HKD 24 price.
- 03
Review pickup
The review screen brings the intended collection order together without submitting it.
Why these design choices?
Keep pack size beside price
The price should refer to an explicit unit. Selecting one pack must not be confused with buying one apple.
Separate availability from intent
A proposed pickup review should not imply stock has been reserved. A real service needs rules for unavailable goods and substitutions.
A closer look at the visual system
Proposed design specimens. These are static examples, not working controls or a production specification.
Colour roles
Shopping canvas
#F7F8EE
Product actions
#437748
Prices & labels
#2E382C
Typography & spacing
Clear information. A considered next step.
Use clear sans-serif price labels and keep currency, pack size and quantity readable at the same time.
Group pack information with its quantity control. Keep pickup details distinct from the basket contents.
Beyond the ideal state
Basket empty
Your basket is empty. Browse groceries to add a product.
Pack added
One four-pack of apples added at the sample price of HKD 24.
Pack unavailable
This pack is unavailable. Remove it or choose another product before continuing.
Why show pack size again in the review?
Quantity can mean packs, individual pieces or weight. Repeating the unit alongside the selected quantity makes the intended order easier to inspect without relying on product photography.
