A list for your wrist
For this project, we wanted to create a device to help parents with young children while shopping. We went to several grocery stores and supercenters and talked to parents about their needs. We found that they had problems with checkout, keeping their kid entertained, and navigating the store. The final product is a Apple Watch application that allows for easy navigation and list updating in the store.
During market research, we found that parents had trouble finding all of their items in the store and keeping a grocery list. Some users had a list on their phone (through a default notes app), a list on a piece of paper, or relied on their memory or always got the same items. Those with a list mostly wrote it as they thought of the items. A few actually took the time to order it based on their path through the store if they were familiar enough with the layout. However, users commented that this method was tedious and when they remembered to pick up another item, they still had to walk all around the store. Parents also had problems keeping track of their list with their child. They would either forget things or their child would be playing with their phone.
We brainstormed many types of devices, but decided to create an app for an existing device for time restrictions and marketability. We ended up experimenting with both Google Glass and Apple Watch (head and wrist wearables available to us). And through user feedback and literature, found that Apple Watch was a better choice for usability and the social stigma of Google Glass.
The Google Glass concept had a subtle compass navigation and focused on the grocery list. Items were added with voice and categorized by aisle.
The Apple Watch concept focused on navigation through the store and had several levels of screens. The first had a map of the store showing where all items were located, the second had the entire list, another had coupons for the items on the list, and all items were removed or added through voice.
After getting feedback about the first Apple Watch iteration, we started prototyping with Marvel, an interactive prototyping application. We wanted to have more realistic animations and interactions, but found that they did not work on the watch, only a phone or computer. While the user could click anywhere to advance the prototype, we were able to see what items they expected to be interactive.
The main page of the app had a compass-navigation with the user as the center. You can swipe to change aisles. Clicking on the aisle label takes you to the list, which is organized with accordion boxes. Using force touch, a gesture used on Apple Watch to bring up menus, gives you an option to add an item or view checked off items. Adding is done through voice and removing by swiping across an item.
We met with 3 participants at a local grocery store to test this iteration. One participant had 2 young kids with her. We asked 6 initial questions:
- How familiar are you with this grocery store?
- How familiar are you with iOS?
- How familiar are you with Apple Watch?
- How comfortable are you with using Siri in public?
- How often do you grocery shop?
- What do you normally do to keep track of the things you need to buy?
Then we asked them to complete a series of tasks that utilized the features of our concept. These included adding an item, removing an item and undoing it, and navigating to an item. We visited the store before hand to make sure the app appeared like it knew where all the user’s items were. Then, we asked 5 follow up questions:
- Did anything on the interface distract you from your task?
- Could the introduction of any additional feature have helped you find what you were looking for?
- What feature was intuitive to follow?
- What was the most helpful feature for the task?
- What was the most relevant design on the interface?
We found that even those familiar with Apple Watch had difficulty navigating through our app and understanding the use of the menu. This concept used a compass-like navigation system to direct the user to their next item on their list. Even though we could show an animation of how it might work, it was hard for participants to imagine using it without it actually working.
Our third concept was also in Marvel due to ease of use. We discovered that most shoppers stick to the same grocery store and already know the basic layout, so we made the navigation less directional and obtrusive.
Only the aisles are included in this version, which can be viewed together or separately. Adding items and viewing the checked off ones is still similar to the previous concept, as we did not want to change too many things at once.
We tested this concept with the same questions and tasks. Our results showed that we should definitely rethink the force touch menu, but users really liked the easy aisle based categorization. Some even commented that they already organize their list this way (something we had not heard even after talking to several shoppers), and this would help speed up the process a lot.
We prototyped our final concept in Framer.js which simulated the Apple Watch interface on the computer. The final version was similar to our third concept, but we removed the force touch menu and having the checked off items in another page. Now, there is just a “+” at the top to add through voice and items that are checked moved to the bottom of the list and can be unchecked or swiped to be deleted.
Intelligent Navigation | Aisle-Based Categories | On-The-Go Editing
The idea is that a user would add the majority of their items on their phone, but the application on the Apple Watch gives a parent somewhat hands-free access to their list while shopping. While our focus was parents, this Rist could be used by anyone looking for an easy way to keep track of their grocery list and find the items in the store. In the future, the app could suggest frequently added items, include recipes that add ingredients to your list, or advertise coupons for certain brands when you arrive at that item on your list.
“All Aisles” shows all the items on your list at once, perfect for short lists or shoppers who know the layout of the store. The icons next to each item are color coded to the aisle and also have the aisle number.
To cross off items, just tap anywhere on the item. It will be checked off and moved to the bottom of the list, just incase you change your mind.
Adding new items is done by voice on the watch app. Clicking the “+” in the top left corner will activate Siri so you can say your item and confirm. The app will automatically identify which aisle the item is in and place it accordingly in your list.