Grocery Store Shopping Application - Interaction Design

Grocery Shopping Application
Interaction Design for Entertainment
03.22.2010

Prepared by Osagie Ogunbor

March 22, 2010
Page 2 of 45

Table of Contents
1.0 Purpose Statement 4
2.0 Heuristic Evaluation 5
2.1 Amazon Mobile Shopping Application 5
2.2 Vons Online Shopping Website 12

3.0 Audience 17
3.1 Target Audience 17
3.2 Personas 18

4.0 User Goals 19
5.0 User Scenarios 20
5.1 Scenarios 20
5.2 Use Case 21

6.0 Feature List 22
7.0 Interaction Model 23
7.1 Concept A 23
7.2 Concept B 25

8.0 Wireframes 26
8.1 Interactive Screen Wireframe 26
8.2 Mobile Phone Wireframe 38

Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010

March 22, 2010
Page 3 of 45

Revision History

Version Date Notes Author
1.0 03/01/2010 Included design rationale, section Osagie Ogunbor
purpose and refined wireframes.

2.0 03/08/2010 Included table of contents, Osagie Ogunbor
annotations and refined entire
document.


March 22, 2010
Page 4 of 45

1.0 Purpose Statement

The main purpose of my project is to offer access to a grocery store at anytime from both a mobile phone and an interactive refrigerator
screen. After the users make their purchase, the items will be delivered to them by the grocery store. The main platforms to be used
are an interactive refrigerator screen and a mobile phone. The primary target audience are parents who have busy work schedules.
Features include but are not limited to the ability to purchase groceries from your selected device, the ability to favorite several grocery
items, etc. The service will be available for a one time fee on your mobile device. Additionally, you can purchase your items if you
already have an interactive refrigerator screen.

Mobile Phone

Interactive Refrigerator Screen


March 22, 2010
Page 5 of 45

2.0 Heuristic Evaluation Notes:

Section Purpose This is a heuristic evaluation of Amazon.com mobile
shopping application. It can be downloaded for free
This section shows a detailed evaluation of the competitors’ user interface design. at the mobile phone application store.

Screen 1
1. Aesthetic and minimalist design
2.1 Amazon Mobile Shopping Application When the user accesses the application, the main
feature is the search box which is very visible
Screen 1 Screen 2 without any form of clutter.

1. Recognition rather than recall
Instructions for use of the system (Search Amazon.
1 com) is clearly visible.

1 Screen 2
1. User control and freedom
2 The user can either search by scanned barcodes,
photos or simply using the search box provided
above. This gives the users control in terms of how
they choose to search for their desired product.


March 22, 2010
Page 6 of 45

Heuristic Evaluation (Cont.) Notes:

Screen 3 Screen 4 This is a heuristic evaluation of Amazon.com mobile
at the mobile phone application store.
1 1
Screen 3
1 and 2. Visibility of system status
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.

Screen 4
2 2
1. Visibility of system status

2. Consistency and standards
The layout follows platform conventions by using a
tabular layout to display the products.


March 22, 2010
Page 7 of 45


1 1
Screen 5

Screen 6

2. Error prevention
2
The ensure the item is in stock before moving
forward thereby avoiding any error-prone conditions.

3. Match between system and the real world
The system speaks the user’s language with words
and familiar images rather than system-oriented
3 terms.
4
The user is provided with several options to match
their decisions.


March 22, 2010
Page 8 of 45


shopping application. It can be downloaded for free at the
mobile phone application store.
1 1
Screen 7
2 1 and 2. Visibility of system status
The system keeps the user informed about what exactly
is going on, through appropriate feedback.

Screen 8
3 1. Visibility of system status
2 The system keeps the user informed about what exactly
4
5 Instructions for use of the system should be visible.

The user is given an instructional cue to help in
providing the requested information

4. Error prevention
The option is unavailable for the user thereby
eliminating any error-prone conditions.

5. Help and documentation
If the user cannot remember the password, they can use
the helpful link.


March 22, 2010
Page 9 of 45


shopping application. It can be downloaded for free at the
mobile phone application store.

1 1
Screen 9
The system keeps the user informed about what exactly

Screen 10
2
2 The system keeps the user informed about what exactly


March 22, 2010
Page 10 of 45



1 1
Screen 11
2 1. Visibility of system status

2. Error prevention
2 The option is unavailable for the user thereby
3
The instructions are not very clear on what exactly
to change. After the system recognizes the user,
the user should see their saved address on Ama-
zon.com. If they do not have any saved address,
it should read “Enter shipping address” instead of
“change”.

