FamiliarFoods Spec FINAL - Michigan State Universityreyno343/wra420/FamiliarFoods_Spec_FINAL.pdf ·...

FAMILIAR FOODS Functional Specification: Familiar Foods mobile application Version 1.0 Created by: Stephen Anders Katie Dobruse Andrea Reynolds

Anders, Dobruse, & Reynolds 2

1. GENERAL INFORMATION 1.1 Purpose and Scope The purpose of this functional specification document is to serve as the established blueprint for the design and implementation of the Familiar Foods mobile application Version 1.0. This functional specification document will contain information on Familiar Foods mobile application as it is designed and created for the language translations of grocery store foods. Our app is aimed to help people find familiar foods in an unfamiliar place, through the use of a Smartphone camera, retail SKU codes, and API translations. General Comments The initial idea of Familiar Foods is derived from a Michigan State University student’s unfortunate grocery shopping experience. The MSU student was an international student and could not speak or read English very well. At a Lansing grocery store, he misguidedly purchased and consumed cat food, mistaking the American package for tuna. With this very extreme and unfortunate event, we questioned whether other social injustices similar to this occurred to other international people. 1.2 System Description and Justification

1.2.1 INTENDED AUDIENCE

The Familiar Foods mobile application will target grocery store shoppers who do not speak the store’s primary language. The mobile retail application will provide the necessary translation of a grocery store product by using the customer’s Smartphone camera to scan the product’s SKU code.

1.2.2 NEED FOR APPLICATION


Figure 1 The graph above, shown as Figure 1, documents the behaviors of international students while shopping for groceries. During our initial research, we were able to observe six Michigan State University international students while shopping for groceries at a Lansing Meijer’s. All six students had very poor English-language skills. From this observation, we gathered that the majority of thier time shopping was spent walking or examining the products. This observation is stated in Figure 1, indicated by the red and blue bars. Our early research efforts identified a need for technology to demystify the grocery shopping experience, especially for those shopping in foreign countries. 1.2.3 SOLUTIONS APPLICATION WILL PROVIDE

The Familiar Foods mobile application allows any foreign person to easily translate food labels (specifically dietary information) and helps navigate in stores for a specific food item, overall creating a much simpler shopping experience.

2. DESIGN OVERVIEW 2.1 Design Choices and Justifications

2.1.1 SCREEN ELEMENTS AND PLACEMENTS The first view of the application to appear on the user’s screen is the Language Center page that directly moves to the Sign Up page then moves directly to


Homepage. The three pages are shown below in order the order the user views them. They are labeled accordingly; Language Center: Figure 2, Sign Up: Figure 3, and Homepage: Figure 4. Starting each function from the Language Center page to Sign Up page to Homepage is an important design choice because it signals to the user a pattern of actions in the application. It is important to have a redundancy of actions in a mobile application for faster and easier navigation for the user. Repetitious paths like the first two Familiar Foods pages will allow the user to learn and remember behaviors of the technology in a more efficient way.

Language Center Sign Up Homepage 2.1.2 GRAPHICS/ICONS There are many graphics and icons used in the Familiar Foods mobile application. The graphics and icons used are simple and recognizable. This is important due to the large and culturally diverse audience the Familiar Foods mobile application will have. The icons used in Homepage, shown below in Figure 3, are internationally known icons.

Homepage

• Settings is represented by the mechanical gear icon.

• Scan Item is represented by a bar code. Bar codes are universally acknowledged to be related to/located on a physical product.

• Find In Store is represented by a map with

compass markings. Maps and compasses connote locating or location of something.

• Similar Foods is represented by cup filled with

liquid (drink) and food object that could represent hot dog, hamburger, or sandwich depending on user’s cultural interpretation.


