Rotato Snapshot.png

ShopSmart

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.

The problem

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.

Target users

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.

Competitor analysis

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

Pain points
  • 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

Needs
  • 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 

App Functions
  • 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 

User Persona
Nick Peterson
30 years old
iOS Developer
Sydney, Australia

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. 

User flow

The chart demonstrates the user flow of performing a search task as below

Prototyping

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
Visual design

#FD954D

#E4F4B5

#707070

#36772E

Myriad Pro 

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.

Tools Used
394px-Sketch_Logo.svg.png
1200px-Adobe_XD_CC_icon.svg.png
illustrator-full-logo.png