SlideShare una empresa de Scribd logo
1 de 45
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.




      Osagie Ogunbor                                                                      Interaction Design for Entertainment
      ogumbz@yahoo.com                                                                                            Winter 2010
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Más contenido relacionado

Destacado

Design sprint slideshare
Design sprint slideshareDesign sprint slideshare
Design sprint slideshareFaren faren
 
RETAIL PLANNING, CASE STUDIES
RETAIL PLANNING, CASE STUDIESRETAIL PLANNING, CASE STUDIES
RETAIL PLANNING, CASE STUDIESSandra Draskovic
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprintBruno Mendes
 
Retail design and planning or How to design GREAT STORE
Retail design and planning or How to design GREAT STORERetail design and planning or How to design GREAT STORE
Retail design and planning or How to design GREAT STORESandra Draskovic
 
Data Flow Diagram Example
Data Flow Diagram ExampleData Flow Diagram Example
Data Flow Diagram ExampleKaviarasu D
 
Retail store layout,design and display
Retail store layout,design and displayRetail store layout,design and display
Retail store layout,design and displayPrithvi Ghag
 

Destacado (7)

Design sprint slideshare
Design sprint slideshareDesign sprint slideshare
Design sprint slideshare
 
RETAIL PLANNING, CASE STUDIES
RETAIL PLANNING, CASE STUDIESRETAIL PLANNING, CASE STUDIES
RETAIL PLANNING, CASE STUDIES
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
 
Data Flow Diagram
Data Flow DiagramData Flow Diagram
Data Flow Diagram
 
Retail design and planning or How to design GREAT STORE
Retail design and planning or How to design GREAT STORERetail design and planning or How to design GREAT STORE
Retail design and planning or How to design GREAT STORE
 
Data Flow Diagram Example
Data Flow Diagram ExampleData Flow Diagram Example
Data Flow Diagram Example
 
Retail store layout,design and display
Retail store layout,design and displayRetail store layout,design and display
Retail store layout,design and display
 

Similar a Grocery Shopping App Review

Designing a High Quality User Experience for Widgets
Designing a High Quality User Experience for WidgetsDesigning a High Quality User Experience for Widgets
Designing a High Quality User Experience for WidgetsVodafone developer
 
These ui ux design trends in 2022 will shape the mobile app development
These ui ux design trends in 2022 will shape the mobile app developmentThese ui ux design trends in 2022 will shape the mobile app development
These ui ux design trends in 2022 will shape the mobile app developmentMoon Technolabs Pvt. Ltd.
 
Creating engaging web experiences with SharePoint
Creating engaging web experiences with SharePointCreating engaging web experiences with SharePoint
Creating engaging web experiences with SharePointIntergen
 
Top 6 UI/UX Trends to follow in 2022
Top 6 UI/UX Trends to follow in 2022Top 6 UI/UX Trends to follow in 2022
Top 6 UI/UX Trends to follow in 2022AnjuR21
 
"Android" mobilių programėlių kūrimo įvadas
"Android" mobilių programėlių kūrimo įvadas"Android" mobilių programėlių kūrimo įvadas
"Android" mobilių programėlių kūrimo įvadasTadas Jurelevičius
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstWebExpo
 
UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3 UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3 JOHN Hutchings
 
India now the largest mobile advertising market in Asia Pacific
India now the largest mobile advertising market in Asia PacificIndia now the largest mobile advertising market in Asia Pacific
India now the largest mobile advertising market in Asia PacificInMobi
 
Social CRM,Prem Kumar Aparanaji, Evangelist Social CRM, Cognizant
Social CRM,Prem Kumar Aparanaji, Evangelist Social CRM, CognizantSocial CRM,Prem Kumar Aparanaji, Evangelist Social CRM, Cognizant
Social CRM,Prem Kumar Aparanaji, Evangelist Social CRM, CognizantIndia Social
 
Social crm, prem kumar aparanaji, evangelist social crm, cognizant
Social crm, prem kumar aparanaji, evangelist social crm, cognizantSocial crm, prem kumar aparanaji, evangelist social crm, cognizant
Social crm, prem kumar aparanaji, evangelist social crm, cognizantIndia Social
 
