Omnivore App UX

Wendy Chu Omnivore Final Presentation
Introduction
General Assembly UXD3
Creator
Class
OMNIVORE count colors, not calories

Overview
Creator
Class
What is Omnivore?
• Food tracking app that helps you eat more healthily (i.e. more fruits & veg. & less
processed food, meat, carbs, and sweets). It does not (yet) track exercise or weight, focusing
solely on the food you eat.
• Records and categorizes the colors of your food through phone camera or manual entry.
Recording colors has been shown to be more successful in promoting healthier eating habits
and weight loss than counting calories.
• Gives personalized suggestions and tips (called "Good Ideas") based on your eating
habits, and lets you easily view previous healthy entries to encourage repeating.
• Reminds you what to eat based on your data at times of your choosing.
Which colors did you eat?
1
2
Crop Edit Details Finish
3
3G 10:00 AM
Week of March 4, 2013
Doing okay. Try cutting down
on the beiges and eating more
reds & yellow-greens.
20%
15%
3
10%
5%
4
This Week This Month All Time
too little too much
5
Your Food This Week
1
2
6
3.1
Your Good Meals
Tip Title
Tip preview text. Tip preview text.
1 2
4 6
Tip Title
Tip Title
Tip Title
5
3G 10:00 AM
...
Record Color Data Good Ideas Alerts More
7
3
3G
10:00
Sunday, February 17
Omnivore
Time for [Meal Name]! Be sure to eat plenty of
[color] and [color] and record your meal!
1 2
- - > slide to unlock

Competitive Analysis - The Eatery
Creator
Class
Launch Sequence intro Survey Food Entry (Photo)
Food Entry (Text) Food Data Social Rating
Strengths:
• Nice & simple launch sequence
• Signup not necessary
• Very simple interface
• Option for text-only input
• Easy to track what and how healthily you're eating over time, and
success is only concerned with food, not exercise or weight
• Interesting inclusion of "place insights"
Weaknesses:
• Location data not always accurate/not always available to change
• Ratings can be varied and reflects our society's confusion about what is
healthy or unhealthy
•Fit vs. Fat can give the wrong impression -- low fat is not always healthier (see
recent studies about the benefits of a Mediterranean diet vs. low-fat diet).

Competitive Analysis - Pic Healthy
Creator
Class
Launch Sequence Food Data Food Entry
Social Rating
Strengths:
• Simple launch sequence
• Signup not necessary
• Very simple interface
• Easy to track what and how healthily you're eating over time, and
success is only concerned with food, not exercise or weight
Weaknesses:
• No option for text-only input -- need to use photo
• Ratings can be varied and reflects our society's confusion about what is
healthy or unhealthy
• Calories can be entered, but must be manually entered.
• Much lower user engagement than on The Eatery --> more skewed results

Competitive Analysis - MealLogger
Creator
Class
Launch Sequence
Food/Misc. Data
Signup/Login Food Entry (Photo) Food Entry (Text)
Strengths:
• Easy sign-up
• Photo or text entry options
• Can track nutritional, exercise, sleep and weight data, though
mostly manually.
• Can connect to other fitness apps to integrate data.
• Easy to track what you are eating over time.
Weaknesses:
• Lack of insight about whether one is eating well.
• Data tracked is not strongly food-related

Competitive Analysis - MyFitnessPal
Creator
Class
Signup/Login
Intro Survey
Food Entry Food Data
Strengths:
• Large database of foods with nutritional info
• Easy to add many items at once and repeat past entries.
• Easy to track weight changes over time.
Weaknesses:
• Intro survey seems excessively long when first interacting with the app
• Calories are of paramount importance to this app, but it's hard to judge
accuracy bless food is packaged--deeply ironic. This leads to precise but
inaccurate data.
• Focus is strongly on weight as a success factor. Not ideal for someone wo
wants to stay the same weight but eat healthily.

