Mobile apps · Design concept
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.
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.
The browsing screen introduces grocery options.
Apple detail presents a four-pack with an illustrative HKD 24 price.
The review screen brings the intended collection order together without submitting it.
The price should refer to an explicit unit. Selecting one pack must not be confused with buying one apple.
A proposed pickup review should not imply stock has been reserved. A real service needs rules for unavailable goods and substitutions.
Proposed design specimens. These are static examples, not working controls or a production specification.
Shopping canvas
#F7F8EE
Product actions
#437748
Prices & labels
#2E382C
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.
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.
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.
