Anna Chambers Portfolio
Description:
For this project, I created an interface for a smart shopping cart. Although this interface is not physically implemented it is designed to be a tablet mounted to the front of a shopping cart to assist users with their grocery shopping experience. The main design requirements for this interface were determined by a series of interviews that sought to identify what users would find helpful and what they didn't currently like about their shopping experience. The main requirements identified were access to a store map, assistance finding items, shop-as-you-go, dynamically showing relevant coupons, and budget tracking.
I created two interfaces to achieve these goals. The primary interface, which is intended to be mounted to the front of the shopping cart, consists of three tabs: Home, Map, and Checkout. The Home tab has a search bar that allows the user to search for items, determine what aisle it is in, and add them to their list. When an item is added to the user's list it is plotted for them on the Map tab. The Home screen also has a budget tracker. The user can set their budget and a scale will raise as their total increases to show how much they have left. Also on the Home screen, three collapsible components show the user's cart, list, and coupons based on the aisle they are in. The Map tab plots the items that are on the user's list and shows a recommended path and current location. The Checkout screen shows the items in the cart, coupons for their current items, and any applicable warnings. The user can also pay directly from the checkout tab achieving the shop-as-you-go functionality. The secondary interface is intended to be a mobile app that is connected to the primary interface. On the secondary device, the user can create a shopping list, see relevant coupons, and cart. All of the things done on the secondary device automatically update the primary device, and vice-versa.
Video Demo:
Sketches:
Designing Alternatives
B-level Sketches
C-level Sketches: Prototype Interface Design
A-level Sketches
Screenshots and Breakdown:
Primary Device
Home Tab
The Home tab consists of three main sections. The first section is a set of three collapsible components which allow the user to see their shopping trip at a glance. The first collapsible shows the items in their cart, discounts, and the overall total. The second collapsible shows the items on their shopping list and allows them to add to the list. The last collapsible show coupons based on the shoppers current aisle. The next section of the home tab is the search bar. The search function allows the user to find items, add them to their cart, and find what aisle they are in. The last section is a budget scale. This allows the user to set a overall budget and show them visually how much of it they have spent.
Map Tab
The map tab shows the overall layout of the store. As the user adds items to their list they are automatically plotted on the map tab and a route is drawn for the shopper. The user can choose to either show or hide the aisle numbers. As the user moves throughout the store and add items to their cart the current aisle updates and the items are removed. The user can see where they are in comparison to the items they need to pick up with the circle icon that moves as they do. Since the interface is a prototype and not actually physically implemented, there is an "add to cart" button outside the region of the main interface that simulates the action of the user moving throughout the store and picking up items.
Checkout Tab
The Checkout tab shows three main things, items in the users cart, warnings, and relevant coupons. The coupon section of the checkout tab only shows the coupons that apply to the item in the users cart. There are two possible warnings that could appear in the "Warnings" section, Over Budget and Missing Items. The user can click the "Details" button on either warning to get more information. In the cart section the user can change the quantities of the items they have and see the discounts applied and total. I made this tab under the assumption that the physical shopping cart would have a card reader allowing the user to pay directly from the interface.
Secondary Device
List Tab
The secondary device consists of three pages. The first page allows the user to create their shopping list from their mobile device and have it automatically updated on the primary device. As shown in the right screenshot, if the user tries to add an item the is out of stock a warning will popup.
Coupon Tab
The next page shows the user relevant coupons and allows them to apply them. Like on the Home Tab of the primary device the coupons are dynamically based on location as the user moves throughout the store.
Cart Tab
The final page show the items currently in the users cart and allows them to update the quantities. The cart tab also will automatically update as the primary device updates and show any applied coupons.
Requirements:
1. The user wants to have access to relevant coupons while shopping.
2. The user wants “shop as you go” functionality.
3. The user wants to have access to a store map.
4. The user wants help finding where items are in comparison to them.
5. The user should not be surprised by the final total of their items.
6. The user should be able to use a dynamic shopping list while shopping.
7. The user should have the ability to import their shopping list from their phone.
8. The user should be able to change their mind and remove an item from their cart.
9. Future Goal: The system should notify the user when they have passed an item on their list.
10. Future Goal: The user wants to see how long they have spent in the store.
11. Future Goal: The user should be able to set a standard budget that is automatically set each time.
12. Future Goal: The shopping cart should be able to handle paying with cash.
13. Future Goal: There should be a button to fix wheels that have gotten stuck.
14. Future Goal: There should be filtering options when searching for products.
Interview Findings:
I gained lots of good insight through doing these interviews. There were two new design requirements that were revealed from the interviews. First, the interface should alert the user when they have passed an item on their list. The first person I interviewed expressed that the most frustrating thing about going to the grocery store is passing by something and needing to go all the way back to get it. This requirement could be expanded to include a noise or vibration so that it would be obvious even if the user was not actively looking at the interface. The second added requirement was the user should be able to make their shopping list on their phone and send it to the cart interface. The second person I interviewed said they would not be likely to use the feature that plots the course if they had to manually type in all the things they needed while at the store. This requirement will be satisfied through my B and A level designs. I also learned through all three interviews that showing time elapsed and relevant coupons are wanted features, but the least important in comparison to the others.
Assumptions:
-
The shopping cart has a GPS locator that is accurate enough to determine which aisle the customer is currently in.
-
The shopping cart has a way to scan items (iPad camera or external scanner attached)
-
The shopping cart UI system has access to a dynamically updated inventory.
-
The shopping cart UI system has a database of active coupons.
-
The shopping cart has a credit card reader and functionality to check the user out.
-
All shoppers using the shop as you go functionality are paying with credit/debit card.
Future Steps:
-
Path Finder: Currently the map plots the items as they come in and doesn't determine the most efficient path for the shopper. If I were to continue this project I would develop a path finder algorithm that would dynamically reroute the shopper based on the items they add to their list and their current location.
-
Location based notifications: One of the desired functionalities discovered during the interviews was that users wanted to be notified when they passed an item on their list. Since this mock interface lacks actually physical location data this was not possible to implement.
-
Profiles with saved settings: Another thing I would expand upon if I were to continue this project would give the user the ability to actually log in and save data like recently purchased and last used budget.