Your SlideShare is downloading. ×
Grocery Shopping ApplicationInteraction Design for Entertainment03.22.2010Prepared by Osagie Ogunbor
March 22, 2010                                                                                              Page 2 of 45Ta...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                     Page 6 ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                           P...
March 22, 2010                                                                                                          Pa...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                             Page 12 of 45He...
March 22, 2010                                                                                           Page 13 of 45    ...
March 22, 2010                                                                                                       Page ...
March 22, 2010                                                                                          Page 15 of 45Heuri...
March 22, 2010                                                                                          Page 16 of 45Heuri...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                          Pa...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
March 22, 2010                                                                                                            ...
Upcoming SlideShare
Loading in...5
×

Grocery Store Shopping Application - Interaction Design

1,939

Published on

Grocery Store Shopping Application (Sitemap, Wireframes, Personas, Heuristic Evaluations and Interaction Models)
Platform/media: Interactive Refrigerator and Mobile Phone
Work done: Concept and User Experience Design

Published in: Design, Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,939
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Grocery Store Shopping Application - Interaction Design"

  1. 1. Grocery Shopping ApplicationInteraction Design for Entertainment03.22.2010Prepared by Osagie Ogunbor
  2. 2. March 22, 2010 Page 2 of 45Table 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. 3. March 22, 2010 Page 3 of 45Revision HistoryVersion Date Notes Author1.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. 4. March 22, 2010 Page 4 of 451.0 Purpose StatementThe main purpose of my project is to offer access to a grocery store at anytime from both a mobile phone and an interactive refrigeratorscreen. After the users make their purchase, the items will be delivered to them by the grocery store. The main platforms to be usedare 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 groceryitems, etc. The service will be available for a one time fee on your mobile device. Additionally, you can purchase your items if youalready have an interactive refrigerator screen. Mobile Phone Interactive Refrigerator Screen Osagie Ogunbor Interaction Design for Entertainment ogumbz@yahoo.com Winter 2010
  5. 5. March 22, 2010 Page 5 of 452.0 Heuristic Evaluation Notes:Section Purpose This is a heuristic evaluation of Amazon.com mobile shopping application. It can be downloaded for freeThis section shows a detailed evaluation of the competitors’ user interface design. at the mobile phone application store. Screen 1 1. Aesthetic and minimalist design2.1 Amazon Mobile Shopping Application When the user accesses the application, the main feature is the search box which is very visibleScreen 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. 6. March 22, 2010 Page 6 of 45Heuristic 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. 7. March 22, 2010 Page 7 of 45Heuristic 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. 8. March 22, 2010 Page 8 of 45Heuristic 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. 9. March 22, 2010 Page 9 of 45Heuristic 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. 10. March 22, 2010 Page 10 of 45Heuristic 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. 11. March 22, 2010 Page 11 of 45Heuristic 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. 12. March 22, 2010 Page 12 of 45Heuristic 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 standards2 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. 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 status1 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. 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 status1 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. 15. March 22, 2010 Page 15 of 45Heuristic 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. 16. March 22, 2010 Page 16 of 45Heuristic 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. 17. March 22, 2010 Page 17 of 453.0 Audience3.1 Target AudienceSection PurposeThis 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 shopdue to their hectic schedules. They seek an easier and more convenient way to grocery shop because they feel reluctant towardsaccomplishing this task. The secondary target audience are male and female individuals who lack personal transportation to do theirown 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. 18. March 22, 2010 Page 18 of 45Audience (Cont.)3.2 PersonasPROFILE A PROFILE B Computer skills: Computer skills: Online shopping savvy: Online shopping savvy:Name: Jennifer Simpson Name: John ReidAge: 38 Age: 26Education: College graduate Education: Graduate studentOccupation: Accountant Occupation: Part time laboratory assistantIncome: $62,000 per annum Income: $32,000 per annumMarital Status: Married Marital Status: SingleChildren: Three children (2 boys and 1 girl) Children: No childrenHobbies: Reading online blogs about parenting, watching Oprah, online shopping, Hobbies: Exercise, researching online and reading science related bookscooking and photography. Reason for using this product: He does not have a car and can not carry hisReason 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 butto 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. 19. March 22, 2010 Page 19 of 454.0 User GoalsSection PurposeThis 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. 20. March 22, 2010 Page 20 of 455.0 User Scenarios5.1 ScenariosSection PurposeThis section describes the users’ experience when performing specific tasks:Task 1 : Access and sync phone shopping list with refrigerator grocery list.Persona: JenniferScenario: Jennifer accesses the shopping application on her mobile phone and she is greeted with a welcome screen. Jennifer thenclicks on the grocery list option. The next screen shows all the options available for Jennifer on the grocery list section. Depending onwhat platform she accesses the application from, the sync option will either read “sync with home” or “sync with phone”. Jennifer clickson “sync with home” option and a progress bar pops up to let her know the action is taking place. When the action is completed, Jennifercan now see her fully synced grocery list.Task 2: Place an order for already stored grocery items.Persona: JohnScenario: John accesses the shopping application on his mobile phone and he is greeted with a welcome screen. John then clicks onthe grocery list option. The next screen shows all the options available for Jennifer on the shopping list section. These options includeadd, 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 onhis list or selected items. He clicks on all items and is prompted to enter his delivery address. Since John has used the application inthe past, the system recognizes his address so he can either choose to ship to the same address or enter another address. John clickon the same address and he is asked to enter a delivery time. When John enters his information and clicks “submit”, he is shown asummary 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: JenniferScenario: Jennifer accesses the application on her fridge and she is greeted with a welcome screen. Jennifer then clicks on the shopoption where she can then decide to shop by searching each aisle or just search for the individual product. Jennifer chooses shop byaisle 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 pagewhich shows Jennifer all her items so far. Jennifer clicks to buy all items and she is asked to enter her secret code. After Jennifer entersthe code, she is confirms her address, enters her delivery time and date. She is shown a summary page where she can confirm or editall her information. She clicks on confirm and completes her task. Osagie Ogunbor Interaction Design for Entertainment ogumbz@yahoo.com Winter 2010
  21. 21. March 22, 2010 Page 21 of 45User Scenarios (Cont.)5.2 Use CasePersona: Jennifer Simpson.Purpose: Jennifer wants to shop on the refrigerator screen, get a confirmation message about her delivery status, add an itemto 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. 22. March 22, 2010 Page 22 of 456.0 Feature ListSection PurposeThis 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. 23. March 22, 2010 Page 23 of 457.0 Interaction Model7.1 Concept ADesign RationaleThe main menu options located at the top of the screen includes shop, shopping list, deliveries and scan items. These are the mostimportant features and they are present on each screen. Important information displayed under each option is placed at the center ofthe 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 HOMEThis 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 carouseltheir refrigerator. This screen includes the main navigation namely shop, shopping navigation system shows her all the aisles she can browse through. As Jenniferlist, 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 thingslist” 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, Jenniferclicks on the shop option to buy her grocery items and she can choose to shop byusing the search feature or by aisle. Osagie Ogunbor Interaction Design for Entertainment ogumbz@yahoo.com Winter 2010
  24. 24. March 22, 2010 Page 24 of 45Interaction 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 HOMEAfter 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 itemscarousel 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. 25. March 22, 2010 Page 25 of 45Interaction Model (Cont.)7.2 Concept BDesign RationaleThe main menu options located at the left side of the screen includes shop, shopping list, deliveries and scan items. Whenever a userclicks on an option, the menu opens on the right side of the main navigation. This design is a more simple approach to navigatingthrough 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 NAMEWhen 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 rightincludes 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 foris 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 shopby searching or by aisle selection. Osagie Ogunbor Interaction Design for Entertainment ogumbz@yahoo.com Winter 2010
  26. 26. March 22, 2010 Page 26 of 458.0 Wireframes Notes:8.1 Interactive Screen Wireframe This is home screen the user sees when the access1. 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. 27. March 22, 2010 Page 27 of 45Wireframes (Cont.) Notes: This is the shop option drop down menu which2. 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. 28. March 22, 2010 Page 28 of 45Wireframes (Cont.) Notes: This screen appears when the user taps on the “BY3. 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. 29. March 22, 2010 Page 29 of 45Wireframes (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. 30. March 22, 2010 Page 30 of 45Wireframes (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. 31. March 22, 2010 Page 31 of 45Wireframes (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. 32. March 22, 2010 Page 32 of 45Wireframes (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. 33. March 22, 2010 Page 33 of 45Wireframes (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. 34. March 22, 2010 Page 34 of 45Wireframes (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. 35. March 22, 2010 Page 35 of 45Wireframes (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. 36. March 22, 2010 Page 36 of 45Wireframes (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. 37. March 22, 2010 Page 37 of 45Wireframes (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. 38. March 22, 2010 Page 38 of 45Wireframes (Cont.) Notes:8.2 Mobile Phone Wireframe This is the main screen of the mobile phone. The1. 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. 39. March 22, 2010 Page 39 of 45Wireframes (Cont.) Notes: Message Indicator3. 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. 40. March 22, 2010 Page 40 of 45Wireframes (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. 41. March 22, 2010 Page 41 of 45Wireframes (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. 42. March 22, 2010 Page 42 of 45Wireframes (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. 43. March 22, 2010 Page 43 of 45Wireframes (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. 44. March 22, 2010 Page 44 of 45Wireframes (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. 45. March 22, 2010 Page 45 of 45Wireframes (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

×