Back to list

Designing a Grocery Cashback App for Saving Money on Grocery Products

Designing a Grocery Cashback App for Saving Money on Grocery Products

Designing a Grocery Cashback App for Saving Money on Grocery Products

Designing a Grocery Cashback App for Saving Money on Grocery Products

Designing a Grocery Cashback App for Saving Money on Grocery Products

Grocery Cashback Online Application

Grocery Cashback Online Application

Grocery Cashback Online Application

Grocery Cashback Online Application

Grocery Cashback Online Application

Tools

Figma

Miro

Adobe Photoshop

Notion

3 weeks

Time frame

UX/UI Designer

Role

Mobile

Platform

Introduction

Introduction

Roughly 1/3 of all food produced for human consumption goes to waste. Perishable products represent 87% of the waste volume. Wasteless helps supermarkets reduce food waste and recapture the full value of their perishable products through AI-powered dynamic pricing. Customers can save money on products that expire soon.

Roughly 1/3 of all food produced for human consumption goes to waste. Perishable products represent 87% of the waste volume. Wasteless helps supermarkets reduce food waste and recapture the full value of their perishable products through AI-powered dynamic pricing. Customers can save money on products that expire soon.

Problem

Problem

Customers are not motivated to save money on products with a short expiration date. Dynamic pricing performs well but is not enough. The volume of wasted perishable products still cuts supermarkets' profits.

Customers are not motivated to save money on products with a short expiration date. Dynamic pricing performs well but is not enough. The volume of wasted perishable products still cuts supermarkets' profits.

Goal

Goal

Increase supermarkets' revenue and reduce food waste. Create a simple and intuitive solution that will allow customers to receive cashback on products with a short expiration date. Incentivize customers to save more.

Increase supermarkets' revenue and reduce food waste. Create a simple and intuitive solution that will allow customers to receive cashback on products with a short expiration date. Incentivize customers to save more.

My role

My role

I was responsible for the visual UI design, prototyping and took part in the UX research and user testing. I collaborated with 2 product designers at the early ideation stage and with the Product Owner throughout the entire project.

I was responsible for the visual UI design, prototyping and took part in the UX research and user testing. I collaborated with 2 product designers at the early ideation stage and with the Product Owner throughout the entire project.

My process

My process

The structure and length of my process can vary depending on at which point I join the team, the resources available, and deadlines. For this project, I followed the process shown down below.

The structure and length of my process can vary depending on at which point I join the team, the resources available, and deadlines. For this project, I followed the process shown down below.

Discovery

Discovery

We started the project with a kick-off meeting (with the Product Owner, key stakeholders, and two product designers) to understand the root problem, target audience and define the specific requirements. We analyzed several leading apps on the market with similar features and agreed on the general flow.

We started the project with a kick-off meeting (with the Product Owner, key stakeholders, and two product designers) to understand the root problem, target audience and define the specific requirements. We analyzed several leading apps on the market with similar features and agreed on the general flow.

After the kick-off meeting, we ran a persona workshop and formed several assumptions about our target audience based on the existing quantitative and qualitative research done by Wasteless. We decided to validate our assumptions and conducted a user survey via Google forms with 100 customers that used Wasteless’s smart pricing.

After the kick-off meeting, we ran a persona workshop and formed several assumptions about our target audience based on the existing quantitative and qualitative research done by Wasteless. We decided to validate our assumptions and conducted a user survey via Google forms with 100 customers that used Wasteless’s smart pricing.

Based on the results we defined 2 target audiences: students between 18-25 years old and parents between 35-45 years old. We recruited 5 people from each category and conducted remote user interviews via Zoom.

Key questions I asked

  • How often do you do grocery shopping?

  • What do you look at when choosing a product?

  • How often do you buy products that are at discount?

  • What cashback apps do you use?

  • What do you think about using a cashback app to save money    on grocery products?

What we learned

  • Many of our users look at the price when choosing a product.

  • They do their main grocery once a week but go to supermarkets daily to buy some snacks or beverages.

  • They would love to use an online cashback app to save money on groceries.

  • The app would have to be trustworthy and simple to use.

User persona

User persona

After communicating with the end-users, we converted all their challenges and potential issues into How Might We notes. Then we organized and prioritized them, using the most important ones as touchpoints when designing our wireframes.

HOW MIGHT WE NOTES

Ideate & Planning

After building a solid understanding of the problem and end-users, we moved into Ideation and Planning. In this phase, we gathered inspiration
on how our competitors and other brands designed their UX/UI solutions
and noted our thoughts about them.

