Grocery on Budget- web design

Grocery on Budget- web design

Grocery on Budget is a platform that allows users to compare grocery prices based on location, check item availability, and set a grocery budget.

Role

Role

UX/UI Designer

UX/UI Designer

Team

Team

Jiyoung, Yuri, Riain

Jiyoung, Yuri, Riain

Duration

Duration

9 weeks

9 weeks

Project Overview

In response to economic shifts, New Yorkers are increasingly turning to home cooking amidst a 24% surge in food ingredient prices since 2020. To address this trend, "Grocery on Budget" emerges as a solution, offering a convenient platform for comparing nearby mart prices, inventory lists, and setting personal budgets, empowering users to make cost-effective choices with ease.

Problem

Users face challenges in comparing prices across different stores and checking the availability of items in local, offline grocery stores.

Solution

Provide a service where users could compare prices and see stocks of offline groceries

Problem

Users face challenges in comparing prices across different stores and checking the availability of items in local, offline grocery stores.

Solution

Provide a service where users could compare prices and see stocks of offline groceries

Features & Iterations

Main Page

Main screen - before log in

The main screen before and after login is designed differently so that non-members can intuitively know what kind of service the site provides before login. The main function, the market near my area, allows users to compare the lowest price of the item you want to purchase.

Service introduction

Introducing the main services provided by Grocery on Budget.

Main screen - after log in

After logging in, members can check the promotional and sale products of each market based on the location where they registered. In particular, it shows the products that contain the most so that users can easily purchase food materials.

Promotions of the favorite stores

Users can intuitively see the sale products and promotions of your favorite marts.

Product Page

Products screen

Easy price comparison of my near by stores and stock information

Live product stock information

Easy check of stock information

Add tag

Easy “add” tag for friendly user experience

Detail search page

This is the page that comes up when a user finds dairy products. 
Users can see both the current promotional and non-promotional products. 
Users can only compare the product prices of the markets set by the user and know the inventory.

Promotion tag

The products that are being promoted are marked with tags.

My Profile Page

My Profile page

This is the My Profile page that the user encounters. 
You can set up a user's profile. 
Only markets that users want to go to can be selected, and allergies can be marked.

My Budget page

This is the My Budget page that the user encounters. 
Only the amount that the user wants to spend can be set. Users can no longer add products to cart if they exceed the amount they set.

Expense summary

Products that are mostly purchased by peers around you can also be seen in the beta version.

Main Page

Main screen - before log in

The main screen before and after login is designed differently so that non-members can intuitively know what kind of service the site provides before login. The main function, the market near my area, allows users to compare the lowest price of the item you want to purchase.

Service introduction

Introducing the main services provided by Grocery on Budget.

Main screen - after log in

After logging in, members can check the promotional and sale products of each market based on the location where they registered. In particular, it shows the products that contain the most so that users can easily purchase food materials.

Promotions of the favorite stores

Users can intuitively see the sale products and promotions of your favorite marts.

Product Page

Products screen

Easy price comparison of my near by stores and stock information

Live product stock information

Easy check of stock information

Add tag

Easy “add” tag for friendly user experience

Detail search page

This is the page that comes up when a user finds dairy products. 
Users can see both the current promotional and non-promotional products. 
Users can only compare the product prices of the markets set by the user and know the inventory.

Promotion tag

The products that are being promoted are marked with tags.

My Profile Page

My Profile page

This is the My Profile page that the user encounters. 
You can set up a user's profile. 
Only markets that users want to go to can be selected, and allergies can be marked.

My Budget page

This is the My Budget page that the user encounters. 
Only the amount that the user wants to spend can be set. Users can no longer add products to cart if they exceed the amount they set.

Expense summary

Products that are mostly purchased by peers around you can also be seen in the beta version.

Desk Research

Research indicated that inflation and tipflation is giving pressure for people to dine out.

The cost of dining out in the U.S. rose by 8.2% in 2023 compared to 2022. The recent surge of 25% in 'tip inflation' is leading people to avoid the culture of eating out.

Competitor Analysis

We have compared 4 big markets that owns multiple chains across the US.

User Research

We have conducted interviews with New Yorkers

User Persona

Personas are set according to the data collected

User Journey Maps

Solution

We are proposing service where users could compare prices and see stocks of offline groceries

Project Goal

We are proposing service where users could compare prices and see stocks of offline groceries

Branding

Grocery on a Budget is a service that enables users to purchase ingredients affordably within a set budget. Drawing inspiration from the items typically found in a shopping basket, the logo was intuitively designed to clearly convey its association with grocery-related services to anyone who sees it.

Branding

Grocery on a Budget is a service that enables users to purchase ingredients affordably within a set budget. Drawing inspiration from the items typically found in a shopping basket, the logo was intuitively designed to clearly convey its association with grocery-related services to anyone who sees it.

Design Systems

Typography

Montserrat

Montserrat | Light

Montserrat | Regular

Montserrat | Medium

Montserrat | Semi Bold

Montserrat | Bold

Color

Iconography