Competitive Analysis - Feature Comparison
Creator
Class
Meal Logger
•Connect to an expert (Paid)
•Share info with FB friends
•Slideshow about general features •Single tutorial slide
•Rate other users' food
•Comments & likes
•See what FB friends are eating
Login/
Signup
Social
•Rate other users' food
•Comments
•Compete with friends & other users
on leaderboard.
•See friends' activities & logs
•Comments
•Connect through FB and with
contacts.
•Exercise (can connect to other apps)
•Weight, sleep, steps vs. targets
•Can add daily or weekly notes
MyFitnessPal
•See overview in journal
•Check progress toward goals.
•Aggregate rating for the week
•Location vs. eating patterns
•Weekly insight
•Tracks improvement between days
Food
Entry
Pic Healthy
•Take photo or enter text only
•No option to pick from photo library
•Meal name, and date + time required
•Meal foods & calories optional
Food
Data
•None required.
•Connect to Facebook for "Scores".
•Progress measured via weight & net
calories
•Daily & weekly nutrition details vs.
goals from database or self-recorded
info.
•Must register with email + password
or connect to Facebook.
Launch
•Individual crowdsourced "Fit or Fat"
rating for each entry
•Weekly overall "Fit or Fat" rating
•Location automatically recorded
•None
Insights
•Dialog boxes when using features
for the first time
•See at a glance which meals were
healthy & which were tasty.
•Must register with email or log in with
Facebook.
•Can set & track goals for calories,
carbs, protein
•None required.
•Option to connect to Facebook to
see friends' food logs.
•Search for food info in database,
scan barcode, create new food, add
calories only, multi add function
•No photo option
•Take photo or pick from library
•No text option
•Rate tastiness and healthiness
•Healthiness is crowdsourced
•Optional food name, location, and
calorie information
•Various personal data from into
survey.
•Weight changes, exercise details
(can connect to other pas)
•Healthiness is crowdsourced
•Scores (social) let user compete with
others on healthiness, participation &
honesty
The Eatery
•None
•No launch tutorial. Tutorial videos
can be accessed later.
•Take photo, pick from library, or enter
text
•Rate it on 100pt scale of Fit to Fat
Other
Data
•States whether you are eating too
many or too few calories
•Weight projection in 5 weeks
•Net calorie recommendation based
on intro survey info

Competitive Analysis - Takeaways
Creator
Class
Strengths:
• Easy to track food over time,
which has been shown to
improve eating habits in and of
itself.
• Option for text-only input
• Interesting inclusion of "place
insights," (The Eatery) as some
eating habits do tend to be
location-specific.
Weaknesses:
• Most of the apps are too weight- or calorie-focused, which aren't the most
relevant factors for eating "well"
• Crowdsourcing nutrition information magnifies American misconceptions of food
healthiness, especially when it comes to misleading processed "healthy" foods.
•Success factors don't support the idea of "eating well" as it should be
understood in terms of eating whole foods--In Michael Pollan's words, "Eat [whole]
foods, not too much, mostly plants"
•Lack of real insights on what one ought to be eating to "eat better"

Persona
Creator
Class
I want to eat healthily to take care of
my body, but I'm also really busy.
Motivation:
• Cares about eating
well and wants to be
healthy.
• Thinks she should be
eating better -- i.e.
fruits and vegetables.
Name: Janie Campbell
Age: 28
Location: Oakland, CA
Occupation: Merchandising
Associate
Demotivation:
• Has a hard time
remembering what she
has already eaten &
whether or not it was
healthy.
• Is very busy, and often
ends up eating
prepackaged or prepared
foods.
• Feels like diet programs
and calorie counters
aren't for her since she's
not trying to lose weight.
Janie's Needs:
• Motivation to eat more fruits and
veggies.
• A simple way to tell if she’s eating well
that is not calorie- or weight-focused.
• Learn easy ways to incorporate more
fruits & veggies into her busy lifestyle.

User/Business Goals
Creator
Class
Janie's Needs
Motivation to eat more fruits &
veggies.
A simple way to tell if she's
eating well, since she has a
general idea of what it means to
eat healthily.
To learn easy ways to
incorporate fruits & veggies
into her busy lifestyle.
Business Goals Features
Make it easy to keep track of what they are
eating with the food data tab. Shows overall
colors and photos of food from selected time
period as well as an overall healthiness
rating.
Alerts function helps remind user to eat &
log food information.
Help users to make healthy
decisions based on what they
have already eaten.
Encourage users to regularly
use app and enter their meal
information.
Offer insights about how the user is doing
and suggestions (Good Ideas) with easy
ways to incorporate colors into their meals.
For users to be more aware
of what they eat and whether
it's healthy
Have users keep track of food colors, which
has been shown to produce healthier results
than counting calories, since it prioritizes
eating of fruits and vegetables.
For users to eat more
healthily. Specifically, more
fruits & vegetables and less
processed foods, meats, and
sweets.

