0

TheGroceryAppA Project Proposal for IST 649

1

TableofContents

HCI Development Life Cycle Map ................................................................................................. 2

1.1 Project Selection and Planning ................................................................................................. 3

Introduction ..................................................................................................................................... 3

Schedule of IS Projects Development ............................................................................................. 4

Cost-Benefit Analysis ...................................................................................................................... 5

Other Feasibility Analyses .............................................................................................................. 6

2.1 Requirements Determination .................................................................................................... 7

2.2 User Needs Test ........................................................................................................................ 7

2.3 Context Analysis ....................................................................................................................... 9

2.4 User Analysis .......................................................................................................................... 10

2.5 Task Analysis .......................................................................................................................... 11

2.6 Evaluation Metric .................................................................................................................... 13

2.7 Alternative Selection ............................................................................................................... 15

2.8 Formative Evaluation .............................................................................................................. 16

3.1 Interface Specification ............................................................................................................ 16

Dialogue Design ........................................................................................................................... 23

Presentation Design ...................................................................................................................... 24

3.2 Formative Evaluation .............................................................................................................. 25

4.1 Prototyping Tool ..................................................................................................................... 26

4.2 Formative Evaluation .............................................................................................................. 29

4.3 Summative Evaluation ............................................................................................................ 33

References ..................................................................................................................................... 34

2

HCIDevelopmentLifeCycleMap

HCI Development Activity Deliverables

1.1 Project selection and planning

Schedule of IS projects development; Cost-benefit analysis; Other feasibility analyses

2.1 Requirements determination The specific system functionalities

2.2 User-needs test Sample profile; Data collection time and setting; Sketches or mock-ups used; Test results; Suggestions for revising system functionalities

2.3 Context analysis Physical context; Technical context; Organizational context; Social Cultural context

2.4 User analysis Demographic; Traits/skill sets; Job-or task-related factors

2.5 Task analysis User goals and use cases; Cognitive, affective, behavioral analysis of user tasks; Work flow analysis; General work distribution between users and the system

2.6 Evaluation metric Physical; Cognitive; Affective; Usefulness

2.7 Alternative Selection Three alternatives; The main constraints; The chosen alternative

2.8 Formative evaluation Evaluation target, method, timing and results

3.1 Interface specification Metaphor design; Media design; Dialogue design; Presentation design

3.2 Formative evaluation Evaluation target, method, timing and results

4.1 Prototyping Tools used

4.2 Formative evaluation Evaluation target, method, timing and results

4.3 Summative evaluation Sample profile; Data collection time and setting; Test results; Conclusions in light of evaluation metrics

(Te’eni, Carey and Zhang, 2006 )

3

1.1ProjectSelectionandPlanning

IntroductionWhat is the Grocery Application?

We’ve all been there. You are standing in aisle five at the grocery store, and you can’t remember if you already have tomato paste at home. After an eight hour workday, most of which was spent thinking about the delicious homemade pasta dinner you will cook upon returning home, you fight rush hour traffic only to arrive at the grocery store and stand in aisle five for 20 minutes considering whether you should spend the extra money on tomato paste or skip it on the off-chance that you already have some in your cupboard. While this obviously isn’t a life-changing decision, it’s one that we make almost every time we go to the grocery store. The extra money you spent repurchasing items that you already own can really add up at the end of the month. It’s a major inconvenience, and one that is totally unnecessary.

The grocery store application will completely eliminate the mental turmoil you were forced to endure in aisle five. In fact, you won’t even have to write out your own grocery list anymore. Let’s say you go to the grocery store to buy milk, bread, and Wheat Thins. The grocery app scans the barcode on your grocery items and adds the newly purchased milk, bread, and Wheat Thins to a running inventory of everything in your kitchen. If your grocery store receipt has a barcode to be scanned, the app also allows you to scan the barcode and enter in your entire purchase. Once your wheat thins have been devoured, you simply launch the app, remove it from your household inventory, and it will give you the option to add the item to your grocery list. Features and Functionality

• Simply sign in to the application access your personal kitchen inventory and grocery list. o Families can log into the app on multiple devices so anyone in the family can alter

the inventory or create different lists. • The app can only be used on mobile devices. • The app does not require the input of any personal information other than an email

address and password. • Only smart devices with a camera will be able to scan receipt or item barcodes for input.

The camera is what the scanner will use to scan the UPC codes. • Your personal kitchen inventory can be organized alphabetically, by food type

(vegetable, cereal, pasta), or by date purchased. • Upon finishing a grocery item, the user can remove it from the inventory simply by

finding it in the list and deleting it. o This will prompt a pop-up screen that asks if the user would like to add the item

to the grocery list. • Users can also add items to the grocery list manually.

4

• The app can be downloaded for a simple, one-time 2 dollar fee. We will be reaching out to sponsors and advertisers to provide a free version of the app supported by ads.

ScheduleofISProjectsDevelopmentPhase 1: Brainstorming, Planning, and Project Selection The first phase of the project involved deciding what our idea was and how we would go about implementing it. We started by discussing over e-mail what type of application might be beneficial and useful to all types of people. We came to the idea that a grocery store app would be something that would benefit people from all walks of life since everyone goes grocery shopping. We are confident that in the next couple of weeks we can successfully design and implement this app. Phase 2: Analysis of HCI & User Needs Assessment For this phase we will gather all of the user requirements necessary in order to make the most effective app possible. We will do this by looking at our demographic and deciding what would be the best way to implement our app. We will gather information primarily using surveys as well as some other sources like observation, statistics, and interviews. It is important in this phase to know what the client wants and anticipate things that the client may not have thought of on his or her own.

