Food Storage Tracker Design Spec

Food Storage Tracker
An easy food inventory app

Malorie Aaron
Food Storage Tracker
An easy food inventory app
Project Overview Requirements

Design a simple, appropriate interface for a Simple Interface and mapping
calculator app which is specifically for a smart,
touch screen phone. This app should be designed All functions are quickly accessible
with user from a single profession or activity in
mind. Identify a need and design the app interface Fast - Must be able to add an item in less than 30
for the purpose of fulfilling that user need. seconds, otherwise the app would fail to function
quicker than the user recording it on paper.
For this project, I have chosen to design an app
interface for a simple, food inventory app. Though Must have the option to edit food items
the app interface and complexity will be simple,
there are several requirements which will be the Must be able to subtract items easily when using
foundation of the interface design. them.
Food Storage Tracker is a clean, simple, fast food Sort items by expiration date and alphabetically
inventory app which aims to give the user the
ability to quickly record and keep track of their Ability to search for items
food storage. If the app fails to do this, it fails and
must be re-evaluated. The goal and main purpose Ability to see quantity of each item
of this app is to make the task of assessing and
calculating food more efficient and convenient than
writing it out on paper.
Food Storage Tracker | A Food Inventory App
Table of Contents
4 22 43
Research Testing Testing
Background Round 2 Prototype Round 5 Prototype
7 26 52
Research Testing Testing
Competitors Round 2 User Test Round 5 User Test
10 28 55
Research Testing Conclusion
Visual Elements Round 3 Prototype Final Design
12 32 66
Development Testing Activities
Word List Round 3 User Test Interaction
Principles
13 34
Development Testing
Persona & Senerios Round 4 Prototype
16 40
Testing Testing
Round 1 Sketches Revised Senerios
20 41
Testing Testing
Round 1 User Test Round 4 User Test
pg. 3 art 337r

Research | Food Storage Tracker App
Research Calculators
Development
Testing History
Conclusion Calculators are simply machines that
calculate something. The notion
Activities of a “calculating machine” is not a
new one. People have been using
instraments to calculate numbers.
It wasn’t until around 1887 that the

idea of pushing buttons to calculate
something came about. The first
calculator that emploied buttons was
called a comptometer.
In the late 1930’s the development

of electronic calculators began to
be developed. In 1946 the ENIAC
was created and used the equivelant
amount of energy of a small town and
was less powerful than a non-smart
phone.
In 1967 the first “hand-held” calculator

was produced. Soon followed
the microchip age and calculators
continued to get smaller and more
complex.
Today everyone who has a cell phone

has instant access to a calculator.
pg. 4 art 337r

Research Smart Phones

Development
Testing History
Conclusion The first phone call was made in 1878
by Alexander Graham Bell. Motorola
Activities created some of the first cell phones
during the 1980s. Some of these first
cell phones cost up to $4,000 and
were not at all compact.
The first smart phone was introduced

in 1993 by IBM and BellSouth. This
phone was named “Simon”. It was
able to access email and fax. It was
the first phone to have a touch screen
to dial a phone number.
In 2002 the Blackberry 5810 was

introduced and could surf the Web.
Not too long after this, the touch
screen and web surfing Iphone made
its appearance. For several years the
Iphone was the leader in the smart
phone world.
In 2007, Android came along and

has evolved to the Iphones’ large
competitor. Most cell service
providers now push the IPhone and
Android because a smart phone tends
to help retain customers.
pg. 5 art 337r

Research Interfaces
Development
Testing History
Conclusion In 1981 Xerox introduced the first
double-clickable icons, overlapping
Activities windows, dialog boxes and a
1024*768 monochrome display. Two
years later Apple, Visi Corp and
Microsoft introduce their first icon/
window interface computers.
Several companies continued to

develop new user interfaces over the
years, each creating their own identity.
It wasn’t until the early 1990’s that this
really happened though. Graphics
grew to be more and more refined
and interfaces developed greater
capacities of color.
As technology progressed, so did

the user interfaces become more
user friendly. A great example of the
importance of user interface design is
the release of Window 8, which tried
to change the paradigm too quickly
and yet incorporate multiple ui’s into
one. It was a confusing interface and
frusturated any users.
pg. 6 art 337r

