We have this: a UI flow, and ready made screens (.psd) for a Tablet version.
So what will be the difference between tablet and smartphone version?
I had planned they to be quite different
because Tablet version assumes that 1) the screen is big
2) user can use his fingers of both hands
3) both footer and header are visible all the time, and do not scroll
(because there is screen size enough for it)
4) the screen is wide, space for multiple products horizontally
and so for the Smartphone version:
a) screen is not so wide, so best with 1 item per line
b) because of a - its good to have more info about a product (or a category) in each card, i.e. a card has product image, name, perhaps some preview info like its price
c) Use the entire page, no fixed footer. If user needs to access footer stuff, he/she should scroll down
d) use thumb to tap, which is bigger than a finger
e) input boxes need be bigger, probably a full line for one input box, and never multiple input boxes and buttons on the same lne
These are just my layman observations. Now I need an UI expert to make a quick mockup (like in mockupbuilder or Balsamiq) of wireframes, to illustrate a better UI for the Smartphone version.