Screen 12

2. Flexibility and efficiency of use
Although the system recognizes the users address,
the user can also change the address if they wish.


March 22, 2010
Page 11 of 45


1 1
Screen 11
1 and 2 Visibility of system status

Screen 12
2 The system keeps the user informed about what ex-

2 2. Error prevention
The option is unavailable for the user thereby

The instructions are not very clear on what exactly to
change. Initially, the user should see a default
3 shipping method. If they choose to change the meth-
od, it should read “Enter shipping speed”
instead of “change”.


March 22, 2010
Page 12 of 45


2.2 Vons Online Shopping Website
This is a heuristic evaluation of Vons Online
Shopping Website. Users can access the website by
going to www.vons.com.

Screen 1
Screen 1
Users can decide to use the serach feature if they
wish.
1
2. Consistency and standards
2
The main navigation is bold and visible.

3 and 4. Recognition rather than recall
Instructions for how use of the website is clearly
visible.

4
3


March 22, 2010
Page 13 of 45


Screen 2 This is a heuristic evaluation of Vons Online

Screen 2
1 The user constantly aware of their position on the
website because link on the global navigation chang-
es color.
2
2. Flexibility and efficiency of use
The user can use these links to tailor search results.

3 3. Recognition rather than recall
The user is able to recognize each item by using the
images provided.

4. Aesthetic and minimalist design
4 The website design in minimalist and important
information is relatively visible.


March 22, 2010
Page 14 of 45



Screen 3
1 The is constantly aware of their position on the
website because link on the global navigation
changes color.

A help link is provided incase the user needs
2 assistance.

3
The user can use these links to tailor search results.

4 5 The user can use these links to add or remove items
before buying.

5. Match between system and the real world
A familiar word is used rather than system-oriented
terms.


March 22, 2010
Page 15 of 45



Screen 4
1 and 2. User control and freedom
The use can add a message to the personal shopper
making it a more personalized experience.

2 3. User control and freedom
If the user wants to cancel the message, they have
the ability to do so.

1

3


March 22, 2010
Page 16 of 45



Screen 5
1 1. Match between system and the real world
The system uses familiar words, rather than system-
oriented terms.

Visual feedback is provided to indicate where the
user clicked.

2


March 22, 2010
Page 17 of 45

3.0 Audience
3.1 Target Audience

Section Purpose

This section shows the details of the target audience and their personality traits:

The primary target audience are parents who have busy work schedules. They do not have enough time after work to grocery shop
due to their hectic schedules. They seek an easier and more convenient way to grocery shop because they feel reluctant towards
accomplishing this task. The secondary target audience are male and female individuals who lack personal transportation to do their
own grocery shopping. They would rather place an order for delivery instead of carrying bulky groceries in public transportation.

Priority Audience Demographics Psychographic Behaviour

Primary Target: • Parents with 2 or more children • Technologically savvy • They will always make of use the product
Busy Parents • Age 35+ • Avid web users • Is seen as an early adaptor
• Cross economic/cultural/racial lines • Spend a lot of time with their children • They are loyal customers of products they consider
• University graduates • Very busy work schedules to be very useful on a daily basis
• High income household ($85,000+) • Stay home most weekends (working or leisure)
• Own 2 vehicles
• Live in a house

Secondary Target: • Single male and female individuals • Technologically savvy • They make use of the product occassionally
Individuals • Age 25+ • Avid web users depending on the amount of groceries they need
without personal • Cross economic/cultural/racial lines • Do not own a car • Is seen as an early adaptor
transportation • University graduates • Live in an apartment
• May still be attending graduate school
• Mid size income ($40,000+)


March 22, 2010
Page 18 of 45

Audience (Cont.)
3.2 Personas

PROFILE A PROFILE B
Computer skills: Computer skills:
Online shopping savvy: Online shopping savvy:

Name: Jennifer Simpson Name: John Reid
Age: 38 Age: 26
Education: College graduate Education: Graduate student
Occupation: Accountant Occupation: Part time laboratory assistant
Income: $62,000 per annum Income: $32,000 per annum
Marital Status: Married Marital Status: Single
Children: Three children (2 boys and 1 girl) Children: No children
Hobbies: Reading online blogs about parenting, watching Oprah, online shopping, Hobbies: Exercise, researching online and reading science related books
cooking and photography. Reason for using this product: He does not have a car and can not carry his
Reason for using this product: Jennifer is unable to go to the grocery store due items in a public transport. He lives near his school and laboratory campus but
to her hectic work and home schedule. the grocery store is too far for him.