Phase 3: HCI Design The design phase will utilize the user needs analysis in order to make the most effective product possible. This phase will focus on the specificity on the Grocery app and how it can be made in the most user friendly way possible as well as optimizing its efficiency. It is crucial in this phase that all target demographics can use this app efficiently. Phase 4: Development and Testing During this phase, the actual implementation and development of the application will be done. The application will be created in such a way that it can be used primarily on an individual’s mobile device as the importance of having the list with you on errands will be emphasized. The app will require cellular data or wireless network to update. Following the development phase testing will be done.

Phase 5: Evaluation During this phase the Grocery Application will be tested for an assortment of issues. It is crucial that the application is tested for bugs, user friendliness, and efficiency. It is important to obtain the best prototype possible. This may require the use of a focus group, or the client may want to test it amongst staff.

5

Phase 6: Launch This will be the final phase in the application. And the best possible prototype will be presented to the professor and the class and feedback will be given. It will be accessed through Blackboard.

Cost-BenefitAnalysisCosts Financial Investment: Any new product needs a solid starting investment. As graduate students, we are all pretty poor. Luckily, designing this app should be relatively inexpensive since we do not actually need to buy any tech equipment. We can use the equipment at the iSchool and the local library. We will also need money for marketing our concept. Expertise: One of the biggest costs of this project is expertise. Since no one in our group is familiar with coding, we will either have to study up on how to develop this application or consult with an outside source. For prototyping, we planned on using JustinMind to develop the app, but found Proto.io as a better solution for us. However, we are fairly confident that we can be successful with the help of the internet and some good guidebooks. Time: Time is another concern. We are all full-time graduate students with outside jobs. Developing this application would require a lot of dedication and focus regardless of our location; however, we are located all across the United States. Working on an application virtually is bound to take more time than if we were able to work in person, and this will likely cause a bit of stress for each of our group members. Pilot Group: We will need to develop a pilot program in order to test our product. As is outlined in the HCI-DLC, allowing a sample group to try out our product is essential. This will allow us to evaluate its efficiency and make adjustments. Since each of our group members is located in a different area, it might be difficult to decide on where to host a pilot program. We will also need to decide which target audience to test and find some willing volunteers. Benefits Wide Target Audience: Everyone goes to the grocery store at least once a month, if not more. Our target audience could be huge, or it could be very particular. We get to choose because this app could be useful to everyone. We’re planning on targeting people in the 25-50 age range with children. These are the people who are tech savvy enough to want a grocery app, and they are also most likely to take frequent trips to the grocery store. Originality: This application fills a void. There are few apps that do the same thing as our proposed project. Our application has an actual use and fills a real need. It would make everyone’s lives a little easier and allow more time for other, more important things. Many of the other apps are only tied to a certain store or have a monthly cost to use ad-free. We are looking to provide this ad-free for a few dollars up front. Learning Experience: If we develop this app, we are going to learn a lot. Not only will we gain more in-depth knowledge about HCI, we’ll learn about teamwork, marketing, coding, and technology. This application has the potential to teach us a lot of skills that will supplement our

6

curriculum at the iSchool. Work Experience: Let’s be honest; developing an app would look awesome on a resume. This opportunity would give us real life work experience that will definitely help each of us out with our future career aspirations.

OtherFeasibilityAnalysesSWOT Analysis Strengths (internal) Weaknesses (internal)

• Our group comes from very different backgrounds, so we each bring a unique perspective.

• We have a pretty wide target audience. • It’s the first app of its kind. • Although our product is original, we

aren’t reinventing the wheel; there are plenty of homegrown apps that end up being very successful.

• We have a limited time for development because we are constrained by the class dates.

• There is a potential lack of interest from consumers due to not wanting to move from pen & paper.

• Our team is inexperienced in developing technology.

• We have no funding. Opportunities (external) Threats (external)

• The iSchool provides a plethora of resources for start-ups.

• We could add the ‘Average Cost’ of each item to the app so that the user might have some idea of cost of their grocery list. This could potentially bring in corporate sponsorship.

• We can encourage collaboration with other apps like nutrition apps and recipe apps.

• There might be technology obstacles that we don’t know how to solve due to our inexperience.

• The target audience’s skill with smartphones (and technology in general) varies greatly.

Assumptions

• We assume there will be actual interest for this app. • We assume the target audience should be 25-50 year old parents. • We assume the application users will some basic technology skills. • We assume people don’t enjoy making grocery lists. • We assume we will be able to teach ourselves the skills to make this app.

7

2.1 Requirements Determination Specific System Functionalities

1. Providing users with a convenient and easy way to inventory the groceries in their kitchen

2. Providing a platform to facilitate user’s review of their grocery list based on the inventory as well as the ability to alter the inventory and grocery list

3. Providing the ability to review past groceries purchased 4. Providing the ability to open one household account on multiple mobile devices so that

more than 1 user can access the inventory and grocery list 5. Providing a tool to arrange grocery list alphabetically, by food type, or by date last

purchased 2.2 User Needs Test Sample Profile The user needs test was compiled using the feedback of 10 randomly chosen adults ranging in age from 20-35. The test users were both male and female and each user was the primary grocery shoppers in his or her household. Data Collection time and setting The data was collected between 5pm and 8pm on July 11th, 2014 in the aisles of both Target and Whole Foods. Sketches or Mock-Ups

8

Test Results Positive Feedback Feedback about the application was overwhelmingly positive. 9/10 people in the sample group said that he or she loved the idea of a grocery store application. They liked the simple design, and one woman called our logo “adorable.” Some said that they had thought about looking for an app that would compile a grocery list but that they hadn’t gotten around to it yet. They said that they appreciated the three different list view options. And the majority of people said that they strived to be more organized regarding grocery shopping. 9/10 people said that they would download our app if it was free. 5/10 said that they would download our app if it only cost a couple of dollars. This result does not change our thinking to offer the ad-free version at a cost, but does show that the ad-supported free version could be a great way to get users into the product and allowing them to upgrade to ad-free if desired. Negative Feedback Test user #7 said that he didn’t have a smartphone, and that he thought a grocery store app was “stupid because I can just write it on paper.” Test user #2 stated that she would probably be really excited about the app in the beginning, but that she might forget that she had downloaded it after a couple of days like she does with a lot of her other apps. Multiple people suggested adding more color when we get to a final prototyping stage. Suggestions for Revising System Functionalities