Application Map
Creator
Class
Loading
Screen
Record
Launch
Experience
(1st time only)
NAVIGATION
Color Data Good Ideas Reminders More
Add
Reminder
Individual
Idea Page
Take Photo
Food Entry
Detail
Edit Details Crop Photo

Wireframes
Creator
Class
Launch Sequence
Eat better by eating more colors.
Omnivore helps you keep track!
Omnivore helps you eat better by
recording the colors of your food. No
swipe to continue
1
3
2
calorie counting required!
swipe to continue
3
2
1 Exit Introduction
Exit Eat More Colors
Eat lots of colors & limit beiges (meats,
starches, processed food) and greys
swipe to continue
1
3
2
(sweets) for best results.
Snap a picture of food to quickly record
your colors. No cheating with Skittles!
swipe to continue
1
3
2
Exit Record Pics
Exit Keep it Up
Color-focused Good Ideas & Alerts
swipe to continue
1
2
help you keep it up!
Exit Get Started!
swipe to continue
1
3
2
Get started now!
1
Record Reminders
Record your first
food entry
Remind yourself
which colors to eat
1
2
1. Record Button (enlarged)
This is a larger version of the record button on the
main nav. When tapped, it will animate by
shrinking down to the bottom left corner where it
usually lives, and the rest of the bottom nav will
expand from it.
2. Reminders Button
Animation same as the Record button. This will
take yu to the reminders page.
1. Exit button
Allows user to bypass the intro sequence and go
directly to the main page (record).
2. Animated Swipe instruction
Tells the user how to continue on in the tutorial. This
will only be displayed on the first page, as reaching
subsequent pages indicates that the user has
learned how to operate the system.
3. Slideshow dots
Indicates that there are multiple pages of content
and where the user is in the progression.

Wireframes 2
Creator
Class
Record Function
1
...
3G 10:00 AM
+ Add an Entry
Recorded Today
Grilled Cheese and
Tomato Soup
Corn Flakes & Milk
Granola Bar
Record Color Data Good Ideas Reminders More
2
3
Record
2
1. Add meal button
This takes the user to page 2, where you can add a
meal.
2. Today's food section
Displays all the food recorded for the current day.
3. Meal Entry
The entry displays the associated photo (or in the
absence of a photo, a color data graph) and the text
that was entered along with it.
4. Goodness indicator
Indicates how "good-for-you" the meal was based
on the color information.
No photo 3
1 Cancel Take Photo
5
4
6
Take Photo
Copy past entry
2
1. Cancel Button
Cancels the recording action and returns user to
page 1
2. Copy past entry button
Allows the user to select from previously recorded
meals. Will show the user's previous meal photos in
order of frequency and then recency.
3. No photo button
Allows the user to bypass the photo function and
record color data + text only. Skips forward to page
4.
4. Photo
Displays the image from the phone camera
5. Take photo button
Tapping will take the photo displayed and move the
user to page 3.
6. Camera Roll button
Tapping this will allow the user to select from the
images from their camera roll.
1 Camera Crop Photo Next 2
Oval Rectangle Geometric Freehand
For the most accurate color estimates,
crop as closely to food as possible.
3
4
1. Back Button
Goes back to Page 2: camera function
2. Next button
Takes user to next step, page 4. Cropping will no be
finalized until this button is tapped.
3. Crop Shape/vertices
Displays the shape to which the photo is cropped
and vertices to reshape. Geometric & Freehand
versions will not be editable after completion, but
will instead will bring up contextual reset buttons
when selected.
4. Crop shape selection
Allows user to select crop shape/method,
depending on the space the meal occupies on the
plate. Oval is the default selection.
Which colors did you eat?
How much did you eat?
a moderate amount
What did you eat?
Chicken, mac & cheese, green beans
1
2
4
Crop Edit Details Finish
3
1. Cropped Image
Shows the image after it has been cropped.
2. Color Content "?" buttons
Displays more detailed info about which foods count as
which colors, to refresh user's memory.
3. Color adjustment controls
Allow user to adjust each color to account for program
errors/ filtering out any background colors. This is done by
swiping up/down on the relevant color.
4. Amount slider
Allows for entry of food size, to account for proportions
between meals. Default is "medium."