Research Competitors
Development
Testing
Conclusion
Activities
Prep & Pantry Lite App

This app is one of the many food inventory apps available on the apple app store. This app gives the user the option
to add food items via scanning a barcode or entering in the item manually. The add item screen is the main screen
and displays the menu options at the bottom of the screen. The remove items button changes the add item screen to
remove item. The magnifying glass at the bottom takes the user to a list of items you have already entered to give you
the option to just increase or decrease the quantity. The interface is clean and for the most part uncluttered.
pg. 7 art 337r

Development
Testing
Conclusion
Activities
Food Storage App

This app, like the previous app uses a barcode scanning option or name input to add food items to the inventory list.
This app has a quick menu at the bottom of the screen, allowing the user to access different functions quickly. The lists
of food are categorized by custom categories and are filtered by category and not food item. The interface menus are
nice and up to date, however, the colorful images next to the category names seem a little out dates. This could be
fixed by having a uniform set of icons instead.
pg. 8 art 337r

Development
Testing
Conclusion
Activities
Food Inventory App

This app is designed with a shopping list feature in mind. I am not interested in that feature and therefore will ignore it.
The interface is a little outdated with the gradients and rounded buttons. The list of “contents” shows the item name
and a little description of how much and when it expires. The only problem I see with this is that if you buy the same
item at different times, the expiration dates will not be the same and how would this be handled in a preview like this app
has? Perhaps it could display the closest expiration date.
pg. 9 art 337r

Research Visual Research

Development
Testing
Conclusion
Activities
pg. 10 art 337r

Development
Concept Development for Food Storage Tracker
Development | Food Storage Tracker App
Research Word List

Development
Testing
Word List
Conclusion
Word lists are often helpful
Activities to narrow down how to
communicate a message or
intent clearly. In this case, I
went through the things that
might be associated with my
chosen key words. The words
I chose were food, storage,
inventory, tracking ans food
storage.
pg. 12 art 337r

Research Persona
Development
Testing
Background:
Conclusion
Teresa is a stay-at-home mom with three children, a 7 year old, a
Activities 5 year old and a 3 year old. Teresa and her husband try to keep a
descent amount of food storage on hand in their home. Teresa often
will pull from their food storage when cooking. Teresa stays pretty
busy with their garden and family responsibilities, but she does check
her Iphone ever hour or so to make sure she hasn’t missed any
important messages or to just respond to a friend’s text message.
Teresa almost always keeps her phone near her or on her person.
Objective:
Teresa wants to be able to keep better track of what they have in their
food storage so they buy the right items and keep it replenished.
Challenges:
Name: Teresa Lynn
Teresa has tried to record what they have in food storage in the past,
however it gets really messy when she is constantly crossing items
Age: 32 off and adding those same items back to her list when she goes
shopping. Teresa needs a better way of keeping track of what food
they have in their storage. If she can find an app that will help her
Location: Ogden, Utah get a handle on her food inventory and is simple to add and subtract
items, she will replace her paper pad with the app.
Occupation: Mom
pg. 13 art 337r

Research Senerios
Development
Testing Senerio 1:
Conclusion You just got home from the store and bought a few items for your food storage. You need to add 12 cans of corn, 24 cans of green
beans and 3 - 5 lb bags of wheat flour. You choose to use the scanner option in the Food Storage Tracker App to get all these items
Activities in your inventory. Don’t forget to enter the expiration dates so you can keep track of when things are about to expire.
Senerio 2:
You have been canning all those tomatoes from your garden, and there were a lot this year. You are getting ready to take them down
stairs to the food storage pantry and count 32 - 64 oz jars of tomatoes. You need to quickly add these jars to the Food Storage
Tracker before you forget about them.
Senerio 3:
You are at the store and they are having a great deal on canned beans. You have been trying to get your food starage stocked up.
You know that you have some beans in storage already, but you can’t remember if they are black beans or pinto beans or how many
you have. Use the Food Storage Tracker App to check how many cans of black beans and pinto beans you have so you can buy
what you need.
pg. 14 art 337r