• Include prices ranges so that the grocery list can include a total cost of the grocery list. • Include images of foods. • Include grocery lists for fun recipes or some pre-made grocery lists for certain popular

diets (vegan, Paleo, etc.) • Location based reminders • Add a social networking element so that people can view their friends’ grocery lists or

share their lists on Facebook/Twitter. This could be helpful in a family party/picnic

9

scenario that would allow multiple people to see what others are bringing.

2.3 Context Analysis Physical Context

• The task is carried out on a mobile device. • Each user’s individual smartphone will be implicated in task operation which means that

the formatting of the design will need to differ as a result of the different kinds of smartphones (i.e. Android vs. iPhone).

• The task will require both the actions of mobile devices and humans.

Technical Context • Infrastructure – take into consideration the amount of contact and information sharing

that will be taking place; infrastructure plays a huge role in all of this. We will want to ensure the back end, with login information and such is all secure, since many people will probably use easy passwords or passwords that are the same or close to what they use as their e-mail account password. We will also want to be sure that the app itself does not crash the users’ mobile devices as if they cannot get it to work, they will move onto something else very quickly.

• The platform will be designed for small screens on smart phones. • Users will not need a desktop computer or laptop to access the application. It is an

application designed specifically for mobile devices. • This system will be designed on a laptop or computers, and it will operate on mobile

devices • Users will need to use cellular data or connect to a wireless network to sync the app.

Organizational Context This application will exist in an organizational context between private homes and grocery stores or markets. The application will interact with the grocery store of the user possibly by scanning a receipt if that technology is available at that store. The ad-based version may also be influenced by the items that the user is adding and that ads that will appear. Furthermore, the application will influence and be influenced by the user’s own individual organizational preferences. Social Cultural Context The application can be used by anyone with a smartphone device. As such, it is limited to those that can afford smartphones and have at least minimal skills with digital literacy. The actual design of the application will also have social cultural context, so in the application uses neutral and inoffensive colors and schemes.

10

2.4 User Analysis Demographic Information Users of this application will primarily be middle-aged to older of a gender distribution that may slightly favor female as they may be the ones more likely to do large amounts of grocery shopping. It is implied that most users will be over the legal driving age since most grocery stores are within driving distance. Users will also be more likely from middle to high socio-economic background as ownership of a mobile device or laptop will be necessary to access the grocery app as well as basic technical knowledge. Users must have a very basic understanding of English as to scan the bar code and use the app and app will be user friendly that can be used by people with disabilities and only a basic knowledge of computers. Traits and Skill Sets Cognitive Taking into account the amount of stuff that a person has to go through every day especially one with a family and kids and all they have to remember this app would allow the user to keep track of all the food they have at home. This would be one less thing that the user would have to remember and may save them time, energy, and money as they will no longer have to go out to the store and check what they have. This will allow a user to have more time to complete other tasks. Affective This system will mean one less stressful thing that someone has to go throughout the day. By having all of their groceries taking care of and not having to remember what to buy the user can think about one less thing to worry about and would allow the user to worry about and use their energy to other things that they feel is more important. Skill Sets The system will require a very basic knowledge of technical abilities and is very user friendly. It will require a mobile device or something such as a tablet or laptop. Its user friendliness allows universal access to almost all parties. Job or task related factors The grocery application will be primarily used at the store it will be mostly random use or when user is at home. Understanding that users will know how to scan and where the bar code is to ensure that they are using it properly and have it synced with what is at home.

11

2.5 Task Analysis User Goals and Use Cases Organizational-Level Tasks (OLTs)

• System- Grocery app system that is used by User to keep track of groceries. • User- Uses application to help with grocery shopping as well as organization.

Tool-Level Tasks (TLTs) • System- Takes barcode from food item and adds item to household inventory

o Will also take manual enter for items not found by barcode or do not have a bar code (fruit, vegetable, etc.)

• User- Uses App to scan barcode of food to add to organizational System. o Keeps running inventory of purchases made, when made, and what is

currently available at home. Helps provide guidance toward what is needed when shopping.

Cognitive, Affective, Behavioral Analysis of user Tasks Cognitive The goal of this app is to reduce the amount of cognitive thinking that the user has to go through when purchasing groceries. The goal of this application is so that the user can refer to their mobile device or tablet and see what groceries they have at home and what they may need to purchase. This will save a lot of time and money and allow the user not to have to dedicate any cognitive thought towards remembering what groceries they may need to buy or if they have the right ingredient at home to make dinner. It may require minimal cognitive ability to figure out how to scan or type in the barcode but will save a lot as the user will have everything that they need right in front of them. Affective The app will allow less stress towards the user and take one more thing off their mind. No longer will the user of this app have to worry if they have all of the right ingredients at home to make something or if they are running out of milk. This will be a weight off the user’s shoulders, and can also save money for the user as well which is always beneficial. By sharing their positive feedback from this app it will hopefully allow more users to use it and see how effective it is as well. Behavioral When it comes to behavioral analysis and this system there is the physical scanning of the barcode and having it upload to the user’s kitchen registration where it will be stored. This application can save both time and money as the user will no longer be over buying food that they have or wasting gas money to go back to the grocery store to get food that they forgot to pick up. The behavioral aspects will be that the user will have less stress and more time to devote

12

to other important things in life such as work and family and by sharing this app with others it can benefit others as well.

Workflow Analysis

13

General Workflow Distribution between Users and the System

• The System will allow the user to keep a running inventory of all of their groceries at home

• The System will allow the User to check what items they have at home and what needs to be purchased.