Ideate & Planning

After building a solid understanding of the problem and end-users, we moved into Ideation and Planning. In this phase, we gathered inspiration
on how our competitors and other brands designed their UX/UI solutions
and noted our thoughts about them.

LIGHTING DEMOS (DESIGN SPRINT TECHNIQUE)

Then we individually sketched our ideas on paper and had a Zoom meeting with the Product Owner and stakeholders to validate them. We defined a clear user flow and worked on each task.

Then we individually sketched our ideas on paper and had a Zoom meeting with the Product Owner and stakeholders to validate them. We defined a clear user flow and worked on each task.

User flow

After I finished with the analysis of the target users, I stated the user flow, which brought a better understanding of the website main functionality, number of screens, happy scenarios, and edge cases and further simplified the wireframing and UI Design Process.

User flow

After I finished with the analysis of the target users, I stated the user flow, which brought a better understanding of the website main functionality, number of screens, happy scenarios, and edge cases and further simplified the wireframing and UI Design Process.

Task flow | scan the receipt
Add a photo from gallery / retake & delete photo

Task flow | scan the barcode
Type the barcode & add a photo from gallery

Once the flows were approved, we converted our rough sketches into wireframes that were used to design high-fidelity screens and built out prototypes for early validation

ROUGH SKETCHES

Designing & Prototyping

With the sketches and user flows approved, we turned the low-fidelity wireframes into hi-fidelity designs.

I created an interactive prototype in Figma and we wrote the scenario for the upcoming user test. Before testing the prototype with the end-user we conducted several internal tests with the team and stakeholders to ensure there are no errors.

Designing & Prototyping

With the sketches and user flows approved, we turned the low-fidelity wireframes into hi-fidelity designs.

I created an interactive prototype in Figma and we wrote the scenario for the upcoming user test. Before testing the prototype with the end-user we conducted several internal tests with the team and stakeholders to ensure there are no errors.

Preview prototype here

Evaluate and Testing

With our prototype approved, we conducted remote user interviews via Zoom with 5 users. We gave them such tasks as “try to scan a product”, “withdraw the money to your Paypal account”, “check the products you added”...
5 candidates were enough to identify the most crucial problems.

Evaluate and Testing

With our prototype approved, we conducted remote user interviews via Zoom with 5 users. We gave them such tasks as “try to scan a product”, “withdraw the money to your Paypal account”, “check the products you added”...
5 candidates were enough to identify the most crucial problems.

We noticed that users found it hard to select the supermarket because of a lack of a map and the menu function came to be unnecessary here. Also, a progress bar that will show the current step was missing.

We noticed that users found it hard to select the supermarket because of a lack of a map and the menu function came to be unnecessary here. Also, a progress bar that will show the current step was missing.

We decided to make the withdrawal process more interesting by showing the current balance in form of a card but quickly realized that it caused a misunderstanding. 4 out of 5 users thought the Wasteless App is an ewallet, which it is not. We also decided to simplify the flow.

We decided to make the withdrawal process more interesting by showing the current balance in form of a card but quickly realized that it caused a misunderstanding. 4 out of 5 users thought the Wasteless App is an ewallet, which it is not. We also decided to simplify the flow.

Final Design

After several rounds of iterations and discussions with the stakeholders,   and end-users we produced the final designs and created a design system for further use.

Final Design

After several rounds of iterations and discussions with the stakeholders,   and end-users we produced the final designs and created a design system for further use.

Development

With the final designs approved I worked with engineers through an efficient hand-off process, delivering all the assets with detailed instructions through Figma. The app is still in the development phase and will be launched soon.

Development

With the final designs approved I worked with engineers through an efficient hand-off process, delivering all the assets with detailed instructions through Figma. The app is still in the development phase and will be launched soon.

More projects

Proposing a Design Solution for a Native IOS Mobile Application Cloting Shop

Cloting Shop IOS Application

Proposing a Better Design Solution for a Luxury Real Estate Company

Real Estate Landing Page

All case studies

Need a Design That Sells Effectively?
Let’s connect!

Get in touch

Need a Design That Sells Effectively?
Let’s connect!

Get in touch

Need a Design That Sells Effectively?
Let’s connect!

Get in touch

Need a Design That Sells Effectively?
Let’s connect!

Get in touch

Need a Design That Sells Effectively?
Let’s connect!

Get in touch

©2024 All Rights Reserved

©2024 All Rights Reserved

©2024 All Rights Reserved

©2024 All Rights Reserved

©2024 All Rights Reserved