All work
Express Grocery Delivery App
Redesigned the registration and shopping experience for an express grocery delivery app
COMPANY
Foodstuffs
ROLE
Senior Product Designer
YEAR
2025
TYPE
App · Grocery eCommerce
The context
To compete with MILKRUN, Foodstuffs wanted a quick commerce service through their Four Square brand.
My role was to reskin an existing app of another Foodstuffs’ brand, adapting it to create a streamlined express delivery experience.
The approach
First I took the screens for the other brand's app and stripped them back to a wireframe state to be used in sessions with stakeholders.
I then did competitor research to understand the requirements of a quick commerce offering and how I could update the app to work for this purpose.
After this I ran sessions with stakeholders to agree on which parts of the app were 'in' and which were 'out'. This was an exercise in balancing customer needs and business needs. The business needed the scope to stay steady, and customers needed an end product that was fit for use.
I also called out and got agreement on two specific areas that needed changes, rather than just a reskin, to be fit for purpose. These were the registration flow and the product cards, which I'll break down in more detail below.
From there I reskinned all ‘in’ screens section by section, conducting feedback session with stakeholders along the way.
Registration flow
I noticed that the other brand’s (New World) registration flow wasn’t suitable for the express delivery experience with Four Square.
We required customers to have an address in a serviced area, but with the New World flow you would need to register first before you could even check if your address was in a serviced area.
Because the Four Square express delivery would only be available in metro areas, this meant that customers would make an account only to find out they couldn’t even use the app.
I revised the flow to put the address check up front. This enabled customers to quickly find out if their address is serviced, as well as allowing them to browse the range before committing to signing up.
Product cards
The product cards are the core aspect of the app and they needed to be fit for the quick commerce purpose. There were already a series of known issues identified in prior user interviews, I provided solutions to these issues and proposed we used the Four Square app build as an opportunity to test these solutions and apply the learnings across all Foodstuffs brands. Issues and solutions are detailed below:
Issue | Solution |
|---|---|
The 2 column layout didn’t allow for quick scanning and comparison of products. | Changed to a one column layout and lined up all card information for quick scanning. I.e. All the product images, prices etc are in line with one another as you scroll down the page |
The hierarchy of the card was off, with the image in the middle drawing your eye, and then you needing to look up and down to read all other information in the card. | Moved the image to the left hand side and all the ‘text’ information to the right. |
Product names would frequently be too long to fit alongside the specials badge. | Gave the product names more space by moving all the text information to the right and making the cards one column. |
There was no visual indication to show you can choose between ‘each’ and ‘kilogram’ for products sold by weight. | With the extra space gained by changing the card layout I could include an ‘ea/kg’ drop down next to the ‘Add’ button. |
If there was a product origin for only one product in a row the other would have an awkward white space at the bottom of the card. | Since cards are now just on top of each other, and not side by side, the products with origin information can grow independently of the products without. |
The outcome
For the visual style of the app, I balanced the well known Four Square Green with pops of supporting colours. I did the same with the use of typography, using the brands custom font for key areas, like page headings and prices, and keeping the smaller text in a simple sans serif for readability. This approach projected the brands personality while keeping the app functional and easy to use, along with the improvements to the registration flow and product cards.
