SA Groceries – UI/UX

The concept here was to follow as closely as possible the physical supermarket approach – where fresh produce is positioned on entering. Here Fresh Fruits, Veg, and Seafood etc are showcased near the top – large vibrant images are used to represent each category to whet appetites and also serve as landmarks when scrolling. All products were recategorised more logically, with fewer main and sub categories to aid touch navigation. Though voice navigation here has many advantages as you will see in the other videos.

Products were split by tabs between 'Groceries' and 'More' which includes electronics, clothing, homeware etc, and a Deals tab where you can browse all available deals in one place.

Navigating by Touch

A common pain point in many grocery apps and websites is the challenge of quickly locating the products you want without having to resort to the search function. All products were recategorised to ensure any product is accessible within 3 levels Eg. Fresh Food > Vegetables > Mushrooms. Tapping on the Groceries tab brings you to a visual overview page - here you can quickly see 2 levels deep. On tapping on Vegetables you can then browse horizontally the vegetable subcategories or tap See All if preferred – here you can quickly view the subcategories full screen.

More videos will be uploaded here soon – please check back