Team 41 Betty Liu Wai Lam Chintan Kathiriya

Team 41 Betty Liu Wai Lam Chintan Kathiriya -- Culver City -- Long Beach -- Campus Grocery Shopping Assistant Module CSCI 588 Project Status Review

Grocery Shopping Assistant Module n What is it? q An application designed to improve the grocery shopping experience for shoppers by offering features such as: n n n q Assumptions n n q Interactive advertisement Product information and locator Price comparison tool Recipe finder Shopping list The application runs on a device attached to the shopping cart The device has a touch screen monitor of size 8” by 7” Motivation n Prompted by our own and friends’ grocery shopping experiences and needs.

System Requirements 1 of 2 n The system shall provide a product information finder, product comparator, recipe finder, interactive advertisement and an interactive shopping list. n Product Information Finder q q q n Shall contain a search box and category selection as the searching criteria for the finder Shall have an on screen keyboard which inputs keys into the search box Shall return matching items with product description, product price and availability in the order of best unit price and option to see related products Shall provide alternative products if no matching is found Shall provide options to add products to a shopping or/and comparison list. Interactive Advertisement q Shall include products on sale or on promotion and sale description q Shall include the product’s description, sale price and duration of sale q Shall provide option to add products to a shopping and/or comparison list

System Requirements n Product Comparator q q q n Shall compare products by best unit price Shall compare selected products in the comparison list Shall display error page if products with different unit measurements are selected. Shall list results in the order of best unit price, with product name and price. Shall provide option to remove item from comparison list or to add to the shopping list Recipe Finder q q q n 2 of 2 Shall search for preloaded recipes Shall include ingredient and instructions for each recipe Shall provide option to add ingredients to shopping and comparison list Shopping List q q q Shall display products added to the list, including description and price. Shall provide capability to “check off” items from the list. Shall provide a 2 -D grocery store map displaying the location (aisle # and section) of the products that have not been “crossed off” in the list

Navigation map Home with introduction to the tool and short descriptions of the features Product Search with keyboard to enter search criteria Product Category provide matching product categories selection to limit search results Search results Recipe Product advertisement Product Comparator Comparison results Comparison Error Shopping List search results with description and price with keyboard to enter search criteria search results with recipe title recipe with ingredients and instructions with sale and promotional items list product to be compared list items in best unit price inform product cannot be compared lists items added and their locations on a map

User Analysis – User profile User is a regular grocery store shopper with little technical knowledge, and would use the application to ease their shopping experience n Pscychological Characteristics Knowledge and Experience Cognitive Style: Spatial/Intuitive Attitude: Neutral Motivation: Moderate Reading Level: 12 th grade + Type Skill: Low Education: High School System Experience: Novice Task Experience: Novice Application Experience: No similar system Native Language: English Use of other systems: Little or Non Computer Literacy: Low Job and Task Characteristics Frequency of use: Medium Primary training: None System Use: Discretionary Turnover: High Task Importance: Low Task Structure: Low Physical Characteristics Gender: Both Other Vision: Moderate Cooking Experience: Moderate Time availability: little Job function: Cook of the house

User Analysis – Dialog Styles n First Choice q Menu n Second Choices q q q Direct manipulation Natural language Fill-in forms Why? (in summary) q q Direct manipulation menu buttons as the chosen integrated style. Users are not technical or familiar with this type of system Dialog styles that are user friendly and easy to learn would be preferred Menu received the highest score in our dialog style analysis Direct manipulation, natural language and fill-in forms also received high scores in our analysis

User Analysis – Task Analysis of 2 Comparison Results Search and Comparison Product Tasks Customer Product Name Product Info Search Results Compare Products Add/Delete Products Product Info Repository Product Selection Prod Location and details Products Map Products 1 Product From List User Shopping List Products from list User Compare List

User Analysis – Task Analysis of 2 Recipe Search, Display Advertisement Tasks Request Customer Search Results Sale Items Find Sale Items Recipe/Ingredient name Search Recipe Search Criteria Recipe Repository Product Info Advertising Repository 2

User Analysis – Environment and I/O System operates: n in a device attached to the shopping cart n in a small device with limited memory and speed I/O Device: 8” by 7” touch screen monitor n Limited space n Easier for user to manage while shopping n Single unit means there are less things to break which would cause downtime

Summary Style Guide n General page layout q q n No browser scrolling is required for any pages. Any scrolling should be programmed on the page itself. No minimize or maximize options are available Background color is Green q n 1 of 2 Green represents vegetables Navigation panel is on the left hand side q q q Navigation panel contains all navigational buttons and in the same size for all pages Button background color - #FBEAA 4 Button font color – #F 68225 Font – Arial Narrow Must contain buttons that link to every major component of the application Button color changes when the user is on the component the button links to

Summary Style Guide n Buttons to perform major tasks on homepage q q q n q q Contains title of the task which is the same as the button name Title color is in white Font - Arial Back and Next control button on the footer q q q n have different colors Top part of the button contains an image – use of image relating to the task helps associate the action with the button Bottom part of the button contains a description Both image and description are clickable Font for description – Arial Narrow Header q n 2 of 2 background color – #F 68225 Button font color – #FBEAA 4 Font – Arial Narrow Main content section q q Has white background Uses a border to group all related content

Visual Design – Icons/Symbols n Checkbox q q n Color q q q n All screen background color is “green” to evoke images of fresh produce which is associated with grocery store. Color numbers are limited to green, peach, white and such matching neutral colors. User will be pushing cart and looking at the screen. Do not want to overwhelm users with too many color choices. Need to easily identify screen contents. The two types of navigational buttons use the same color but reverse background color and font color. It indicates the difference on the function of the button without introducing too many new colors. Buttons size q n A checkbox is often used for selecting items, even for non-technical users The icons clearly shows when an item is selected or not Size of the buttons is the main way users interact (touch) to navigate, therefore they need to be extra big for easy manipulation. Fonts q Fonts are pretty big in general because the screen is small and users may not have very good eyesight. Bigger fonts make it easier to read.

Homepage Design Considerations n n n Same background color as is used throughout the application for consistency Contains the same layout as the rest of the application Main content q q q n Clear description on the big buttons q n q Images are used in addition to description to associate the use of the functions Suitable for standalone application with small screen Navigation panel q q n Provide clear descriptions on all the main features of the application. So user does not have to guess what the application does. Image driven q n Contains 3 big buttons for user to navigate to other pages. They show the user what main features are provided for the application Uses a different background color to help group the main content from the navigation panel Uses different color for each main feature to distinguish the differences Provides links to all other pages. Contains some repetition of what the main buttons link to so the panel would be uniform among all pages. Company Logo q is on the top left corner so the customer knows this is a tool provided by the grocery store, but not from a particular store brand.

Page title has same name as button that links to this page Left navigation panel for this page uses a different color/deactivated On screen keyboard let user enter product name

Title specifies component and page description What user entered in previous page is shown here in quotes These links leads to diff search results

Search results with criteria from previous pages Alternating color for result set Option to add item to comparison or shopping list Provides description and images for each product Scroll bar provided if items won’t fit one page

Left navigation panel for this page uses a different color/deactivated Option to add item to shopping list Provide unit price information and sort item by unit price

Allows adding/removal to Shopping List. Store map showing items on shopping list with number-coded indicators.

Large keyboard for touch screen entry.

Recipes sorted into categories for easy browsing.

User can click get detailed ingredient product information.

Allows user to add items to Shopping or Comparison list. Sale prices labeled in red.

Comments Tools: n q q q Photoshop CS for designing images and buttons Frontpage, Dreamweaver, Textpad for web development W 3 C HTML validator Lessons: n q q Iterative process of color design. Sometimes what we think would look good doesn't. Concept ideas v. s. Implementation feasibility. Ideas are great but not as easy to implement. Plans for rest of semester n q q Week 1 after presentation n Implement rest of the screens n Implement keyboard feature Week 2 after presentation n Refine images, button sizes and layout n Implement all the links, add more description to pages. Week 3 after presentation n Refine color and start converting static pages to dynamic pages Week 4 after presentation n Finish converting static pages to dynamic pages. Link n q http: //www-scf. usc. edu/~bettyliu/GSA/homepage. html