Testing
User Testing and Analysis for Food Storage Tracker App
Research Sketches
Development
Testing
Conclusion
Activities
pg. 16 art 337r

Research Sketches
Development
Testing
Conclusion
Activities
pg. 17 art 337r

Research Sketches
Development
Testing
Conclusion
Activities
pg. 18 art 337r

Research Sketches
Development
Testing
Conclusion
Activities
pg. 19 art 337r

Testing | Food Storage Tracker App
Research Round 01: Sketches

Development
Testing Test 1:
Conclusion The user tried to do senerio 1 and add items to the inventory using the scanner option. When he got to the Add Item screen, he
clicked on the text field area and said, “Then a keyboard would pop up here and I’d type in the food”. He didn’t seem to know what
Activities to do after saying that. I asked him about his response and he said that he just saw the text feild an thought he needed to click on
that. He didn’t realize that it was two different options to add an item on that page.
Test 2:
The user Had no problem getting through senerios 2. He knew how the Add Item page worked at this point and just entered the
name of the item and moved onto entering the quantity and expiration date. I did notice a little bit of hesitation between the quantity
pop up and the expiration date pop up. He took a second longer to hit ‘Done’ due to the incosistant placement of the ‘done’ button.
Test 3:
During senerio 3, the user went right to the inventory list and said he would go to the ‘B’ section of the list bacause he was looking
for beans. We talked about the nameing and ordering of items and he said that it would make more sense for all beans (green
beans, pinto beans, black beans, ect) to be in the ‘B’ section of the list and name then ‘Beans, Green”.
pg. 20 art 337r

Research Round 01: Sketches Analysis

Development
Testing
Change display of Add Item Screen
Conclusion
The user seemed to struggle understanding what was going on the Add Item screen and had some confusion as to where to click
Activities and how to capture a barcode. A portion of this confusion could be due to the fact that we were using very rough paper sketches
and it’s hard to visualize the way it would actually be on a screen. Despite the crude prototype, the Add Item screen could use some
re-designing. Perhaps by moving the scanner option to the top of the screen and placing the text field towards the bottome or just
having a button that says ‘No barcode’ and then taking the user to the New Item screen. This may help cut back confusion.
Item Organization
In test 3, the user was unsure if Pinto Beans would be under ‘B’ for Beans or ‘P’ for Pinto. This is something that could go in the
settings, however it seems that categorizing items as ‘General, Specific’ may be a more establiches convention. For example,
Beans, pinto.
pg. 21 art 337r

Research Paper Prototype 1

Development
Testing
Conclusion
Activities
pg. 22 art 337r


Development
Testing
Conclusion
Activities
pg. 23 art 337r


Development
Testing
Conclusion
Activities
pg. 24 art 337r


Development
Testing
Conclusion
Activities
pg. 25 art 337r

Research Round 02: Paper Prototype 1

Development
Testing Test 1:
Conclusion The user seemed to be able to figure out how to add an item and find the scan bar code option pretty well. Once she added the first
item, I had the app go to the inventory list instead of the home page. She wasn’t quite sure how to go about adding another item
Activities from this screen.
Test 2:
The user found a lot of things that didn’t make sense to her while completing senerio 2. As she was typing in the name of the item,
she wasn’t really sure why is said “No Results” or why is had a Search button in the key board. She said that since the items she
was trying to add was a homemade item, searching it wouldn’t work. Another area of confusion for the user was when she was
entering the quantity of the item, there was no Done button, so she hit Save. It would not have allowed her to save until she entered
an expiration data, but she wasn’t sure how to get rid of the quantity number pad once she was done with it. Finally the user said
that she wouldn’t put an expiration date on homemade stuff, she said, “well, I guess I could just organize it on my shelves and know
that those items wouldn’t show up in the expiration sort”.
Test 3:
During senerio 3, the user brought up the question of what would happen if she had bought the same item at different times and
therefore have different expiration dates. Again the user said that she could just put it on her shelf differently to keep track of the
different times she has bought that item.
pg. 26 art 337r

Research Round 02: Paper Prototype 1 Analysis