March 22, 2010
Page 19 of 45

4.0 User Goals
Section Purpose

This section shows all the possible goals the user can accomplish while using the program:

Some the user goals include but are not limited to:
• Users want to know how long it will take the groceries to be delivered.
• Users want to know if items are in stock or out of stock.
• Users want to order their groceries easily and quickly.
• Users want to know when their groceries expire.
• Users want to shop for their groceries.
• Users want to make their grocery list.


March 22, 2010
Page 20 of 45

5.0 User Scenarios
5.1 Scenarios
Section Purpose

This section describes the users’ experience when performing specific tasks:

Task 1 : Access and sync phone shopping list with refrigerator grocery list.
Persona: Jennifer
Scenario: Jennifer accesses the shopping application on her mobile phone and she is greeted with a welcome screen. Jennifer then
clicks on the grocery list option. The next screen shows all the options available for Jennifer on the grocery list section. Depending on
what platform she accesses the application from, the sync option will either read “sync with home” or “sync with phone”. Jennifer clicks
on “sync with home” option and a progress bar pops up to let her know the action is taking place. When the action is completed, Jennifer
can now see her fully synced grocery list.

Task 2: Place an order for already stored grocery items.
Persona: John
Scenario: John accesses the shopping application on his mobile phone and he is greeted with a welcome screen. John then clicks on
the grocery list option. The next screen shows all the options available for Jennifer on the shopping list section. These options include
add, delete, sync with home, buy items etc. John clicks on the buy items and he is asked to confirm if he wants to buy all the items on
his list or selected items. He clicks on all items and is prompted to enter his delivery address. Since John has used the application in
the past, the system recognizes his address so he can either choose to ship to the same address or enter another address. John click
on the same address and he is asked to enter a delivery time. When John enters his information and clicks “submit”, he is shown a
summary page where he can confirm all his information or edit them if he wishes. He clicks on confirm and completes his task.

Task 3: Place an order for a grocery items.
Persona: Jennifer
Scenario: Jennifer accesses the application on her fridge and she is greeted with a welcome screen. Jennifer then clicks on the shop
option where she can then decide to shop by searching each aisle or just search for the individual product. Jennifer chooses shop by
aisle and all aisles are shown. She selects her aisle and choose her product form the aisle. A cart is shown on the right side of the page
which shows Jennifer all her items so far. Jennifer clicks to buy all items and she is asked to enter her secret code. After Jennifer enters
the code, she is confirms her address, enters her delivery time and date. She is shown a summary page where she can confirm or edit
all her information. She clicks on confirm and completes her task.

March 22, 2010
Page 21 of 45

User Scenarios (Cont.)
5.2 Use Case

Persona: Jennifer Simpson.

Purpose: Jennifer wants to shop on the refrigerator screen, get a confirmation message about her delivery status, add an item
to another shopping list and finally sync her phone shopping list with her refrigerator shopping list.

Pre-conditions: Jennifer has an account on the program.

Typical course of action:
1. On the refrigerator the Jennifer browses the shopping aisles.
2. She creates a shopping list by adding each item from the shopping aisles.
3. She then purchases the newly made shopping list and receives a confirmation number.
4. A few hours later, she receives a message on her cell phone saying her purchase was shipped.
5. After pressing OK, she decides to add a new item to the shopping list for her next purchase and sync the list with home.


March 22, 2010
Page 22 of 45

6.0 Feature List

Section Purpose

This section lists the all features available on the program:

Grocery List : Ability to add, delete and sync grocery items between the mobile phone and interactive refrigerator.
Delivery time: Ability to check when their groceries will be delivered.
Scanner: Ability to scan each item into the refrigerator’s system.
Items to expire: Ability to view items and their expiration dates.
Savings: Ability to view all available savings and discounts.
Search: Ability to search for grocery items.
Shop: Ability to shop for grocery items.


March 22, 2010
Page 23 of 45

7.0 Interaction Model
7.1 Concept A

Design Rationale

The main menu options located at the top of the screen includes shop, shopping list, deliveries and scan items. These are the most
important features and they are present on each screen. Important information displayed under each option is placed at the center of
the page to maintain the user’s focus at all times.

1. Home State 2. Browse Options