2.1.3 COLORS AND CULTURAL RESTRICTIONS Because of the large audience the Familiar Foods mobile application intends to have, we had to be cautious when choosing color choices. This is because for many colors can invoke different cultural meanings depending on the country. The Familiar Foods mobile application uses the colors of dark gray and a royal blue. We realize that grey can be used as a neutral because of its position between the technology neutral colors of white and black. However, the royal blue choice is based upon the need for visual interest as well as its neutrality. However, due to the need of more usability testing, we were unable to fully research color schemes and their relations to international cultures and conformities. We expect to conduct more definite research for later versions of the Familiar Food application. Our goal for color and design choice is to remain as neutral as possible. It is imperative the design and color choice to agree with an international audiences’ taste, and most importantly, conform to the user’s lifestyle. 2.1.4 SKU CODES Instead of using the standard bar code scanning methodology, Familiar Foods mobile app uses the SKU code or numbers listed underneath the bar code on a food item. Making the food product’s SKU code an integral part of our system is because SKU codes are linked to more product data than the bar code. By using the SKU codes, we are utilizing an untapped data system (otherwise used for Supply Chain Management) as a tool access more product related information and in turn bettering the lives of people.

3. ACTIVITIES 3.1 User Activities of Mobile Application Listed directly below, is a current and transformed action flow diagram. In the Current Scenario users must search for a product then they must examine the product without aid. It is a continual loop because the process of searching and examining can go on for an extended period of time. In the Transformed Scenario all interaction is mediated through the application. This augmented process allows the user to more quickly and efficiently reach the checkout because all information is tailored directly to the user.


Listed below are the screenshots taken from the main functions of the Familiar Foods mobile application prototype Version 1.0. Notice, the yellow highlighted areas of the screenshots are where the application is clickable/interactive. We have broken the two main functions down two separate views, titled respectively View 1 and View 2. 3.1.1 TRANSLATING PRODUCT LABELS: VIEW 1 View 1 provides a view into one of the main functions of the Familiar Foods mobile application. Sequence 1 is the direct translation function. In this view, the user sees the beginning tri-pages, then is directed to choose Scan Item button, takes a picture of SKU code, and then view the translation of the food item.

VIEW 1


Another helpful way to observe View 1 is by listing them in the numerical order that the actions will be completed. 1) Language Center page: User chooses his/her native language

a. After choosing language choice, all text from application will be translated into chosen language

2) Sign Up page: User signs up or signs in to Familiar Foods application;

selects “Sign Up” button

3) Homepage: User chooses Scan Item button (second button from the top)

4) Camera Photo: User takes photo of product SKU code

5) Nutritional Translation page: User can view item’s nutritional information—all translated to his preferred language

View 1 of Familiar Foods allows the user to immediately answer his questions regarding important food information—whether it be “how many calories is in this product?” or “does this product contain milk?”

3.1.1.1 Nutrition Page to Homepage From the Nutritional Translation page, shown at the very end of View 1, the user has multiple options at his fingertips. One option is to go from the Nutritional Translation page to the Homepage. The Homepage is represented as house in the top left corner of the Nutritional Translation Page. The sequence of this action is shown below in the figure below.

Nutrition Translation Homepage

Going from the Nutritional Translation page to the Homepage gives the user a choice on what action to complete next.


3.1.1.2 Nutrition Page to Add to List page Another option from the Nutrition Translation page that the user can select is clicking the “Add to List” icon. The user will then be directed to a page where he has the option to add the item that was scanned to his list. This list is supposed to resemble a grocery list or a notepad. The sequence of actions from Nutrition Translation to List is shown below.

Nutrition Translation Add to List

The idea to this idea is that the foreign shopper may want to remember this item for the future, so the grocery list or library feature is a key component to customizing Familiar Foods to each user.

3.1.1.3 Nutrition Page to Scan Page The third option offered from the Nutrition Translation Page is to return back to the Camera Photo page. If you refer back to View 1, you will be able to see that the Camera Photo page is used directly before the Nutrition Translation page.

Nutrition Translation Camera


Having the option to return back to this page is an important feature for the user because it allows them to keep shopping with relative ease. If the user were have another question about another type of food, is is easy to navigate back to the Camera Photo page.

