Hi, my name is Claire. I'm a 35 year old mother of two young children. I work full time as a marketing manager and my husband also works full time. We're both very busy professionals with hectic schedules. Shopping for groceries is such a chore that I dread having to do every week. I wish there was an easier way!
Computer skills: Advanced computer and mobile device user. Always up to date on the latest apps and gadgets.
Occupation: Marketing Manager for a software company. Works long hours during the week.
Family: Married with two children, ages 5 and 7. Husband also works full-time as an engineer.
Home: We live in a suburban
2. 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
3. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
4. 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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
5. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
6. March 22, 2010
Page 6 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 3 Screen 4 This is a heuristic evaluation of Amazon.com mobile
shopping application. It can be downloaded for free
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
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
2. Consistency and standards
The layout follows platform conventions by using a
tabular layout to display the products.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
7. March 22, 2010
Page 7 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 5 Screen 6 This is a heuristic evaluation of Amazon.com mobile
shopping application. It can be downloaded for free
at the mobile phone application store.
1 1
Screen 5
1. Visibility of system status
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
Screen 6
1. Visibility of system status
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
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
4. User control and freedom
The user is provided with several options to match
their decisions.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
8. March 22, 2010
Page 8 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 7 Screen 8 This is a heuristic evaluation of Amazon.com mobile
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
is going on, through appropriate feedback.
4
2. Recognition rather than recall
5 Instructions for use of the system should be visible.
3. Recognition rather than recall
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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
9. March 22, 2010
Page 9 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 9 Screen 10 This is a heuristic evaluation of Amazon.com mobile
shopping application. It can be downloaded for free at the
mobile phone application store.
1 1
Screen 9
1 and 2. Visibility of system status
The system keeps the user informed about what exactly
is going on, through appropriate feedback.
Screen 10
1 and 2. Visibility of system status
2
2 The system keeps the user informed about what exactly
is going on, through appropriate feedback.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
10. March 22, 2010
Page 10 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 11 Screen 12 This is a heuristic evaluation of Amazon.com mobile
shopping application. It can be downloaded for free
at the mobile phone application store.
1 1
Screen 11
2 1. Visibility of system status
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
2. Error prevention
2 The option is unavailable for the user thereby
eliminating any error-prone conditions.
3
3. Recognition rather than recall
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
1. Visibility of system status
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
2. Flexibility and efficiency of use
Although the system recognizes the users address,
the user can also change the address if they wish.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
11. March 22, 2010
Page 11 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 13 Screen 14 This is a heuristic evaluation of Amazon.com mobile
shopping application. It can be downloaded for free
at the mobile phone application store.
1 1
Screen 11
1 and 2 Visibility of system status
The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
Screen 12
1. Visibility of system status
2 The system keeps the user informed about what ex-
actly is going on, through appropriate feedback.
2 2. Error prevention
The option is unavailable for the user thereby
eliminating any error-prone conditions.
3. Recognition rather than recall
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”.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
12. March 22, 2010
Page 12 of 45
Heuristic Evaluation (Cont.) Notes:
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
1. Help and documentation
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
13. March 22, 2010
Page 13 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 2 This is a heuristic evaluation of Vons Online
Shopping Website. Users can access the website by
going to www.vons.com.
Screen 2
1. Visibility of system status
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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
14. March 22, 2010
Page 14 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 3 This is a heuristic evaluation of Vons Online
Shopping Website. Users can access the website by
going to www.vons.com.
Screen 3
1. Visibility of system status
1 The is constantly aware of their position on the
website because link on the global navigation
changes color.
2. Help and documentation
A help link is provided incase the user needs
2 assistance.
3. User control and freedom
3
The user can use these links to tailor search results.
4. User control and freedom
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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
15. March 22, 2010
Page 15 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 4 This is a heuristic evaluation of Vons Online
Shopping Website. Users can access the website by
going to www.vons.com.
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
16. March 22, 2010
Page 16 of 45
Heuristic Evaluation (Cont.) Notes:
Screen 5 This is a heuristic evaluation of Vons Online
Shopping Website. Users can access the website by
going to www.vons.com.
Screen 5
1 1. Match between system and the real world
The system uses familiar words, rather than system-
oriented terms.
2. Visibility of system status
Visual feedback is provided to indicate where the
user clicked.
2
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
17. 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+)
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
18. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
19. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
20. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
21. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
22. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
23. 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
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
24. March 22, 2010
Page 24 of 45
Interaction Model (Cont.)
3. Sub Aisle Category 4. Shopping Cart
LOGO INSTRUCTIONS LOGO INSTRUCTIONS
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
25. 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.
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
26. 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.
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
27. 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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
28. March 22, 2010
Page 28 of 45
Wireframes (Cont.) Notes:
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
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
29. March 22, 2010
Page 29 of 45
Wireframes (Cont.) Notes:
4. Aisle Selection
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
BY AISLES BY SEARCHING
YOU ARE SHOPPING BY AISLES
CANDY SODA COOKIES FRUITS
DIARY
Butter, milk, cheese, eggs
PREV HOME
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
30. March 22, 2010
Page 30 of 45
Wireframes (Cont.) Notes:
5. Sub Category Selection
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
BY AISLES BY SEARCHING
YOU ARE SHOPPING BY AISLES
DIARY
MILK CHEESE EGGS YOGURT
BUTTER
PREV HOME
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
31. March 22, 2010
Page 31 of 45
Wireframes (Cont.) Notes:
6. Item Details/Shopping Cart
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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
ADD TO LIST BUY ADD TO LIST BUY
SUBTOTAL: $5.98
BUY ALL
PREV HOME
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
32. March 22, 2010
Page 32 of 45
Wireframes (Cont.) Notes:
7. Item Details/Shopping Cart
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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
ADD TO LIST BUY ADD TO LIST BUY
SUBTOTAL: $5.98
BUY ALL
PREV HOME
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
33. March 22, 2010
Page 33 of 45
Wireframes (Cont.) Notes:
8. Secret Code
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
34. March 22, 2010
Page 34 of 45
Wireframes (Cont.) Notes:
9. Shipping Address
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
CHOOSE ITEM SHIPPING ADDRESS DELIVERY TIME CONFIRM
YOUR SAVED ADDRESS
1234 VENICE BLVD, #88
LOS ANGELES, CA 90019
SHIP TO ADDRESS
PREV HOME
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
35. March 22, 2010
Page 35 of 45
Wireframes (Cont.) Notes:
10. Delivery Date/Time
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
CHOOSE ITEM SHIPPING ADDRESS DELIVERY TIME CONFIRM
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
36. March 22, 2010
Page 36 of 45
Wireframes (Cont.) Notes:
11. Confirm Information
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
CHOOSE ITEM SHIPPING ADDRESS DELIVERY TIME CONFIRM
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
37. March 22, 2010
Page 37 of 45
Wireframes (Cont.) Notes:
LOGO INSTRUCTIONS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
SHOP SHOPPING LIST DELIVERIES SCAN ITEM
THANK YOU MESSAGE
ORDER NUMBER: 0025
PLEASE VIEW YOUR DELIVERIES TO TRACK THIS ORDER
PREV HOME
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
38. March 22, 2010
Page 38 of 45
Wireframes (Cont.) Notes:
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
39. March 22, 2010
Page 39 of 45
Wireframes (Cont.) Notes:
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
40. March 22, 2010
Page 40 of 45
Wireframes (Cont.) Notes:
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
41. March 22, 2010
Page 41 of 45
Wireframes (Cont.) Notes:
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
42. March 22, 2010
Page 42 of 45
Wireframes (Cont.) Notes:
7. Shopping List Items
3G 9:00AM 3G 9:00AM
LOGO LOGO
MAIN MENU MAIN MENU
JENNIFER’S SHOPPING LIST JENNIFER’S SHOPPING LIST
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
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
43. March 22, 2010
Page 43 of 45
Wireframes (Cont.) Notes:
8. Edit Shopping List
3G 9:00AM 3G 9:00AM
LOGO LOGO
MAIN MENU MAIN MENU
JENNIFER’S SHOPPING LIST JENNIFER’S SHOPPING LIST
SYNC WITH HOME SYNC WITH HOME
Quantity Item Quantity Item
4 Oranges X 4 Oranges X
5 App 5 Apples
SAVE ITEMS BUY ITEMS SAVE ITEMS BUY ITEMS
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
44. March 22, 2010
Page 44 of 45
Wireframes (Cont.) Notes:
9. Syncing Lists
3G 9:00AM 3G 9:00AM
LOGO LOGO
MAIN MENU MAIN MENU
JENNIFER’S SHOPPING LIST JENNIFER’S SHOPPING LIST
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
SYNCING IN PROGRESS
4 Oranges X 4 Oranges X
5 Apples X 5 Apples X
SAVE ITEMS BUY ITEMS SAVE ITEMS BUY ITEMS
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010
45. March 22, 2010
Page 45 of 45
Wireframes (Cont.) Notes:
10. Sync Confirmation
3G 9:00AM 3G 9:00AM
LOGO LOGO
MAIN MENU MAIN MENU
JENNIFER’S SHOPPING LIST JENNIFER’S SHOPPING LIST
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
SYNCING COMPLETE
4 Oranges 4 Oranges X
5 Apples X 5 Apples X
SAVE ITEMS BUY ITEMS SAVE ITEMS BUY ITEMS
Osagie Ogunbor Interaction Design for Entertainment
ogumbz@yahoo.com Winter 2010