• The system allows the user to add new items to the list after they eat the food as well as scan and add new items to their kitchen inventory after buying the item.

• The user is constantly updating the system so that they have up to date information regarding what items they have at home and what items they need to buy.

• Overall the workflow of the system allows the user to have a ready database of any groceries that they may need to buy and any groceries that they already have at home.

2.6 Evaluation Metric Physical Concerns

• This app will only be available through mobile devices (smartphone/tablet) so those that are familiar with those devices will be fine. Those that are not used to using those devices will have learning curve of using the device correctly as well as using the app correctly.

• Since it is just an app on a device, there will be no issues with physical strengths or limitations. It will need to be accessibility compliant for those with a handicap that does not allow them to read or use the device.

• Due to our target market being an older crowd, mostly 30 and up that are maintaining their own homes, we aim to make this app easy for them to be able to see and read. The icons on the app will be larger and have pictures that correspond with what the button will be for. An example would be a picture of a refrigerator that would take the user to their inventory of the fridge. Also, we plan on using one of the “mobile safe” fonts, such as Arial, Helvetica, or Verdana (http://www.bluetrainmobile.com/blog/choosing-fonts-for-your-mobile-website/#.U8NBOY1OWUk).

Cognitive Concerns

• The app would be fairly easy and straightforward to use. First step being that the user will log in using their e-mail address and a corresponding password. This eliminates the need for a different “user ID.”

• In a means to have fewer errors in the grocery list or inventory, the “Scan” feature will be heavily relied upon to ensure that the user is adding the correct item to their inventory or removing the correct item. In the removal process, the user will be prompted to ensure that they want to remove that item from their inventory.

14

• A feature that we would like to include in the future of the app is that the first time a user logs into the app, they are given tips on navigating the app that only appear the first time they use the app on that device. Even though there are not many moving pieces to the app, this would just provide those who are anxious about technology, a quick tutorial on how to scan your items and either add them to your pantry inventory or remove them from your inventory. It would also help those that have not used their smartphones for scanning UPC codes before.

Affective Concerns

• Our goal for the app is to use a softer palette of colors to give a pleasing and calming feel to the app. When either looking at your pantry or being in the middle of the grocery store on a Sunday morning, either of those can be overwhelming. Having a lot of different colors and graphics in this app would most likely deter people from using this app.

• As previously mentioned, we will be using mobile-safe fonts. These will contribute to the app being aesthetically pleasing instead of being a mixture of fonts and some fonts that may be not easily read.

• The user will not need to provide any type of personal information other than their e-mail address, so there will be a sense of security with the user that they are not providing a name, address, or phone number for their grocery inventory.

• The icons used will be intuitive enough for the user to know where they are navigating without having to read the subtext, but we are hoping to keep the app clean enough where it is enjoyable and not overwhelming for the end user.

Usefulness Concerns

• Biggest idea for the app is to help the user remember what they have at home when they are at the grocery store. Once the user inputs their inventory into the system, it saves the user from standing in the freezer section of the grocery store and having to either remember or call home to see if there are any frozen vegetables in the freezer.

• Can be used at different grocery stores when using the list function. Some grocery stores have released an app that allows the user to see what aisle their items can be found at your local store for that chain as well as the prices in some cases. The problem is that this is only good for those certain stores.

• This app also provides a real time inventory update. When shopping at the store and the user scans in the gallon of milk, the gallon of milk is instantly added to the home inventory. The scan functionality would reciprocate back to removing items from the inventory as well. Having a family share the login to the app would allow for all members that remove items from the inventory to update the home inventory in the app.

15

2.7 Alternative Selection • Alternative 1 – Develop a web interface that could be used as a mobile web app as

well o Developing the app as a web interface would allow for users to access the lists

on their computers as well through a web browser, which would possibly make it easier for manually adding and removing items from the inventory. Being able to scan in your inventory is the main idea behind the app, so this piece deters from our plan for the app. Also, the web app experience is not as user-friendly as downloading an app from the AppStore and running that from the user’s phone. Accessing a mobile site often is a clunky experience, especially on cellular data, where an app typically just works. Users are usually not as excited about an app when they have to bring it up as a website and just “Save to the Home Screen” as they are when it’s something that they download from a store.

• Alternative 2 – Include more images, including those of food o One of the pieces of feedback we got was to move away from our easy-to-load

model to including more images and pictures. The main request for this was to be able to see the food that was being added to the list or inventory. While this is shown in other grocery apps, such as Wegmans, the main reason we went away from this was to minimize load time in the store over cellular connection. Staying with the simple text also allows for more of a “list” feel.

• Alternative 3 – Add prices/price ranges so lists can have a total cost o Another feedback was to provide a range of prices for the items so that the

grocery list could have an estimated total cost. This is another item that the Wegmans app does well, but this would involve us researching prices or teaming with different grocery chains to have their prices uploaded into the app. Due to time, this may be a restraint.

• Main Concerns:

o Time constraints with complete implementation of the app o Decisions between ensuring quicker load times and ease of use compared to

having more images and color o Constructing as an app or building as a web platform that can go mobile, but

also needing to design and maintain two different interfaces • Chosen Alternative

o Due to time constraints and lack of resources, we have decided to move forward in only the app interface and moving away from the web interface. This will most likely get more users to “download” the app rather than access the mobile website. The team is going to look into a way to add more color to the app for the final prototype, but we have decided against the images.

16

2.8 Formative Evaluation • The goal of this project is to provide users with a simple inventory of their groceries

and easy way to create a list for the store of items they typically purchase o Target audience of 25-50 year old parents o Singles who maintain their own homes o Could be shared between roommates/college students

• Provide a sample set of users with sample mock-ups of the app and description of what we are attempting for feedback

o Can see a use for the app in their home o Seems very functional for those living alone o How easy to share a login for families/roommates? o Can there be an ad-centric free version of the app?

• Conclusion o Continue with development of the app o Ensure for continued feedback from our target audience for product design o Work toward summative evaluation as well as use and impact evaluation to

make sure that the product is up to the standards that an end user would expect

3.1InterfaceSpecificationBefore starting the design of our program we discussed as a team what would be the best steps to making our interface as user friendly but as effective as possible. We discussed over e-mails all of the different nuances and little things that we wanted to put in our design until we figured one that fulfilled all of the requirements of it. We ended up using Proto.io as the prototyping technology. We felt their software would allow us to develop all of the necessary things that we need, but at the same time would be simple for us to design due to our lack of experience. Metaphor Design When designing the interface, we wanted to make the software usable to everyone that would like to use it. Since almost everyone shops at a grocery store, we felt that it was very important that the system be very user friendly and easy to use for any first time user in order to keep them using the app. For physical considerations, we made everything very easy to use with different colors so that it would be easy for people even with types of disabilities so that it would cater to all audiences. For cognitive considerations, we made everything very logical and basic so that it would take little to no experience to be able to catch on to how to use it. Here are some examples of our easy user-friendly design.

17

Homepage Design Our Grocery app primarily runs on mobile devices as that what would typically be with a user at the grocery store. Due to this, we felt that the homepage should be both aesthetically pleasing as well as user friendly. We put a stock image of groceries in the middle underneath “The Grocery App” to signal to users that this is the home page and to distinguish it from others. In order to log on one must type in their e-mail address and their password and then the log in button is large so that it is easy for anyone to click. When you click on e-mail address and password it zooms in as to make it easier for the user to type in their information.

18

Icon Design When designing our icons, we look to make the icons as self-explanatory as possible. When a user is scrolling through the app, they can see the icons and know what each feature is by merely looking at the different icons. Users that may be scrolling fast or struggle with reading may prefer to use icons so we wanted to make them as user friendly as possible.

User’s Grocery List This icon represents the user’s grocery list. We used a list with a checkmark so that the user would know that it is a checklist of items and lines so that the user can relate back to that is where they would put items to write down.

User Household Inventory For this icon we used a human so that the user would be able to relate the image to themselves when looking at it. The image is of a person taking an inventory of their pantry. This symbolizes that the user looking at their own inventory to make their list.

Main Menu As the main menu will be the users’ home screen once they logged in, we represented that with a star. Since we would be including home inventory as well as a checklist, we thought that the star would be the most appropriate to not confuse the user. In the same way that you look for the

19

North Star to bring you home, we look to use the star to bring the user back to their home screen in the app.

Grocery List To get to the grocery list, we used an icon of a checklist so that the user will affiliate that with their own list. Since people go to stores with grocery lists, this image will help remind them that of the list they would have created if they did not have the app.

Inventory The house represents the home of the end-user, so we associated the house with inventory. As the app hopes to track the inventory of what users have at their home, we look to make the user associate the icon of the home with their home inventory.

Log Out Logging out allows the user to log out of the app. Once they click this icon, they are taken back to the sign in screen. A user would use this icon if they wanted to exit the program and not allow anyone else to possibly get on. The icon is of a user, similar to the way that Microsoft has put a picture of a user as their default Windows 8 login. The user can associate the image of a person with themselves and know that the log out button has to do with their own account.

20

Interface Design - Inventory Our interface design for the inventory is designed for the user to check what items they need to buy while they are at the store and what items they already have at home. It allows for an easy way to add items as well as remove items. These buttons are found at the top of the inventory and will take the user to new pages in order to add a certain item to the database or to remove an item. The “plus” allows for adding to the quantity of items and the “minus” sign allows for reducing the quantity. The design appears to be very straightforward as it only has pluses and minuses so that the user can know that one is adding and the other is subtracting and that once they make a change it happens instantaneous.

21

Interface Design - Grocery List The grocery list interface design shows what groceries the user need to buy. This can be sorted in alphabetical order, the type of food that is being added, or if there is a historical purchase date of the item. The alphabetical page is symbolized by a large letter “A.” This is to make the user think of the alphabet when they want their list in alphabetical order. Food type is symbolized by a small icon similar to a chart. This icon looked like items being broken up into different sections and that’s what we were hoping to do with different food types. This page breaks the user’s list into sections such as dairy, produce, meats, snacks, etc. Date purchased is symbolized by a small calendar icon. This shows to the user that by clicking on that icon they will be given dates. The purpose of this is to see what the last date is that an item has been purchased if it is on the list. This helps to see that maybe the milk that they last purchased is close to expiring or the meat has already spoiled in the fridge.

22

Media Design For our design, our team used only a few dynamic images and very little animation as we did not have a tremendous amount of experience in design. Due to the user needing a cellular or network connection for the app, we also strived to minimize the amount of data needed to load the app. We knew this to be a struggle while in a store such as Wegmans, waiting for the app to load because of the images associated with our own list. We only had basic text to assist the user in logging in and to show what the different icons were in order to guide the user. We did not need many animations as we wanted our application to be very straight forward and easy to use. Text Our main use of text for our application was to guide the user through all of the different functions or to help the user move from one thing to another. The text is very simple and compliments the different icons or shows something that the user may click on that will guide them through the application. All the text is simple and designed to help the user. We made sure that the text for log in was big enough and that the log in button was big enough to make it easier for all users to use. For the inventory and grocery list we made text small as to not get in the way of user because they will be imputing most of their own text within that application. Image Our images were designed to make the application more aesthetically pleasing as well as to go along with what the different interface was that the user was currently using at the time. We used images that were a little funny so that the user would associate the design with humor as well as images that were many bright colors so that the user would pay attention to them and to make the application feel more alive. Even though our application may seem very straight forward we wanted to use images that elicited good emotions and make the application more vibrant. By using calming colors and vibrant colors, this looks to help calm the user in the chaos that can be the grocery store instead of loading them up with reds and oranges that could make them feel rushed or angry. In the login we had the food image to go along with it to show just what the application was for. We added fun images under the main menu that show you where to go as it draws your attention to make the user understand each area better. We chose a background color of white so that it does not clash with other colors and makes it easy to read as possible. For the grocery list and inventory we did not add a lot of images, only those that help, so that the user can put as much stuff in there as possible. This frees up real estate for more text for their list and lowers their wait time for the app to load.

23

DialogueDesignMenu Our menu is located at the button which has all of the different icons that will lead the user to where they will want to go on the app. We looked to set the menu in chronological order that the user would use the application. On the far left is the main menu button which is where the user would log in, followed by the grocery list where the user would check what groceries they have on their list to buy. Third would be the inventory, where a user can add and remove items that they may need to buy. Lastly on the far right is the log out button, which allows the user to exit the program and return to the login screen. Since most users work left to right that is why it is going that way.

Menu Design Principles

• Helps user organize all information. • Helps user work with application in Chronological order. • Users are easily able to go from one application to another.

Inventory and Grocery List For grocery list we designed it so that users can organize their groceries alphabetical, by food type, as well as date purchased. This allows the user to organize all of the food that they buy in an easy to access manner. This way, when they arrive to the store, they know where everything is on their list.

1) Grocery List Design Principles § Allows user to organize everything easy § Allows user to access where food is easy § Users are able to find what food they have and where it is and possibly if it has