LOGO WELCOME MESSAGE AND INSTRUCTIONS LOGO INSTRUCTIONS

SHOP SHOPPING LIST DELIVERIES SCAN ITEM
AISLE SEARCH
YOU ARE SHOPPING BY AISLES
AISLE SEARCH

ADVERTISED
COUPONS RECIPES
SPECIALS
AISLE NAME AISLE NAME AISLE NAME AISLE NAME

DETAILS

PREV HOME

This is the first screen the user sees when they access the interactive screen on When Jennifer clicks on shop by aisles, she sees the aisle selection page. A carousel
their refrigerator. This screen includes the main navigation namely shop, shopping navigation system shows her all the aisles she can browse through. As Jennifer
list, deliveries and scan item. The user can click on “shop” to buy an item, “shopping focuses on a particular aisle, the image enlarges with a short description of things
list” to view the already made list or to add to it, “deliveries” to view orders and scan she can find in that aisle.
item to scan each item into the system for expiration dates. In this case, Jennifer
clicks on the shop option to buy her grocery items and she can choose to shop by
using the search feature or by aisle.


March 22, 2010
Page 24 of 45

Interaction Model (Cont.)
3. Sub Aisle Category 4. Shopping Cart

LOGO INSTRUCTIONS LOGO INSTRUCTIONS

AISLE SEARCH
YOU ARE SHOPPING BY AISLES AISLE SEARCH AISLE NAME > SUB CATEGORY
YOUR CART

AISLE NAME

SUB NAME SUB NAME SUB NAME SUB NAME SUB NAME SUB NAME SUB NAME

PREV HOME PREV HOME

After Jennifer selects an aisle, the aisle name and image appear above a smaller This page shows Jennifer all the items in that sub aisle. She can select add the items
carousel which shows all the sub categories in that aisle. The sub aisle in focus is to the shopping list or just buy it. Whenever Jennifer clicks on an item for purchase,
also enlarged. Jennifer can browse though the aisle by using this carousel arrows. it appears in the shopping cart located at the right side of the screen.


March 22, 2010
Page 25 of 45

Interaction Model (Cont.)
7.2 Concept B

Design Rationale

The main menu options located at the left side of the screen includes shop, shopping list, deliveries and scan items. Whenever a user
clicks on an option, the menu opens on the right side of the main navigation. This design is a more simple approach to navigating
through the program. The us always aware of their position throughout the program.

1. Home State 2. Browse Options

LOGO WELCOME MESSAGE AND INSTRUCTIONS LOGO INSTRUCTIONS

SHOP BY SEARCHING SHOP BY SEARCHING
SHOPPING LIST BY AISLE SHOPPING LIST BY AISLE AISLE NAME
DELIVERIES DELIVERIES AISLE NAME

SCAN ITEM SCAN ITEM AISLE NAME
AISLE NAME
AISLE NAME
AISLE NAME
AISLE NAME
AISLE NAME
ADVERTISED AISLE NAME
COUPONS RECIPES
SPECIALS AISLE NAME

When the user accesses the program, they are greeted with a welcome screen which Jennifer clicks on shop by aisle and a secondary navigation appears on the right
includes a short message on how to use the program. The main vertical navigation side of the main vertical navigation. Jennifer can use this sub menu to look for
is located on the left side of the screen. The options include shop, shopping list, whatever aisle she is interested in.
deliveries and scan item. Jennifer clicks on the shop option and she can either shop
by searching or by aisle selection.


March 22, 2010
Page 26 of 45

8.0 Wireframes Notes:

8.1 Interactive Screen Wireframe
This is home screen the user sees when the access
1. Home State the program. It consists of the logo, a welcome
message, main navigation, help link and image links
to other sections in the application.
1 2
LOGO WELCOME MESSAGE AND INSTRUCTIONS 1. Welcome Message and Instructions
This message includes a welcome message to the
user and gives them short instructions on how to use
3 the application.
2. Help Link
This is a help link which the user can use at anytime
if help is needed.
4
3. Global Navigation System (GNS)
This is the Global Navigation System present through
out the program. The GNS allows the user access to
all the contents in each section of theapplication.

4. Home Image Links
The user can tap on this link to view current coupons
and specials for grocery items and also read recipes
for several dishes.
COUPONS ADVERTISED RECIPES
SPECIALS


March 22, 2010
Page 27 of 45

Wireframes (Cont.) Notes:

This is the shop option drop down menu which
2. Shop Option shows up on the home screen.

