Budgie: Budgeting Application
Budgie is a grocery shopping price comparison and budgeting application aimed at assisting shoppers in finding the lowest prices for desired goods in the grocery shops closest to them.
Arriving at Budgie was a purposeful, well-thought-out process that involved both first-hand experiences as well as the conduction of preliminary research.
Budgie could improve the quality of life of shoppers and their overall shopping experience by offering an avenue through which users could save costs and find stores with lower prices of the item they desired to purchase.
The Challenge
Studies show that the management and use of money allow the development of the living standards of most of the population. As a student, I found out that there was no straightforward way to effectively evaluate where to get the lowest prices for grocery items online and offline in order to save time and money.
Is there an application that could assist shoppers in finding the lowest prices for desired goods in the grocery shops closest to them?
Requirements
Role: UX/UI Designer, Researcher
Tools: Figma, Adobe Illustrator, react native
Timeline: 2 Months
Goal
Discover, define, develop, and deliver a ubiquitous budgeting application that simplifies and improves the grocery shopping experience.
Process
Secondary Research to collect data and review various academic resources that tackled the subject matter.
Competitive Analysis of similar applications.
Develop a low, medium and finally, a high-fidelity prototype based on competitive analysis using a tool such as Figma and react native.
Design user study examined the usability and user experience
Analyse and synthesize the user study.
Secondary Research Findings
Grocery shopping, wherever online or offline was estimated to be one of the largest household expenses.
Income is a crucial contributing factor to the shopping and spending behaviour of people. Thus there is a relationship between the income-constrained group, university students, and their perceived spending habits.
Most students are more likely to prefer shopping online or include a form of online shopping in their purchasing process, further exacerbated by factors such as the time spent online, computer literacy and experience using web tools.
Students, in general, were found to value convenience in time and price.
Competitive Analysis
Brief: Mobile app to retrieve the information of possible lowest prices along with the graph for products
Feature: It is based only in the USA. Displays prices on different websites and redirects to websites
Weaknesses: Not fetching the information for UK products, doesn’t recognise the UK area and doesn’t automatically convert currency (doesn’t satisfy our context). It doesn’t enable light during scanning and is unable to absolutely scan if it is dark.
Brief: Both mobile and web apps. A graph of each product’s price throughout time is displayed too.
Feature: Best deals available online. Redirects to the website for purchases online.
Strengths: The scanning functionality is perfect.
Weaknesses: It doesn’t automatically take the location of the area (only in the mobile app) where you are, but we have to set up the country in settings for the respective currency display. No scanner in the web app. It doesn’t show the shops which are nearby.
Brief: Deals of online items. Both mobile and web apps.
Feature: Best deals available online. Redirects to the website for purchases online.
Strengths: The supermarket price comparison tool is one of the features among other features.
Remarks/Drawbacks: No scanner in the web and mobile app. Only UK-based app. It won’t show the nearest shops, it only shows the deals.
Low/Mid Fidelity Prototype
Feature Requirements
As a user, I want to be able to take a picture/ upload an image of the item when I walk into a store or at home.
As a system, I need to be able to read off the text written on the image using OCR technology.
As a system, using the text identified above, I want to return a search result of similar items connected to the name.
As a user, after picking the right product, I want to be able to see the nearest stores with their prices attached to the product.
As a user, after selecting my preferred store, I want to be able to navigate to the location of the store using the map or order the product online.
As a user, I want to be able to search manually for the product if an image isn’t available.
Work Flow / Information Architecture
User selects either the scan the product option or the “enter manually option” – the process for both options is much similar, but when the user selects scan the product, the camera screen would be launched from which the image can be taken, and the text is recognised using the OCR technology and will be fed to the search input.
After a product is searched, the app would check with the database if a product with a similar name is available or not, ask the user permission to access the location, and then display the results along with the distance.
After the user selects a store, then the app redirects him to Google Maps, showing the way to the store.
User can add Item to basket and check-out.
High Fidelity Prototype
The high-fidelity prototype was created using Figma and implemented the Figma prototyping tool. More pages were added to the original design including a basket for checking out.
Various overlays were implemented as well to foster a more interactive experience when using the prototype.
Implementation
To implement the application, Bubble, a new rising visual programming language technology, was chosen and proved very effective.
Bubble offers readily available functions, and adding features is much more convenient. Unlike traditional development languages such as C++, Bubble offers much more flexibility to the developers, allowing them to concentrate more on design and user experience.
An agile process was practised throughout the development process, which included collecting feedback from the target group and implementing relevant ones.
A database was first created and the UI and workflow of the application were designed. For implementing the ubiquitous context features that are location and camera, we used the following APIs, respectively.
For Camera:
OCR Space API: This API is useful in extracting the information from a picture and converting it into text.
For Location:
Geocoding: This API is useful for converting the address, which is in alphanumeric or string format, into latitude and longitude coordinates.
Places: This API is used to detect the place with manual alphabetical entry.
Geolocation: This API was used to ask the user’s permission to get their location details.
Maps JavaScript: This is used for displaying the map in the app.
The Time Zone: This is helpful in obtaining the time zones based on the location of the user.
User Study
Overview
A qualitative study was conducted as Budgie required qualitative user involvement to interview and test the prototype. The information was gathered through open-ended questions, which allowed interviewees to let know their opinions about Budgie as their concerns, experiences, and support. This approach made, instruments used, data collection and analysis are addressed in the below section.
Tools
Consent Form: Used to acquire consent from participants.
Background questionnaire: Used to obtain key background information
Task: The tasks are designed to test the prototype pages and functions.
Task performance Form: used to collect more in-depth observable quantitative and qualitative data.
Interview and feedback questionnaire: Used to obtain a more detailed understanding of the designed prototype.
Interactive prototype.
Task Completion Success Rate
Time spent on each task by the participants has been recorded in seconds, and the average time has been calculated per each task. Task 1 is observed to be finished in less time when compared to Task 2.
Participants
Due to time constraints, we were only able to conduct a usability testing session with four (4) participants.
Location
This study was performed online via Microsoft Teams as it was the most convenient for all parties involved. It was also most efficient in obtaining word-for-word descriptions in the form of the Microsoft Teams transcript function and a recorded version of the test.
Duration
Participants were given room to complete tasks at their pleasure and report their findings. They simply had to perform the following tasks
Scan a product and find other stores with lower prices for the product.
You are looking to find lower prices for “Quaker Oats”, Search for “Oats” and find stores with lower prices.
The duration of the study period was 5 days.
Findings
100% of the participants found it hard to complete Task 1 because the images were taking time to process. However, when asked to try using the upload feature, 75% of the participants could complete it because the images were easy to process.
100% of the participants found it easy to complete task 2.
The participants noted that with improvements, they could use the app because they see that it can help them save costs.
Time on Task (in secs)
From the results collected: the mean (The average Time on Task) was 20.75 secs.
The SUS scores obtained from Participants were –
P1 55.5, P2 67.5, P3 68.5, P4 57.3
Feedback
Improve the functionality of the scan product feature. On the search feature, an auto-complete feature for the search might be a better functionality instead, instead of having a separate page for the search.
Discussion and Evaluation
The main goal, to make a mobile app (application) with the functionality to give the output of the prices of the product entered, display the results and redirect users to google maps to show the location of the stores displayed, was achieved.
The app wast to return the results consisting of the number of stores present nearby, the price of that product in each store, the distance of those stores from the user’s present location and the option of redirecting to maps from our app.
There was a limitation in the number of stores included to just three, as inculcating more stores would have been strenuous and might deviate from the goal. Another minor drawback was that the API took a long time to detect text in a picture.
Future work
Even though Budgie is a product that can enter the market, there is a realisation that the project requires a few more extensive user studies and usability tests to provide a better user experience. There should be an include new features to the product so that it could be more meaningful and interactive.
Budgie has the potential to grow in the current market as it solves a real-world problem that hasn't been solved. Finding ways to generate income and making Budgie a self-sustainable product without depending on huge investors and financial institutions could prove useful.
Throughout the development of this project, I learnt to think about the ethical responsibilities and limitations when deciding on the type of solutions we arrive at in the real world as it would have a long-lasting impact on individuals and organisations.
The knowledge gained from this helped all involved to evaluate the designs and decisions before taking the next big step.