3.1.2 FIND PRODUCT IN STORE: VIEW 2 View 2 is the secondary main function of the Familiar Foods mobile application. View 2, or the Find in Store function, allows the user to find food items in the store as well as host many other features to the application. Below are the four main screens the user will see in View 2.

After the language is selected, the user selects the “Find in Store” button and is sent to the physical map page. The physical map page is a virtual diagram of the physical grocery store, with pins that represent the user’s food items. Another helpful way to observe View 2 is by listing them in the numerical order that the actions will be completed. 1) Language Center page: User chooses his/her native language

a. After choosing language choice, all text from application will be translated into chosen language

2) Sign Up page: User signs up or signs in to Familiar Foods application;

selects “Sign Up” button

3) Homepage: User chooses “Find in Store” button (third button from the top).

4) Map page: User will see the physical layout of the store they are shopping in. From here the user can:

VIEW 2


a. Return to Homepage b. Add item to list c. Find physical location of item in store

*Note: Top right icon of compass and map does not have function yet. Technical difficulties in prototype design, not an active function.

3.1.2.1 Map Page to Homepage Allowing the user to return back to the Homepage gives the user a choice on what action to complete next.

3.1.2.2 Map Page to Add to List Page

Adding the List button to the Map pages allows the user to smoothly transition from product location to product list.


3.1.2.3 Map Page to Nutrition Translation Page

The user will easily be able to check the translated nutritional information by selected the pins on the physical Map page. The pins represent the items on the user’s list, making the location of the item accessible and legible. This feature is significant due to the fact oral and written directions in the grocery store may be spoken or written in the user’s native/primary language.

4. VALIDATION: METHODS 4.1 Methods The testing methods used throughout the semester were used to as a way to find flaw in our system and improve the overall design and structure. 4.1.2 USABILITY TESTING

4.1.2.1 Informal Polling We used informal polling of MSU international students to determine the “timing” of our application. “Timing” refers to when our users would actually use the application. Our application can only be successful if people opt to use it. We wanted to know when the app is less likely to be used. Based on informal polling about grocery apps and listing apps in general we found that:


• Amount of time available was a big factor in grocery application usage. The less time that is available the less likely the person is to reference specific info about products. An example of this is someone who is on their way home from work and just needs milk then the person is often not going to use an application to compare milks.

• People are less likely to make and/or alter a list once they are

physically inside the store. People feel that when they are inside the store if they do not have a list they will just try to remember what they need rather than stopping and making a list.

This led us to the conclusion that we need a way to encourage users to make list before they arrive in the store and we need to make sure they are invested in planning their trip. 4.1.2.2 Grocery Shopping Observations A majority of our research and testing was done observing grocery shopping. There is a strong need to understand the mental and physical behaviors of grocery shopping to best design and implement Familiar Foods. Our methods of observations ranged from formal to informal.

Formal observations were done on the six MSU international students. Their observational data was converted into the bar graph, or Figure 1. Informal observations were done on English-speaking students, friends, and ourselves. We felt it would be more beneficial towards the design of Familiar Foods if we understand the nuances and behaviors our own grocery shopping experiences. When informally observing a friend, we pointed out their behaviors and asked them to give explanations for the actions. Notes were then taken and discussed in-group meetings. This process continued throughout the semester. 4.1.2.3 Prototyping The formal and informal observations led to us to create a very realistic prototype. We wanted to create a tangible design because we thought it extremely necessary to see how a user reacts with the application prototype. Familiar Foods virtual prototype was created on a mobile application website called invisionapp.com. To test the virtual prototype of Familiar Foods, we first used it on ourselves, together in Meijer. As we went through application, we annotated our thoughts and thought processes. This allowed us to


physically see the holes, dead ends, and potential problems our intended user might face.

4.2 Testing Results Referring back to Figure 1, the foreign student shopping graph, we can see that there is a need for a technology like Familiar Foods in assisting people with language barriers while shopping for food.

