Smart Shopping Cart - Project 2
Kevin Long, Jack Detrick, Anne Ning, Jonah Carter
The smart object we chose to work on was a smart shopping cart.
We specifically chose to focus our efforts on a cart targeted at grocery stores for this initial prototype.
Our smart cart has functionality to import your grocery list from the grocery store’s preexisting smartphone app. It then shows the user a map and a route to follow to get all their items.
As the user checks items off their list, they get added to their virtual “cart”. Then when the user proceeds to checkout they can review their virtual cart and pay for their items right at the cart.
Design Stage
We began by brainstorming and gathering our requirements.
For this project, we wanted to make something that was ergonomic and intuitive for the users. This led us to consider design components such as an advanced scanner that monitors all products taken in and out of the cart, and make the navigation and shopping list UI easy to use and straightforward by placing the list next to the map, which allows a seamless transition between selecting and editing list items and locating them in the store.
Some of our initial ideas involved a 3D navigation interface.
We quickly realized however that although that was a cool idea it was not going to be feasible to implement in the time we had. We iterated on that a few times and came up with a similar design with a 2D map that still communicated all the same details.
We then needed to iterate on that design further to include a storyboard sketch in which we showcased how the user would interact and progress through our app.
Finally we needed to create a hybrid sketch of how our interface would work on an actual cart.
The App
The app works by linking your list of items from your personal profile, the one you use to login, and generates a path for you to follow to get to those items. It also gives you directions as to where on the shelf those items are. The “magic” is that it scans the barcode of the item as you put it into the cart. After this you can checkout and pay right at the cart. No need for checkout lines.
The pages are as follows:
Login Page
This page consists of a QR code on the left which connects the grocery app on your phone to the shopping cart, allowing a quick and easy way to load your shopping list for navigation. Otherwise, users can login with their username and password. If they don’t have an account (or don’t want to log into it), users can simply click the “No thanks” button on the bottom.
For testing purposes, clicking the QR code, Login button, or the “No thanks” line will take you to the next page of the application.
Shopping Cart Page
This page’s layout has the map you follow on the left side, the grocery list in the middle, and a static image of the shopping cart on the right. The map is supposed to automatically tracks your movement, leading you to the first item on the list. When you arrive at the first item, you can check off the item as needed. When you’re finished you can push the “Checkout now” button. This will take you to the payment page, where the items you’ve checked out will be added to the list for purchase.
For testing, select the “Next Step” button and the map will update as it follows the path to the item. You can click on the items to strikethrough them (which add them to the purchase list), and clicking “Checkout now” will take you to the payment page.
Payment Page
The X buttons and Add Item fields are not present in the hosted version of this project. We ran into merge conflicts with little time to fix the code, and so this section was commented out of the payment page component. This functionality has been restored to show how it should look if there was enough time to fix the conflicts.
The payment page consists of a review section where you can view your items listed for purchase, their quantity, cost, and total price. On the right you can tap to pay with a card, or you can select “I only have cash” where an employee would help you complete a cash transaction.
For testing purposes we added X buttons to eliminate items from the list, as well as an add item option where you can add items not on your shopping list. This was implemented as the “magic” of the shopping cart would automatically scan items as they were added or taken out of the cart. This would add the item to the purchase list or remove it, respectively.
The “Cancel Transaction” will take you back to the login page.
Implementation Details
We implemented our app using Svelte (without SvelteKit).
Beyond our initial sketches we finalized the look and feel of the application using Figma and used Blender for our hybrid sketch/3D model.
Our screens are managed from one main entrypoint which allows us to easily share/bind data between screens.
Our map component uses a combination of Svelte/HTML and SVGs to create what essentially consists of a bunch of modular tiles that can be rendered according to user interactions. In the real cart the user would progress simply by moving the cart and adding items that would be scanned, however for the sake of this demo app we have implemented a “Next Step” button that can instead be used to make progress along the route.
Future Work
If we were to actually implement this on a real cart we would have to first of all hook up a backend and/or database.
Additionally, due to some of our time constraints we had to hardcode some of the items and routes. In the future we would like to implement an actual pathfinding algorithm that could adapt when new items are added to the route.
Finally, we had some additional testing functionalities like adding and removing an item from the cart that would normally be handled by the cart automatically that we had code for but ran into last minute merge conflicts and didn’t have time to add to the hosted app.