Development
Testing
Go Back to the Same Screen
Conclusion
In Test 1, the user successfully added an item, but got confused when the app took her to the inventory list screen instead of the
Activities original page she saw when she started the app. We talked about her confusion and determined that it would be best for the user
if I kept the flow of the app the same. I decided that I needed to decide if I wanted the user to add items from the 3-button home
screen or from the inventory list.
Refine Add Item Process

The user had some confusion as to why the add item screen was having her search for an item instead of just give it what ever name
she wanted to. I think a solution to this is to make the search capability clearer and show the different options better.
Handle Multiple Expiration Dates

A very good gap in functionality came up in tests 2 and 3. I had the user saying that she would just have to come up with a way to
organize her food in order to keep track of the expiration dates of items she’s bought at different times. That was an instant sign that
the Food Storage Tracker App currently does not have the ability to track real peoples food storage. People purchase items little by
little and not often rotate through items to make sure they don’t all go bad at once.
pg. 27 art 337r


Development
Testing
Conclusion
Activities
Load Screen Inventory ->A-Z Screen Inventory ->Expiration

Screen
pg. 28 art 337r


Development
Testing
Conclusion
Activities
Inventory ->Expiration Inventory ->Expiration Inventory ->Expiration

Flyout Menu Screen Flyout Menu Screen Screen
pg. 29 art 337r


Development
Testing
Conclusion
Activities
Add Item Screen Add Item -> Scan Screen Add Item -> Search for
Item Screen
pg. 30 art 337r


Development
Testing
Conclusion
Activities
New Item Screen New Item -> Expiration/ Edit Items Screen
Made on date
pg. 31 art 337r

Research Round 03: Paper Prototype 2

Development
Testing Test 1:
Conclusion The user scrolled through the food list to find the corn insead of clicking the + button in the navigation bar. Eventually he determined
that he had to click the + because corn was not on my list (paper doesn’t afford actual scrolling). If he had see corn on the inventory
Activities list, he would have clicked on it and gone to the corn item screen and could have added more of the item there. Despite the efforts
to make the search or scan screen show all the options for entering the item name, the user was completely unsure as to what to
click.
Test 2 & 3:
The user had frustrations with this senerio also. He suggested that instead of having it be a search text field, it would make more
sense for it to be an “enter item name” text field. The user got through this senerio very quickly, partly because all the information he
needed was on the first screen.
Test 4:
This was a new senerio to test a few features and needs of the user discovered in Round 02 testing. The user was concerned about
how the App would know which items/ expiration date you used. We discussed that perheps the edit item screen would allow the
user to enter how many they use and what the expiration dates were. We found that the current edit page was usless at this point
because all you could do was add of subtract items, but not enter any of the expiration information.
Test 5:
The top navigation bar in the sort items by A-Z and Expiration dates looked different and it makes it a little confusing. One had the
option to minus items and the other had a menu of display options.
pg. 32 art 337r

Research Round 03: Paper Prototype Analysis

Development
Testing
Enter Item Name Screen
Conclusion
Despite my effort to make this screen easier by showing the user more of the options of entering an items name, it completely
Activities confused the user. He was frustrated because he didn’t know what to push next. Apparently I made this screen overly complex in a
failed attempt to make it easier to know what to do. This page will need some serious revising.
Unify Navigation Bars

The navigation bars on the inventory screens do not match. When the items are sorted from A-Z the navigation bar has a minus
and add button, whereas when the items are sorted by expiration date they navigation bar has an add and menu button. This
inconsistency is confusing and frustrating to the user. I will need to unify these two bars in the next iteration.
Keep Working on Edit Screen/ Process

Currently the edit screen is useless because it does not allow the user to add the expiration dates for the items they are adding or
subtracting from their inventory. We discussed that perhaps making it so that when the user clicks on the item in the inventory list,
they will have the option to edit the item there.
pg. 33 art 337r

Research Digital Prototype 1

Development
Testing
Conclusion
Activities
pg. 34 art 337r


Development
Testing
Conclusion
Activities
pg. 35 art 337r


Development
Testing
Conclusion
Activities
pg. 36 art 337r


Development
Testing
Conclusion
Activities
pg. 37 art 337r


