Shopping List UI Progression

Recipe page progression gif

Gif of some my work on developing a shopping cart page for a recipe website. Recipe list features on the left and all the required ingredients appear as cards within food categories on the right.

Aim is to organize ingredients required for recipes and create a simple list for the user to work with. List could be saved to phone or CTA to shop now brings them to their favoured online grocery shop.

Working progress - still using filler text etc.


keyboard shortcuts: L or F like Z toggle zoom