Make grocery shopping cheaper, quicker and easier
A shopping list app that generates the cheapest item price and special deals across the major supermarkets in New South Wales, Australia. The location-based app recommends the most convenient and cheapest place to shop based on your shopping list.
More often people are presented with a lot of choices in one place. The increase in choices creates great diversity but also makes it more time-consuming to make decisions. It is a typical problem when one goes grocery shopping in a mall, where there are many supermarkets in the same place. As there are different offers and discounts in different supermarkets, it lacks tools for price-sensitive consumers who only want to save most of their time and budget, regardless of where they shop.
People who are on tight budgets such as students, low-income earners
People who are tech-savvy
Frequent shoppers such as moms or young working parents
Research & discovery
Face to face Interview
I had face-to-face interviews with 18 people who matched the 3 types of target audience roles above. The purpose of the interview is to validate the idea and identify the users' current pain points from their shopping experience, and what they look for in a solution.
I looked at the existing apps that target the same problems as ShopSmart does. I compared the different features and explored how the user experience of those apps could be improved.
Creating user persona
With findings from the previous stage, I built up user personas and identify the functions needed for ShopSmart
He can't find the best value in one shop so has to check for the other shops
He can't keep track of all the offers and promotions of different shops at once
Grocery shopping becomes more time consuming
An efficient way to shop
Keep track of the deals and offers from different supermarkets
Know which supermarket to go for specific items at its best value
Save the most money
Search for items at the best values
Show which shop to go for the needed items
Store supermarket loyalty cards
Update deals and offers from different shops
Categorise items in different shopping lists
30 years old
Nick and his girlfriend are sharing a house with other friends. But they are saving to get an apartment. They are both active and health-conscious. Nick enjoys cooking. He often goes grocery shopping on the weekend. He always shops for the best value. There are 3 supermarkets at the mall Nick goes to. He often finds himself running between places or browsing in between supermarket apps to compare the price of items on his shopping list.
The chart demonstrates the user flow of performing a search task as below
A paper prototype was developed and tested on potential users. It was iterated for 3 rounds as feedback was taken into account. The final version was then wireframed in order to define the visual direction for the app.
Wireframe of search function
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
The main screens
The most 4 important functions - Search, Shopping list, Specials, and Loyalty Cards - are easily accessible at the bottom of the screen. The colour, typeface, font sizes and product listing are determined by running A/B tests.
The search function
I want to create search flexibility which the user can either search for items by entering the keywords or browsing the categories. The grid arrangement of the category listing is chosen because it can show the most information in one screen without too much scrolling and looking too cluttered.
In order to build a shopping list, the user needs to search and add the items they want to the list. The Search function is one of the main features that grasp the user's impression of the app experience. It is important to design a flow that is easy to navigate and does not require the user to go through many screens.
Search Result & Add Items
The process of searching and adding items to list is carrying out through 3 steps: scrolling through results, choosing items, and adding items to list. When choosing to add an item to a list, the chosen item card is expanded showing the information needed to perform the task and retracted once the item is added. The actions are performed within one screen in order to keep the user focusing on the main task and save the time to travel between different screens.