A La Carte — CS 160 Fall 2016 Project

Grocery shopping just got easier

Grocery shopping is time-consuming, hectic, and overwhelming. Keeping track of how much you’re spending is nearly impossible, and there’s no good way to get a comprehensive picture of the nutritional content in your cart. Checkout requires waiting in line for a cashier to do cumbersome, repetitive unloading, scanning, and re-loading of every product.

A La Carte is here to help. Our all-in-one solution uses RFID technology on the rim of a wifi-enabled shopping cart to continuously keep track of everything in your cart. The A La Carte app then displays live data to help you watch your wallet and your weight. Finally, when you’re ready to check out, simply bring your phone to the register and have the cashier scan your A La Carte checkout report- no need to unload and scan every item individually.

In CS 160 Fall 2016, our team- Rohit Lalchandani, Caroline Chen, Lydia Gilbert, and Harry Li designed the companion app for A La Carte and implemented it using KinomaJS.

Design Process

Target Audience

Our target audience is shoppers who are conscious of cost and nutrition when grocery shopping, such as families and students who find it difficult to budget while navigating the complexities of dietary needs and healthy foods. However, using RFID technology to continuously track cart content leads to innovations any shopper would find useful, such as live price totals and a vastly expedited checkout process.

Early Low Fidelity Prototypes

We started our design process with three core tasks:

(1) Calorie total and detailed breakdown by category of food

(2) Running, accessible price total

(3) A product comparison feature.

Here is our first low-fidelity prototype that was based closely on early sketches:

With price and calorie average per-serving totals on the home page, the user could navigate to category breakdowns of each by clicking on the respective section in the home screen. They could also navigate to the product comparison feature or to their checkout report, which would generate a QR code scannable by cashiers or self-checkout machines.

We implemented this prototype in KinomaJS for testing purposes

User Testing and Early Iterations

Most of our user testing was done at Safeway in north Berkeley and Berkeley Bowl. We figured that there would be a representative population of shoppers who are concerned with price but also quality and nutrition at these grocers.

Our early user tests revealed that people were unexcited by the workflow of our product comparison feature. First, the users would put two items in their cart, and then choose the Product Compare feature from the home screen. They would be prompted to choose the two items they wanted to compare from lists of items in their cart, and then they could view an expandable list of nutritional data, shown below:

After testing this feature, most users felt that they would continue to manually examine packaging for nutritional information, because our workflow took more time and steps. We decided to scrap the feature and implement product search functionality instead, with an interactive store map.

Other user tests revealed that shoppers were highly interested in functions that speed up the shopping experience. We quickly shifted focus to make expedited checkout a core task, and to focus on product search to eliminate time spent wandering the store looking for elusive products.

Final Design

Our team decided to implement a significant workflow shift after initial user testing. Noticing that many apps no longer make use of a static home screen as a jumping off point to key features, we decided to get rid of our drab home screen, which had just been a list of dull numbers.

Knowing that shoppers should be able to glance quickly at A La Carte to check the status of their budget and nutrition, we created a dashboard with a dynamic, animated donut graph. This gives context and point of reference to a user’s current price total, instead of a raw number. Now, with a cursory glance, users’ eyes will be drawn to the pop of color indicating what percentage of their budget they’ve spent, and to the larger text that emphasizes the most important information on the screen.

We extended these changes to other functions, adding accent colors, dynamic charts, and eye-catching font to make the app easy to check quickly while keeping most of your attention devoted to shopping.

This also meant adding a navigation bar to access the other core tasks. This tested very well in later user tests, with people able to successfully complete tasks quickly and easily, with few questions.

We also implemented a splash screen with login and budget-setting functionality (below), and a pairing transition screen while the app connects with the physical shopping cart device (not shown). We implemented checkout functionality as well.

Reflections

Our group welcomed feedback and was eager to scrap particular aspects of our designs if the tested badly or we had better ideas. This willingness to iterate and improve made for an intuitive, sleek, and bright final design.

Looking forward, if we continue working on A La Carte, valuable changes we have considered include:

(1) increasing visibility of feedback for adding and removing items from the cart, such as with an affirmative notification (e.g. “Four bananas were added to your cart”)

(2) incentivizing grocery stores to invest in A La Carte carts by adding user loyalty benefits that encourage customer retention and attract new customers, such as promotions and rewards

(3) utilizing machine learning to customize and optimize a shopper’s experience given their past shopping habits and preferences

(4) considering alternative ways of scanning items without RFID compatibility, such as produce

Video

Github Repository

https://github.com/kerrorro/ALaCarte

UC Berkeley ‘17: Cognitive Science major, Computer Science minor

UC Berkeley ‘17: Cognitive Science major, Computer Science minor