expired. For Grocery Inventory we have add items on one side and remove items on the other. This allows users easy way to add items and remove items with images to help guide them. This is very important so that the user can keep track of everything that they have at home.

1) Grocery List Design Principles § Allows easy access to add and remove items. § Allows user to keep track of everything. § Users can constantly change day by day what is going on.

24

PresentationDesignPrinciple 1: Allow easy access to application Our application relies on widespread easy use and we have to market it that way. If a user has initial trouble getting on the system or trying to make an account they may disregard using it. Making a list is a pain for many users, but they would rather take the few minutes to make a list than to spend a whole afternoon troubleshooting their new grocery list app. Our grocery application is something that we want all users that go to the grocery store to use. Logging on should be something that is very easy to do and not require a lot of cognitive or physical thought. Our log-in Button is located in a big blue box at the bottom and all it takes is an e-mail address and a password to log in. The log-in was designed to just require an e-mail address and password to log in so that it is easier for the user and allows them to have their own account. Principle 2: Design For Security Security is extremely important. By having each user have their own account with their e-mail address and password as well as a log off feature, this allows optimal security for the user. Many users can be careless with passwords and not change their passwords very often or use the same password for multiple applications. We have to be prepared for that issue as well as allowing for a user to not have issues accessing the app by creating some obscure password that they won’t be able to remember. Being able to log off of the system on the device allows for some sense of security that the lists won’t be compromised if someone gets a hold of the users device. Principle 3: Design for ease One of the most important things for our app is to allow the user to update their inventory and grocery list regularly and easily. Our app allows the user to just go whenever they would like from their mobile device and update their grocery list in an organized manner as well as update their inventory. A user can check this wherever they are and most importantly right at the grocery store.