1. Instructions
1 INSTRUCTIONS This section provides instructional copy related to
LOGO the content on the current screen. This instruction
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod changes as the user browses through the
application.
2 SHOP SHOPPING LIST DELIVERIES SCAN ITEM 2. Active Link
This indicates that the link is active.
3 BY AISLES BY SEARCHING

3. Browse Option
When the user taps on shop, a drop down option
appears below the shop link which gives the user
options to browse for their groceries.

COUPONS ADVERTISED RECIPES
SPECIALS


March 22, 2010
Page 28 of 45


This screen appears when the user taps on the “BY
3. Search Option SEARCHING” option.

1. “SEARCH FOR YOUR ITEM” Header
Header indicates the current section of the
LOGO INSTRUCTIONS
application.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
2. Input Box
This input box is provided for the user’s input
3. Keypad
BY AISLES BY SEARCHING
1 SEARCH FOR YOUR ITEM The user can use the keypad to search for the
grocery item by taping on each key.

2 BUTTER ENTER 4. Footer Menu
This footer menu appears when the user navigates
from the home screen. It includes a ”prev” link to take
the user back to the previous screen and a “menu”
3 Q W E R T U I O P link to go back to the home screen.

A S D F G H J K L

DEL Z X C V B N M SPACE

4 PREV HOME


March 22, 2010
Page 29 of 45


4. Aisle Selection

LOGO INSTRUCTIONS



CANDY SODA COOKIES FRUITS

DIARY
Butter, milk, cheese, eggs

PREV HOME


March 22, 2010
Page 30 of 45


5. Sub Category Selection

LOGO INSTRUCTIONS



DIARY

MILK CHEESE EGGS YOGURT
BUTTER

PREV HOME


March 22, 2010
Page 31 of 45


6. Item Details/Shopping Cart

LOGO INSTRUCTIONS


DAIRY > BUTTER
SHOPPING CART
Challenge butter - 8Oz Land O Lakes butter - 8Oz
$2.99 $3.99 Challenge butter - 8Oz
2 0 $2.99 (2)
Savings Savings EDIT DELETE

ADD TO LIST BUY ADD TO LIST BUY

Nadia butter - 8Oz Anchor butter - 8Oz
$4.99 $5.99
0 0
Savings Savings
SUBTOTAL: $5.98
BUY ALL

PREV HOME


March 22, 2010
Page 32 of 45


7. Item Details/Shopping Cart

LOGO INSTRUCTIONS


DAIRY > BUTTER
SHOPPING CART
Challenge butter - 8Oz Land O Lakes butter - 8Oz
$2.99 $3.99 Challenge butter - 8Oz
2 0 $2.99 (2)
Savings Savings EDIT DELETE


Nadia butter - 8Oz Anchor butter - 8Oz
$4.99 $5.99
0 0
Savings Savings
SUBTOTAL: $5.98
BUY ALL

PREV HOME


March 22, 2010
Page 33 of 45


8. Secret Code

LOGO INSTRUCTIONS


CHOOSE ITEM SHIPPING ADDRESS DELIVERY TIME CONFIRM

ENTER

Q W E R T U I O P

A S D F G H J K L

DEL Z X C V B N M SPACE

PREV HOME


March 22, 2010
Page 34 of 45


9. Shipping Address

LOGO INSTRUCTIONS



YOUR SAVED ADDRESS
1234 VENICE BLVD, #88
LOS ANGELES, CA 90019

SHIP TO ADDRESS

PREV HOME


March 22, 2010
Page 35 of 45


10. Delivery Date/Time

LOGO INSTRUCTIONS



CHOOSE DELIVERY DATE CHOOSE DELIVERY TIME YOUR DELIVERY DATE AND TIME

12 05 PM AUGUST 18TH, 2010

01 12:05PM
02
03
CONFIRM
04
05
06

PREV HOME


March 22, 2010
Page 36 of 45


11. Confirm Information

LOGO INSTRUCTIONS



DELIVERY ADDRESS ITEMS FOR DELIVERY YOUR DELIVERY DATE AND TIME

1234 VENICE BLVD, #88 Challenge butter - 8Oz AUGUST 18TH, 2010 CONFIRM
LOS ANGELES, CA 90019 $2.99 (2) 12:00PM

EDIT EDIT EDIT

PREV HOME


March 22, 2010
Page 37 of 45


LOGO INSTRUCTIONS


THANK YOU MESSAGE
ORDER NUMBER: 0025