Like stated before, the blue and red bars on the graph indicate Walking/Searching and Examining Products. Notice that for each student, the majority of his or her time was spent either Walking/Searching or Examining Products, indicating a source of confusion or delay in grocery shopping. The graph’s other data could be useful to retail stores for their customer assessment. The other data is referring to the green and purple bars. The green bar represents the international student asking for help, where as the purple bar represents the action of checking out. This information could be helpful to retail stores, as it provides demographic data on their grocery shopping troubles.

5. RISKS The greatest risk of the Familiar Foods mobile application is that retail grocery stores will not want to give or exchange their SKU code information for our customer data. The product information that is translated is based off of the SKU code information that belongs to the grocery store. It is imperative a


grocery store is willing to exchange their SKU code information for our customer data. Another risk Familiar Foods has is finding the methodology in keeping advanced users interested. After international people eventually learn the language and food of the unfamiliar place, Familiar Foods primary functions runs the risk of becoming useless. The future incorporated wiki function is reliant on advanced users offering input on similar items. A possible solution is to create a digital rewards system of badges for repeat users. This system would be similar to xbox live ‘gamer-score’ people can earn metadata achievements.

6. FUTURE STEPS 6.1 The Future Steps of Familiar Foods 6.1.1 WIKI FUNCTION Another facet of Familiar Foods mobile application is it’s future incorporation of a wiki function. Imagine that a person from France was shopping at an American grocery store and is looking for a certain type of mushroom. After much searching, the user found that she could not the mushroom. In this circumstance, the user would greatly benefit from the wiki-function. The folksonomy-like wiki function serves to be an important aspect to Familiar Foods due to its inclusion and encouragement of user-to-user conversation. The users would have the ability to upgrade or downgrade a certain food product based on their own experiences’ with that food. This would allow users to create their own like-minded public spheres of influence; users from the same country and similar cultural preferences generate helpful insight to other users like them. Listed directly below is a diagram of how the user will interact with the wiki function. This diagram shows how all of the different shoppers have unique relationships to the different products, but they also have relationships through the cloud. These relationships are fed into our application and then on to our servers. The users can then access metadata through 3 different views. They can search my type of food, food that is popular in the area, or a plain search bar. This allows users control over how they interpret the metadata and make the system work for them.


6.1.2 COLOR SCHEME AND DESIGN RESEARCH More research on the color and design scheme of Familiar Foods mobile application is necessary for our growth and success. Because of our large, culturally diverse audience, it is imperative to account for all cultures’ color and design preferences. 6.1.3 INTEGRATION WITH SPECIFIC RETAIL STORES Integrating with specific retail stores like Meijer’s, Inc. or Kroger is crucial for the implementation of Familiar Foods into an actual mobile application. Discussion between Familiar Foods and a major grocery store Supply Chain Management Department must take place in order for us to aggregate their SKU code information. 6.1.4 EXPANSION OF AUDIENCE We understand that Familiar Foods (as of now) is targeting a relatively small audience. However, with enough research and understanding of user and grocery shopping, we hope to expand Familiar Foods to be applicable to many


other demographics. The expanded demographic would include people with food allergies, food limitations, and food cultural/religious restrictions. From this, our next step will be to propose different interaction views. Users will need to be able to search for foods, wither by product name or general category. We need to construct a way to present any/all information critical to food-purchasing decisions, from language-level information (ex. ingredient lists as translated by our API) to user-generated metadata (ex. tags like gluten-free, wheat-free, halal, vegan, non-GMO, etc.) Below is a sample view of our expanded audience plans. Sample Search View:

Sample of Entry of Individual Item:

FamiliarFoods Spec FINAL - Michigan State Universityreyno343/wra420/FamiliarFoods_Spec_FINAL.pdf ·...

Documents

Transcript of FamiliarFoods Spec FINAL - Michigan State Universityreyno343/wra420/FamiliarFoods_Spec_FINAL.pdf ·...