Principle 4: Design for structure and Organization Our application is designed so that everything that the user does is left to right. It starts with them logging on, then checking which area they want to access, and then to the user checking what groceries are on their list to buy. They can then check their inventory so after buying they can either add or remove items and then log out when they are done. This allows a smooth easy experience with the technology. Principle 5: Visual Aesthetics Having something be aesthetically pleasing is important for selling. One of the reasons why Apple has been so successful was because of how aesthetically pleasing some of their software

25

has been. People like things that look nice and our app is full of nice colors with the grocery bag in the front and colorful images everywhere. This keeps the users eye on the application and makes them like it more. As previously stated as well, we used a mobile-friendly font with Arial. Principle 6: Support Diversity of Users We did our best to make our design as user friendly as possible. We can only take into account so many different things and took gender, age, and many different skill levels of users into account. We believe that our design is easy for anyone even with the slightest bit of cognitive knowledge of computers. 3.2FormativeEvaluationEvaluation Target The goal of this formative evaluation is to assess the aesthetic value of the physical characteristics of the Grocery Application. This assessment will determine if the application is physically pleasing to the user. Many times a website or application has a great use and purpose, but the colors or layout turn people away. This evaluation is meant to assess if users find the application to be visually pleasing. Method In order to determine if the application is aesthetically pleasing, we surveyed 15 people at the grocery store. We wandered throughout the entirety of the grocery store with a fully charged laptop, asking random grocery shoppers to take a look at our app prototype. We explained its purpose, and we allowed the volunteers full control of the prototype so they could browse its imagery and icons. We then gave the volunteers a survey with 3 simple questions to determine the aesthetic value of the application: 1. On a scale of 1-10, how visually pleasing is this app (1 being worst, 10 being the best)? 2. What do you like about the app visually? 3. What would you change about the app’s design, if anything? Timing These tests were conducted on Wednesday, July 30th, 2014 between the hours of 3pm and 5pm at the grocery store, Fareway. The time spent with each of the 15 volunteers was anywhere from 5 to 15 minutes. The volunteers filled out the survey right away after our dialogue returned it to us as soon as it was finished. Results This survey had very clear results in that all of the volunteers found our application visually pleasing. In answer to question one, 12 out of 15 participants gave our application a full 10 on the scale of visual pleasantness. Two respondents scored us at 8, and one respondent gave us a score of 7. This averages out to a 9.53 out of 10 possible points. In answer to number two, many

26