Development
Testing
Conclusion
Activities
pg. 38 art 337r


Development
Testing
Conclusion
Activities
pg. 39 art 337r

Research Revised Senerios

Development
Testing Senerio 1 (Testing Inventory):

Conclusion You are at the store with your 3 year old in the cart. The grocery store is having a great sale on canned beans. You know the you
have some beans in storage already, but you can’t remember if they are black beans or pinto beans or how many you have. Use the
Activities Food Storage Tracker App to check how many cans of black beans and pinto beans you have so you can buy what you need.
Senerio 2 (Testing Add):

You just bought 4 cans of asparagus at the store. You need to quickly add them to your Food Storage Tracker App before you
forget. Add 4 cans of asparagus to your Food Storage Tracker App.
Senerio 3 (Testing Edit):

You realized that you entered the wrong expiration date for 2 cans of black beans in your inventory. Change the expiration date on
just those two cans of black beans to the correct date.
Senerio 4 (Testing Delete):

You are making a Mexican dish for dinner that requires 2 cans of black beans. You grabbed two cans out of your food storage to
use tonight. Quickly delete 2 cans of black beans from your Food Storage Tracker App.
pg. 40 art 337r

Research Round 04: Digital Prototype 1

Development
Testing Test 1 (Testing Inventory):

Conclusion The user had no problems determining how much of each item she had. She said it was so easy because the app opened and all
that information she need while at the store was right there on the first screen.
Activities
Test 2 (Testing Add):
This step was pretty easy for the user. She clicked right on the “+” button at the top right of the navigation bar and entered in the
item name and clicked through to enter in all the information. The add funtion worked well.
Test 3 (Testing Edit):

The user was a little hesitant as to where she might be able to edit an item. She did click on the item in the inventory list and saw
the edit option from there. Once on the edit item screen, she really wasn’t sure about how to change the expiration date. She said it
was confusing because the title says “Total Quantity” and yet there are expiration dates too.
Test 4 (Testing Delete):

The user did click the “–” button at the top left of the navigation bar to delete the items, however it was a little confusing when she
got to the next screen because it was just like the edit item screen. She was expecting something simpler where she could just
quickly delete the item.
pg. 41 art 337r

Research Round 04: Digital Prototype 1 Analysis

Development
Testing
Refine the Edit Screen:
Conclusion
The user was confused about the title “Total Quantity” and the “+” button on the right side of that line on the edit item screen. We
Activities discussed how the “+” button there doesn’t seem right and detours the user from clicking the quantities and expiration dates below.
Deceiving Delete Button:

The user felt confused when the delete button (minus symbol) took her to the edit item page. She was expecting a simple delete
item option, not an edit item option. This needs to be changed so that the delete process is more similar to the add item process
rather than trying to merge all these functions onto the same edit item screen.
Sort by Expiration:
The user assumed that since she didn’t see anything telling her that items expired today, this week or this month, all the items in
her food storage must not be expiring for at least 90 days. By making the default settings show all expiration periods, this incorrect
thinking will be cleared up.
pg. 42 art 337r


Development
Testing
Conclusion
Activities
Signifies clicking that brings up the next screen
pg. 43 art 337r


Development
Testing
Conclusion
Activities
pg. 44 art 337r


Development
Testing
Conclusion
Activities
pg. 45 art 337r


Development
Testing
Conclusion
Activities
pg. 46 art 337r


Development
Testing
Conclusion
Activities
pg. 47 art 337r


Development
Testing
Conclusion
Activities
pg. 48 art 337r


Development
Testing
Conclusion
Activities
pg. 49 art 337r


Development
Testing
Conclusion
Activities
pg. 50 art 337r


Development
Testing
Conclusion
Activities
pg. 51 art 337r

Research Round 05: Digital Prototype 2

Development
Testing Senerio 1 (Testing Inventory):

Conclusion The user found the number of pinto and black beans very quickly. He said that he liked how the food list had the quick preview of
quantity and nearest expiration date.
Activities
Senerio 2 (Testing Add):
The user had no problem adding the items to his inventory. He said the “+” made it very clear that he could click it to add an item.
Senerio 3 (Testing Edit):