Digital Pen Coursework Project Spring 2009
Digital Pen Coursework Project Spring 2009Digital Pen Coursework Project Spring 2009
Digital Pen Coursework Project Spring 2009ruhma
 
Mobile Device as a Smart Metering Display
Mobile Device as a Smart Metering DisplayMobile Device as a Smart Metering Display
Mobile Device as a Smart Metering DisplayAlexander Lobunets
 
UX Joburg: Mobile UX Workshop
UX Joburg: Mobile UX WorkshopUX Joburg: Mobile UX Workshop
UX Joburg: Mobile UX WorkshopRob Enslin
 
Future Trends in Bot Development Services.pdf
Future Trends in Bot Development Services.pdfFuture Trends in Bot Development Services.pdf
Future Trends in Bot Development Services.pdfEllocent Labs
 
UID_AZY_COMP1650
UID_AZY_COMP1650UID_AZY_COMP1650
UID_AZY_COMP1650Aung Zay Ya
 

Similar a Grocery Shopping App Review (17)

Designing a High Quality User Experience for Widgets
Designing a High Quality User Experience for WidgetsDesigning a High Quality User Experience for Widgets
Designing a High Quality User Experience for Widgets
 
These ui ux design trends in 2022 will shape the mobile app development
These ui ux design trends in 2022 will shape the mobile app developmentThese ui ux design trends in 2022 will shape the mobile app development
These ui ux design trends in 2022 will shape the mobile app development
 
Creating engaging web experiences with SharePoint
Creating engaging web experiences with SharePointCreating engaging web experiences with SharePoint
Creating engaging web experiences with SharePoint
 
Top 6 UI/UX Trends to follow in 2022
Top 6 UI/UX Trends to follow in 2022Top 6 UI/UX Trends to follow in 2022
Top 6 UI/UX Trends to follow in 2022
 
"Android" mobilių programėlių kūrimo įvadas
"Android" mobilių programėlių kūrimo įvadas"Android" mobilių programėlių kūrimo įvadas
"Android" mobilių programėlių kūrimo įvadas
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
 
UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3 UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3
 
India now the largest mobile advertising market in Asia Pacific
India now the largest mobile advertising market in Asia PacificIndia now the largest mobile advertising market in Asia Pacific
India now the largest mobile advertising market in Asia Pacific
 
Social CRM,Prem Kumar Aparanaji, Evangelist Social CRM, Cognizant
Social CRM,Prem Kumar Aparanaji, Evangelist Social CRM, CognizantSocial CRM,Prem Kumar Aparanaji, Evangelist Social CRM, Cognizant
Social CRM,Prem Kumar Aparanaji, Evangelist Social CRM, Cognizant
 
Social crm, prem kumar aparanaji, evangelist social crm, cognizant
Social crm, prem kumar aparanaji, evangelist social crm, cognizantSocial crm, prem kumar aparanaji, evangelist social crm, cognizant
Social crm, prem kumar aparanaji, evangelist social crm, cognizant
 
Digital Pen Coursework Project Spring 2009
Digital Pen Coursework Project Spring 2009Digital Pen Coursework Project Spring 2009
Digital Pen Coursework Project Spring 2009
 
Android Design
Android DesignAndroid Design
Android Design
 
Mobile Device as a Smart Metering Display
Mobile Device as a Smart Metering DisplayMobile Device as a Smart Metering Display
Mobile Device as a Smart Metering Display
 
UX Joburg: Mobile UX Workshop
UX Joburg: Mobile UX WorkshopUX Joburg: Mobile UX Workshop
UX Joburg: Mobile UX Workshop
 
Future Trends in Bot Development Services.pdf
Future Trends in Bot Development Services.pdfFuture Trends in Bot Development Services.pdf
Future Trends in Bot Development Services.pdf
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
UID_AZY_COMP1650
UID_AZY_COMP1650UID_AZY_COMP1650
UID_AZY_COMP1650
 

Último

Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 

Último (20)

Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 

Grocery Shopping App Review

  • 1. Grocery Shopping Application Interaction Design for Entertainment 03.22.2010 Prepared by Osagie Ogunbor
  • 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