PLEASE VIEW YOUR DELIVERIES TO TRACK THIS ORDER

PREV HOME


March 22, 2010
Page 38 of 45


8.2 Mobile Phone Wireframe
This is the main screen of the mobile phone. The
1. Phone Menu Screen home screen depends on what phone has. The
2. Message Notification
Google G1 phone is used in this instance.

Phone Menu Screen
1. New Message Indicator
1 1 New Message 3G 9:00AM 3G 9:00AM
An indicator informs the user when she receives a
Your Notifications message about the deliveries.

2 1 1 New Message 2. Phone Home Screen
This is the home screen of the mobile phone
(dependent on the type of mobile phone).

Message Notification
1. Message
When the user taps on the message indicator, they
can then view the full message.

Videos Browser Music Weather


March 22, 2010
Page 39 of 45


Message Indicator
3. Message Notification 4. Delivery Confirmation 1. Active Link
The user click on the message indicator to view the
message. This represents an active link.

Delivery Confirmation
1. Help Link
3G 9:00AM 3G 9:00AM
This is a help link which the user can use at anytime
Your Notifications LOGO
1 if help is needed.

1 1 New Message 2. Main Menu Link
This is a link to the main menu of the application.
2 MAIN MENU

JENNIFER’S DELIVERIES 3. User’s Name
3 Displays the user’s name on the screen.

YOUR ORDER HAS SHIPPED
4 ORDER NUMBER:
4. Order Summary
0025
A summary of the order is shown which includes the
DELIVERY ADDRESS: order number, address and time.
1234 VENICE BLVD, #88
LOS ANGELES, CA 90019
DELIVERY TIME: 5. Footer Links
12:00PM The user can view his full order by tapping “VIEW
AUGUST 18TH, 2010
ORDER” or simply tap “OK” to confirm the message.
Thereafter, she is taken to the phone’s home screen.

5 VIEW ORDER OK


March 22, 2010
Page 40 of 45


This is the home screen of the mobile application.
5. Home Screen
Home Screen
1. Welcome Message
This is a welcome message which includes the
user’s name.
3G 9:00AM 3G 9:00AM
2. Main Menu
LOGO LOGO
This the main menu of the application. When the
user click on each option, they are taken to another
1 WELCOME JENNIFER WELCOME JENNIFER screen which displays the requested information.

3. Active Link
This indicates an active link on the main menu.
MAIN MENU MAIN MENU
2 SHOP SHOP

SHOPPING LIST 3 SHOPPING LIST

DELIVERIES DELIVERIES

SCAN ITEMS SCAN ITEMS


March 22, 2010
Page 41 of 45


6. Shopping List

3G 9:00AM 3G 9:00AM

LOGO LOGO

MAIN MENU MAIN MENU

JENNIFER’S SHOPPING LIST JENNIFER’S SHOPPING LIST

CURRENT SHOPPING LIST CURRENT SHOPPING LIST

NEW SHOPPING LIST NEW SHOPPING LIST


March 22, 2010
Page 42 of 45


7. Shopping List Items

3G 9:00AM 3G 9:00AM

LOGO LOGO

MAIN MENU MAIN MENU

SYNC WITH HOME SYNC WITH HOME

Quantity Item Quantity Item
2 Brown Eggs X 2 Brown Eggs X

3 Knudsen Milk X 3 Knudsen Milk X

4 Oranges X 4 Oranges X

New Item New Item

SAVE ITEMS BUY ITEMS SAVE ITEMS BUY ITEMS


March 22, 2010
Page 43 of 45


8. Edit Shopping List

3G 9:00AM 3G 9:00AM
LOGO LOGO

MAIN MENU MAIN MENU



5 App 5 Apples



March 22, 2010
Page 44 of 45


9. Syncing Lists

3G 9:00AM 3G 9:00AM

LOGO LOGO

MAIN MENU MAIN MENU



SYNCING IN PROGRESS

5 Apples X 5 Apples X



March 22, 2010
Page 45 of 45


10. Sync Confirmation

3G 9:00AM 3G 9:00AM

LOGO LOGO

MAIN MENU MAIN MENU



SYNCING COMPLETE
4 Oranges 4 Oranges X

5 Apples X 5 Apples X



Grocery Store Shopping Application - Interaction Design

More Related Content

Viewers also liked (7)

Similar to Grocery Store Shopping Application - Interaction Design (18)

Recently uploaded (20)

Grocery Store Shopping Application - Interaction Design