Wireframes 3
Creator
Class
Color Data
3G 10:00 AM
Week of March 4, 2013
This Week This Month All Time
too little too much
Doing okay. Try cutting down
on the beiges and eating more
reds & yellow-greens.
20%
15%
3
10%
5%
4
...
5
Your Food This Week
1
2
6
6.1
3.1
1. Time period indicator
2. Time period selector
Choose time period to view. This will display data relevant
to that time period. Default will be current week.
3. Color graph
This graph shows all relevant color data for the period,
including overages/deficits of colors where relevant to
visually represent the user's eating habits vs. the ideal.
3.1: Question buttons - When tapped, information will
appear about which foods are included in that color
category, in case the user can't remember.
4. Status indicator
This graphic will indicate overall how well you have eaten
during the selected time period. 3 statuses are
possible. :-), :-|, and :-(. They will be colored differently as
well.
5. Personalized recommendation
The data from the time period will be compared to the data
in the ideal chart, and a personalized recommendation will
be made about how you're doing. Color suggestions will
link to relevant quick tips. If the user is doing very well, it
will simply say words of encouragement, such as
"Looking good! Keep it up!"
6. Photo thumbnails
Thumbnails will be shown for the foods recorded during
the time period. Tapping an image will display the details
of the recorded meal.
6.1: No Photo - If an entry did not include a photo, the
colors consumed will be displayed as a mini bar graph of
the colors that were recorded in that entry.
Your Good Meals
Tip Title
Good Ideas
1 2
4 6
Tip Title
Tip Title
Tip Title
5
3G 10:00 AM
...
7
3
1. Color filters (unselected)
These circle controls up top allow for refinement of tips
based on color. Select colors by tapping. Selected colors
will be highlighted in some way to indicate that they are
active. Selecting one or more colors will display only the
tips of that color (see page 2). Deselecting a color will
make tips of that color disappear. When no colors are
selected, which is the initial state, all tips will show.
2. Search Button
Tapping the search button will bring up the search bar +
qwerty keypad. See page 3.
3. Good Meals
This will show meals that are deemed "good" by the app
due to color content.
4. Color labels
These color labels indicate the color of the corresponding
tip. Only one color can be assigned to each tip.
5. Bookmark Icon
These icons signify that these tips have been bookmarked
for easy viewing later. Relevant bookmarked tips will
appear at the top of quick tips pages-- e.g. if one green
and one red tip are bookmarked, and the green filter is
applied, the bookmarked green tip will display at the top,
but the red one will not.
6. Tip Link
Tapping this arrow will take you to the page of the
corresponding tip.
7. Quick tips tab
Tapping this button will take the user to the page displayed
here. When active, it will be highlighted in a brighter color.

Wireframes 4
Creator
Class
Good Ideas (Cont.)
3G 10:00 AM
Your Good Meals
Tip Title
Tip Title
Tip Title
...
Tip Title
2
1
1. Selected color filter
When one color is selected, only tips of that color
are displayed. When 2 or more colors are
selected, only tips for those colors are displayed,
in order from newest to oldest; tips of the same
color are not grouped together. Only good meals
for the selected colors are shown. Color data
should be evident from thumbnail.
3G 10:00 AM 1 2
Search Cancel
Autocomplete 1
Autocomplete 2
Autocomplete 3
4
Autocomplete 4
Autocomplete 5
Q W E R T Y U I O P
A S D F G H J K L
123
Z X C V B N M
space search
3
5
1. Search Bar
Search query will be typed here
2. Cancel Button
Tapping here will cancel the search and take the
user back to the initial state (page 1), with any
color filters previously selected remaining
selected.
3. Autocomplete options
Before user begins typing, recent searches will be
displayed here. Autocomplete options will begin to
populate automatically as the user types.
4. Autocomplete links
Tapping on an autocomplete/past search option
will take the user to the search results for that
search
5. Search Button
Tapping this button will bring up the search results
for the search term that was types in the search
bar.
3G 10:00 AM 1 2
Search Good Ideas
Tip Title Lorem Ipsum
It is not meant to be read. It has been
placed here solely to demonstrate the look
and feel of finished, typeset text. It is not
meant to be read. It has been placed here
solely to demonstrate the look and feel of
finished, typeset text. It is not meant to be
read. It has been placed here solely to
demonstrate the look and feel of finished,
typeset text.
3
+
1. Back Button
Tapping this button will take you to the previous
screen--generally something like page 1 or page
3. It will be labeled accordingly--e.g. "search" or
"tips"
2. Bookmark Button
Tapping this button will bookmark this tip for the
future. Bookmarked tips will always be displayed
at the top of tips pages, when relevant.
3. Tip Image
This image is relevant to the tip. For instance, a
photo of broccoli for a tip about eating broccoli.

Wireframes 5
Creator
Class
Reminders
3G 10:00 AM
Reminders
+
1
Omnivore tells you what colors
you should eat. Just say when.
Set times to eat & record your meals
every day, and get a reminder with the
colors you should be eating. No more
skipping lunch by accident!
Use Suggested Reminders
2
Add a Reminder 1
...
1. Add Button
Tapping these buttons will take you to page 3,
where you will be able to add a new reminder.
2. Use Suggested Reminders button
This will give the user a list of defaults
(breakfast, lunch, dinner) for each day, since
people generally have the same meals every
day. THis will give them jumping-off points to
work with rather than having to create them from
scratch.
3G 10:00 AM
Cancel
Add Reminder
1
Save
2
Name (Lunch, Snack, etc.)
Repeat Every Day
Sound Duck
AM
PM
15
16
17
18
19
5
6
7
8
9
3
5
4
...
1. Cancel Button
Tapping this will cancel the add acton and return the
user to the main reminder screen.
2. Save Button
Saves current selections. If meal has not been
named, defaults to "Meal#", where # is the number of
reminders in the list including the one just added.
3. Repeat Frequency
Default will be every day.
4. Sound Selection
Default will be either the first sound in the iPhone
sounds list or the last used sound.
5. Time Selection
Default will be current time.
3G 10:00 AM
Edit
1 Reminders
+
2
Breakfast
Lunch
Dinner
On
On
On
8:00 AM Every Day
12:00 PM Every Day
8:00 PM Every Day
3
4
5
...
1. Edit Button
Tapping this button will allow you to edit/delete the
alarms that have already been created.
2. Add Button
Tapping these buttons will take you to page 3,
where you will be able to add a new reminder.
3. Reminder Name
This is user-defined when setting up the reminder
4. Time & Day(s)
This is user-defined when setting up the reminder.
In addition to the usual (e.g. Mon, Tue, Wed, etc. it
will also display "Every day," "Weekdays," and
"Weekends").
5. On/Off toggle
3G
10:00
Sunday, February 17
Omnivore
Time for [Meal Name]! Be sure to eat plenty of
[color] and [color] and record your meal!
1 2
slide --> to unlock
1. App icon
2. Alert Text
Alerts you during the reminder times that the user
set with the meal name and relevant color
information. Sliding will take the user to the meal
recording function.
If no reminder functions are set by the user, app
will remind user once per day at noon about
recording their food and what colors they should
be eating.
If user has lapsed, (failing to record food for 2
weeks) then an alert will show up once per week
on Mondays to start recording food again.

User Flow
Creator
Class
Lunchtime
(1 PM)
Gets alert on
phone to eat lunch
& which colors to
eat
Swipes alert
Sees "Good Ideas"
and past good meals
near her location with
those colors
Buys food based
on "Good Ideas" info
Opens
Omnivore App
Taps "Add an
Entry"
Draws crop
shape
Views change to
overall color data Closes App
Closes app
Record page
Camera
page
Takes Photo
Crop Photo
page
Taps "Next"
button
Refine Data
page
Refines
colors
select
portion
size
enters
description
Taps
"finish"
Record page

Future Enhancements
Creator
Class
Future Enhancements:
• Ability for user to write new Good Ideas and add notes to existing ones (for personal viewing)
• Social features, including shared Good Ideas, comments, comparison of own progress with
friends', and sharing via Twitter, FB, Pinterest.
• More location-based features, such as community-sourced Good Meals nearby
• Possible gamification, with badges, various goals (e.g. Don't eat any beige for a whole day"),
and other random surprises and delights.
•Potential partnerships with healthy restaurants and eateries to promote app usage and healthy eating.
Restaurant entree images & color data included an in-app database for truly easy recording.
• Camera recognition of some common foods/packaged foods a la Google Goggles.
• Color Data could be approximated on text entries via understanding of keywords (e.g. a text entry of
"roasted beets" would cause colors to automatically set to purple) with inclusion of stock photos?

Finish
Creator
Class
IT'S OVER!

Omnivore App UX

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Omnivore App UX

Semelhante a Omnivore App UX (20)

Último

Último (20)

Omnivore App UX