The user hesitated when he was trying to find the edit item option. He clicked on the item from the inventory list and then realized
that he was correct. He then hit “edit” and then clicked on the expiration date and edited it.
Senerio 4 (Testing Delete):

The user was able to delete the 2 cans of black beans with ease. He said that it seemed simple enough. He did remark that
he doesn’t think the expiration dates are necessary, but maybe some people would like that option to sort their food storage by
expiration date.
pg. 52 art 337r

Research Round 05: Digital Prototype 2 Analysis

Development
Testing
Make the Items look more click-able:
Conclusion
The user took a little bit of time to find the edit option for the item. Perhaps by adding the green color to the “>” looking symbols,
Activities the user may think that by clicking there, they will be taken to another screen.
Add Color:
The user commented on how dull the colors were. He suggested that the app wasn’t so gray and maybe add more color in. I am
going to go through and add color to help the interface look more pleasant.
pg. 53 art 337r

Conclusion
An easy food inventory tracking app
Conclusion | Food Storage Tracker App
Research Final App Design

Development
Testing
Conclusion
Activities
pg. 55 art 337r


Development
Testing
Conclusion
Activities
pg. 56 art 337r


Development
Testing
Conclusion
Activities
pg. 57 art 337r


Development
Testing
Conclusion
Activities
pg. 58 art 337r


Development
Testing
Conclusion
Activities
pg. 59 art 337r


Development
Testing
Conclusion
Activities
pg. 60 art 337r


Development
Testing
Conclusion
Activities
pg. 61 art 337r


Development
Testing
Conclusion
Activities
pg. 62 art 337r


Development
Testing
Conclusion
Activities
pg. 63 art 337r

Research Final Food Storage Tracker App

Development
Testing The Food Storage Tracker App is at the final

stage of design and ready to begin round one of
Conclusion development. To view the interactive prototype
for Food Storage Tracker visit https://invis.io/
Activities SQ4HRUCFA
Design Presentation: https://youtu.be/_cmBd4Ltbiw
pg. 64 art 337r

Food Storage Tracker Design Spec

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Food Storage Tracker Design Spec

Încărcat de

Drepturi de autor:

Formate disponibile

Food Storage Tracker

An easy food inventory app

Project Overview Requirements

pg. 3 art 337r

It wasn’t until around 1887 that the

In the late 1930’s the development

In 1967 the first “hand-held” calculator

Today everyone who has a cell phone

pg. 4 art 337r

Research Smart Phones

The first smart phone was introduced

In 2002 the Blackberry 5810 was

In 2007, Android came along and

pg. 5 art 337r

Several companies continued to

As technology progressed, so did

pg. 6 art 337r

Prep & Pantry Lite App

pg. 7 art 337r

Food Storage App

pg. 8 art 337r

Food Inventory App

pg. 9 art 337r

Research Visual Research

pg. 10 art 337r

Research Word List

pg. 12 art 337r

pg. 13 art 337r

pg. 14 art 337r

pg. 16 art 337r

pg. 17 art 337r

pg. 18 art 337r

pg. 19 art 337r

Research Round 01: Sketches

pg. 20 art 337r

Research Round 01: Sketches Analysis

pg. 21 art 337r

Research Paper Prototype 1

pg. 22 art 337r

Research Paper Prototype 1

pg. 23 art 337r

Research Paper Prototype 1

pg. 24 art 337r

Research Paper Prototype 1

pg. 25 art 337r

Research Round 02: Paper Prototype 1

pg. 26 art 337r

Research Round 02: Paper Prototype 1 Analysis

Refine Add Item Process

Handle Multiple Expiration Dates

pg. 27 art 337r

Research Paper Prototype 2

Load Screen Inventory ->A-Z Screen Inventory ->Expiration

pg. 28 art 337r

Research Paper Prototype 2

Inventory ->Expiration Inventory ->Expiration Inventory ->Expiration

pg. 29 art 337r

Research Paper Prototype 2

pg. 30 art 337r

Research Paper Prototype 2

pg. 31 art 337r

Research Round 03: Paper Prototype 2

pg. 32 art 337r

Research Round 03: Paper Prototype Analysis