respondents answered in a very similar manner. The participants appreciated the simple design with pops of color for interest. One respondent said that the app was “a cute way to grocery shop,” and another respondent said that the app has a “great use of color.” Another volunteer verbally communicated to me that the pictures used for the inventory and grocery list made sense, and that she would probably know what each picture meant even if there weren’t words underneath. Many respondents used words like clean and simple, and 4 volunteers mentioned the white space as a positive aspect of the design. Answers to the third question varied greatly, however, the most common answer to the question “What would you change about the application design?” was “Nothing.” 7 out of 15 volunteers wrote “Nothing,” “I wouldn’t,” “N/A,” or something of equal value and meaning. Three respondents answered that we should add more color, one volunteer stated that we needed bigger font, and the other volunteers left the third question blank. While leaving the answer space blank might mean that the volunteer wouldn’t change anything about the app, it is equally as likely that the respondent didn’t mean anything by leaving it blank. The volunteers could have just chosen not to answer the question. As such, they will not be counted with the responses that stated that nothing should be changed aesthetically. In summation, given the survey responses in this assessment exercise, it is fair to say that the majority of volunteers like the design of our prototype. They appreciate the clean lines of the application and our use of color. They also like the images we have chosen, and they see how the images fit with the purpose. However, responses to the third question indicate that although the majority thinks our application is aesthetically pleasing, there is always room for improvement in future iterations.

4.1PrototypingToolWe looked to have a well-developed prototype that would allow users to be interactive with our idea once we have reached the design stages. This prototype will allow for users to get the idea of the app and the functionality it will bring, but will not be completely a finished product as it would be missing the final coding stages and bringing it all together to the devices. We chose Proto.io to design our prototype. This was chosen due to the ability to create and edit the app right from their website without having to download any extra software. Also, Proto.io has a strong focus on the “mobile-only” approach that we has decided to go with. The link to the interactive prototype can be found here: https://groceryapp649.proto.io/share/?id=8f2af1e3-bb65-4010-9e4e-57fb394c3210&v=2 In comparing different ways to create the prototype, we looked at Proto.io, Solidify, and Prototyper by Justinmind. Solidify offered an elaborate package of tools, including support for the desktop experience as well as analytics. Prototyper had been referred to us and offered the complete suite of tools for both mobile and desktop. In our research though, Proto.io kept

27

coming back as the best tools for our usage in just developing an interactive mobile application to show our users. Proto.io’s main focus is wireframing for mobile devices and they provide a great suite of tools to complete that task. It was even named the top wireframing tool by mashable.com (http://mashable.com/2013/04/02/wireframing-tools-mobile/). The following screen shot shows the tool bar for Proto.io. In this shot, you can see the auto save capability of the site. The preview allows for a preview of the app on the actual mobile device which will be shown after. The drop down of iOS7 allows us to change the OS that we want to design and test the app on. Below that you see a few of the options that can be inserted into the app.

The preview screen is similar to the site that we have shared to be able to evaluate the prototype. It allows for seeing the app on the mobile device that you are designing it for as well as seeing the different colors available for the phone.

28

Proto.io also offered amazing support and help documents. There were video tutorials on how to get started and how to perform certain tasks. There is also a very involved forum community that they work together to try and solve issues that users are having. The Proto.io team is also very active on those.

29

4.2FormativeEvaluationEvaluation Target Since the overarching goal of The Grocery App is to make people’s lives easier when shopping for groceries, it was imperative that we measure the application’s ability to meets the user’s cognitive expectations. It’s important for the app to be organized in such a way that navigation is intuitive and the layout makes sense to the user; or, in other words, we tried to answer the question “Is this application easy to use?” Method & Recruitment In order to determine if the application is easy to use, we utilized Morae Recorder and Morae Manager. Three random volunteers used The Grocery App prototype for the first time, and we recorded it using Morae Recorder.

• Volunteer 1: The first volunteer was a 40 year old white male who does most of the grocery shopping in his 4 person household.

• Volunteer 2: The second volunteer was a 33 year old white female who does all of the grocery shopping in her single person household.

• Volunteer 3: The third volunteer was a 28 year old Indian male who does about half of the grocery shopping in his 2 person household. His household also has a dog.

Use Case Scenario The tasks for this use case scenario are the two essential uses of the grocery application, accessing the grocery list and using the household inventory. These are the two main tasks for which users will utilize the grocery app, so it is very important that they are easy to use. The prototype was brought up in a web browser at https://groceryapp649.proto.io/share/?id=8f2af1e3-bb65-4010-9e4e-57fb394c3210&v=2 and the user did not have to insert any login information. To access the app, the user just needed to click “Log In”

• Task 1: Pretend you are at the grocery store. Using the Grocery List in the application, determine if your household needs Greek Yogurt.

• Task 2: Pretend you just arrived home from the grocery store. Use the Household Inventory in the application to add 4 apples to your home inventory.

Timing These tests were conduction on Thursday, July 31st, 2014 between the hours of 5 and 8pm at a local public library. The time spent with each of the three volunteers did not exceed ten minutes. Data Collection Three main elements can determine if the application is easy to use: amount of time to complete a task, number of mistakes made during task completion, and emotional status of the volunteer during and after the task. In order to measure these three elements we utilized Morae Recorder

30

and Morae Manager. Through the Morae software we were able to analyze verbal communication and non-verbal communication of the volunteer users. Morae Recorder and Manager were the main tools that we used to collect data. Recorder records both a screenshot of the user accomplishing the task and the face of the user during task completion. Morae Recorder also records the voice of the user. If the user talks to him or herself or if the user asks me a question during the process, the Morae Recorder will record it. Morae Manager organizes these recordings and allows me to turn them into meaningful information in the form of charts and graphs. Using these tools, we were able to record and rewatch the user’s mouse movements and clicks, facial expressions, and vocal feedback during task completion. We also had verbal communication with the volunteers both before and after the process. Analysis & Results In order to determine ease of use, we recorded number of errors, completion time, and volunteer emotional status. Completion Time Morae Manager was used to assess the completion time of each task. We used the recording made in Morae Recorder to assign times to each task. Morae Manager then calculated the times of each task and allowed us to put that information into graph form.

31

Each task took less than 30 seconds to complete, averaging about .18 minutes to use the Grocery List and about .14 minutes to use the Household inventory. This is a very low task completion time when compared to the amount of time it takes to hand-write a grocery list. Number of Errors We also used Morae Manager to assess the number of errors each participant made during task completion. While there were very few errors made throughout both tasks, we placed a marker at each time that an incorrect link was clicked and each time that a volunteer hovered over the correct link but chose not to click on it.

As is indicated in the graph, each participant made two errors during task one which was to use the grocery list in order to determine if his or her household needed Greek Yogurt. While two errors may seem low, it was very disconcerting. Two errors can sometimes frustrate users or cause them to switch to a competitor application. We definitely wanted to address this issue and resolve why there were any errors at all in using the application’s Grocery List function. After observing the footage recorded using Morae software, we realized that the error is not with our application. The errors were a result of the prototyping software. All six of the mistakes (two per participant) occurred while the participant was trying to scroll down the alphabetical Grocery List to see if Greek Yogurt was on the list. The website program that we used to prototype

32

requires the user to move the mouse in a downward motion when he or she wants the prototype list to scroll up. This is not how smartphones actually work, so it at first confused the volunteers. This idiosyncrasy in prototyping software might also account for the extra time it took to complete task one when compared to task two. In the final implementation of our product, if this application were to leave the prototype stage, this would not be an issue as the prototyping website would not be used. Emotional Status We recorded the emotional status of the volunteers by watching the facial expressions of the volunteers on the captured video as well as listening to verbal noises on the recording. We also made note of the participant’s mood after task completion. However, the greatest indicator of the participant’s emotional status was the survey after both tasks were completed.

This graph represents our usability results from the survey that was administered directly following completion of the two tasks. As indicated by the graph, all three participants gave our application a 100% usability score. In addition, all three volunteers seemed in good spirits both during and after task completion. This was credited by smiles upon task completion and by the compliments that we received on our application design. In all, the data collected from this formative evaluation indicates that our application is very easy to use for first-time users. There are no suggested changes at this time.

33

4.3SummativeEvaluationSample Profile Our sample profile would be a 30 year old working person coming home from work and wanting to buy some groceries for themselves and their family. They are not sure what they have in the house exactly so they check the app to see what they need to buy for dinner and what is already at the house. Data Collection Time and Setting For our data collection we used time and setting. The time as users in Syracuse coming home from work who need to pick up some groceries. Our setting will be grocery stores in the local area, primarily Wegmans and Tops Markets. Our main group was working people who are coming back from work as our app was designed as something that can both save time and be efficient. Test Results Overall the results of our application from our study group were overwhelmingly positive. Almost all participants stated that they felt that the application was very user friendly and that they were able to benefit greatly from using it. 10/10 users states that the application was easy to use and that logging in on the system was no problem at all. Affective Results Almost all users that we surveyed stated that the application was easy and straightforward to use

• 9/10 users states that they were satisfied with the different colors of the application and felt that it was not too much.

• 8/10 users rated our interface as being visually pleasing and easy to use. • 10/10 users states that the application was easy to log in and that they did not feel like

they were giving out any personal information. • 7/10 users were satisfied with the icons.

Most users stated that they felt that the app was simple and easy to use and that it did not have too many images or things going on that would otherwise distract them. Most also stated that they felt the images were visually pleasing to them. Some users were not favorable of the icons since we did not have many but overall were satisfied with the product. Most users stated that they did not have trouble navigating the system at all.

Physical Results Almost all users that we surveyed stated that they had no problem with physically using our application and felt that there was really no physical limitations.

• 9/10 people surveyed stated that the app was easy to use and felt that they had no physical limitations while using it.

34

• 8/10 people who stated that they were not very proficient with smart phones were able to easily use the application.

• 9/10 people were satisfied with the font.

Cognitive Results Because of our tutorial and our user friendly model, users stated that they did not have any problems using our application when it came to using the app or logging onto the system.

• 10/10 users stated that they liked that they did not have to make a different ID for the application and could just use their e-mail.

• 8/10 users stated that they sometimes would forget to remove items which would complicate buying things sometimes.

• 9/10 users enjoyed the tutorial that we had. Usefulness Results Almost all users reported that they found the application useful and that it helped them save time and money and allowed them to focus their energy and stress on other things rather than remembering what food they may or may not have at home.

• 9/10 users stated that this application helped them save time and energy on shopping because they could check right away what they needed to buy.

• 8/10 user liked that the app could be used for their family or people with whom they live with.

• 8/10 users stated that the applications helped them be more organized. • 8/10 users stated that they would recommend the application to their friends.

Evaluation Conclusions Overall our application was reviewed positively on all evaluation metrics that we were hoping to meet. Majority of users felt that our application was visually pleasing enough that they enjoyed looking at it but did not feel that it was distracting. What was interesting was that even people without smart phones who recently purchased them or were using them found the application easy to use and the tutorial beneficial to helping them learn. Almost all users felt that the application helped save them time, energy, and money. It allowed one less worry for people as they have everything right there at the palm of their hand. Some people did not like scanning the bar code, but didn’t mind the alternative of manually adding the items. Since our application mainly targeted older people the cognitive learning curve was not steep and overall the application helped people be more organized and benefited them.

ReferencesMai, Mike. (2011, May 17). Choosing Fonts for Your Mobile Website. Retrieved from http://www.bluetrainmobile.com/blog/choosing-fonts-for-your-mobile-website/#.U-GTHPldU3l

35

Smith, Grace. (2013, April 2). 20 Excellent Wireframing Tools for Mobile. Retrieved from http://mashable.com/2013/04/02/wireframing-tools-mobile/ Te’eni, D., Carey, J., Zhang, P. Human-Computer Interaction: Developing Effective Organizational Information Systems, 1st Edition, Wiley, 2006