Omnivore UX Documentation

Omnivore Final Presentation

Introduction

OMNIVORE count colors, not calories

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Overview

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.

Crop

Edit Details

3G Finish

3G

10:00 AM

10:00 AM

3G 1

Week of March 4, 2013

1

This Week

2

All Time

This Month

2

10:00

Your Good Meals

Sunday, February 17 too little

3

too much

20% 1 15% 4 3 10%

5

Tip Title

6

Tip preview text. Tip preview text.

Omnivore 1

Tip Title

5%

Time for [Meal Name]! Be sure to eat plenty of [color] and [color] and record your meal!

Tip preview text. Tip preview text.

2

Which colors did you eat?

3.1

4 3

Tip Title Tip preview text. Tip preview text.

Doing okay. Try cutting down on the beiges and eating more reds & yellow-greens.

Tip Title

5

Tip preview text. Tip preview text.

Your Food This Week Record

6

Color Data Good Ideas

7

Alerts

...

More

-->

slide to unlock

2

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Competitive Analysis - The Eatery

Launch Sequence

Food Entry (Text)

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"

intro Survey

Creator

Wendy Chu

Class

General Assembly UXD3

Food Entry (Photo)

Food Data

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).

Social Rating

Omnivore Final Presentation

Competitive Analysis - Pic Healthy

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

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Competitive Analysis - MealLogger

Launch Sequence

Signup/Login

Food Entry (Photo)

Food/Misc. Data

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

Food Entry (Text)

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Competitive Analysis - MyFitnessPal

Signup/Login

Intro Survey

Food Entry

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.

Food Data

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.

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Competitive Analysis - Feature Comparison

The Eatery

Pic Healthy

Meal Logger

Creator

Wendy Chu

Class

General Assembly UXD3

MyFitnessPal

Launch

•Slideshow about general features

•Single tutorial slide

•Dialog boxes when using features for the first time

Login/ Signup

•None required.

•Option to connect to Facebook to see friends' food logs.

•None required.

•Connect to Facebook for "Scores".

•Must register with email + password or connect to Facebook.

•Must register with email or log in with Facebook.

•Take photo, pick from library, or enter text •Rate it on 100pt scale of Fit to Fat

•Take photo or pick from library •No text option •Rate tastiness and healthiness •Healthiness is crowdsourced •Optional food name, location, and calorie information

•Take photo or enter text only •No option to pick from photo library •Meal name, and date + time required •Meal foods & calories optional

•Search for food info in database, scan barcode, create new food, add calories only, multi add function •No photo option

•Can set & track goals for calories, carbs, protein

•Progress measured via weight & net calories •Daily & weekly nutrition details vs. goals from database or self-recorded info.

•Exercise (can connect to other apps) •Weight, sleep, steps vs. targets •Can add daily or weekly notes

•Various personal data from into survey.

•Weight changes, exercise details (can connect to other pas)

•See overview in journal •Check progress toward goals.

•States whether you are eating too many or too few calories •Weight projection in 5 weeks •Net calorie recommendation based on intro survey info

•Connect to an expert (Paid) •Share info with FB friends

•See friends' activities & logs •Comments •Connect through FB and with contacts.

Food Entry

Food Data Other Data

Insights

Social

•Individual crowdsourced "Fit or Fat" rating for each entry •Weekly overall "Fit or Fat" rating •Location automatically recorded

•None

•Healthiness is crowdsourced •Scores (social) let user compete with others on healthiness, participation & honesty

•None

•Aggregate rating for the week •Location vs. eating patterns •Weekly insight •Tracks improvement between days

•See at a glance which meals were healthy & which were tasty.

•Rate other users' food •Comments & likes •See what FB friends are eating

•Rate other users' food •Comments •Compete with friends & other users on leaderboard.

•No launch tutorial. Tutorial videos can be accessed later.

Omnivore Final Presentation

Competitive Analysis - Takeaways

Strengths:

Weaknesses:

• Easy to track food over time, which has been shown to improve eating habits in and of itself.

• 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.

• Option for text-only input • Interesting inclusion of "place insights," (The Eatery) as some eating habits do tend to be location-specific.

•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"

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Persona

Creator

Wendy Chu

Class

General Assembly UXD3

I want to eat healthily to take care of my body, but I'm also really busy.

Name: Janie Campbell Age: 28 Location: Oakland, CA Occupation: Merchandising Associate

Motivation:

Demotivation:

• Cares about eating well and wants to be healthy.

• Has a hard time remembering what she has already eaten & whether or not it was healthy.

• Thinks she should be eating better -- i.e. fruits and vegetables.

• 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.

Omnivore Final Presentation

User/Business Goals

Janie's Needs

Business Goals

Creator

Wendy Chu

Class

General Assembly UXD3

Features

For users to eat more healthily. Specifically, more fruits & vegetables and less processed foods, meats, and sweets.

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.

A simple way to tell if she's eating well, since she has a general idea of what it means to eat healthily.

For users to be more aware of what they eat and whether it's healthy

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.

To learn easy ways to incorporate fruits & veggies into her busy lifestyle.

Help users to make healthy decisions based on what they have already eaten.

Offer insights about how the user is doing and suggestions (Good Ideas) with easy ways to incorporate colors into their meals.

Encourage users to regularly use app and enter their meal information.

Alerts function helps remind user to eat & log food information.

Motivation to eat more fruits & veggies.

Omnivore Final Presentation

Application Map

Loading Screen Launch Experience (1st time only)

NAVIGATION

Edit Details

Crop Photo

Record

Color Data

Good Ideas

Reminders

Take Photo

Food Entry Detail

Individual Idea Page

Add Reminder

More

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Wireframes

Creator

Wendy Chu

Class

General Assembly UXD3

Launch Sequence

1

Exit

Introduction

Exit

Eat More Colors

Exit

Eat better by eating more colors.

Omnivore helps you youeat keep track!

Omnivore helps better by

Eat better by eating more colors.

Omnivore helps Eat lots of colors & you limit keep beigestrack! (meats,

recording the colors of your food. No calorie counting required!

starches, processed food) and greys (sweets) for best results.

1

Record Pics

Exit

Eat better by eating more colors.

Omnivore helps you keep track!

Snap a picture of food to quickly record your colors. No cheating with Skittles!

1

Keep it Up

Exit

Eat better by eating more colors.

Omnivore helps you keep track!

Color-focused Good Ideas & Alerts help you keep it up!

1

Get Started!

Eat better by eating more colors.

Omnivore helps you keep track!

Get started now!

1 1 1

2

1

swipe swipe to to continue continue

22

33

1.

Exit button

2

swipe to continue

3

2

swipe to continue

swipe to continue

2

3.

Slideshow dots Indicates that there are multiple pages of content and where the user is in the progression.

Record your first food entry

Remind yourself which colors to eat

3

2

3

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.

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.

Reminders

swipe to continue

Allows user to bypass the intro sequence and go directly to the main page (record).

2.

Record

2.

Reminders Button Animation same as the Record button. This will take yu to the reminders page.

Omnivore Final Presentation

Wireframes 2

Record Function

3G

10:00 AM 1

Record

Cancel

Take Photo Take Photo

Camera

Crop Photo

Next

Crop

2

Edit Details

Finish

2

Copy past entry

+ Add an Entry

1

No photo

3

1

Recorded Today

2

1

3

Grilled Cheese and Tomato Soup

3

2

4

Corn Flakes & Milk

2

Which colors did you eat?

4

Granola Bar

Record

Color Data Good Ideas Reminders

5

3

6

Oval

...

Rectangle

Geometric

Freehand

For the most accurate color estimates, crop as closely to food as possible.

More

How much did you eat?

a moderate amount 4

1.

Add meal button

1.

Cancels the recording action and returns user to page 1

This takes the user to page 2, where you can add a meal.

2.

Today's food section

2.

4.

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.

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.

1.

What did you eat?

Goes back to Page 2: camera function

3.

2.

3.

Photo Displays the image from the phone camera

5.

Take photo button

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.

No photo button Allows the user to bypass the photo function and record color data + text only. Skips forward to page 4.

4.

Next button Takes user to next step, page 4. Cropping will no be finalized until this button is tapped.

Goodness indicator Indicates how "good-for-you" the meal was based on the color information.

Back Button

Chicken, mac & cheese, green beans

Displays all the food recorded for the current day.

3.

Cancel Button

4.

1.

Shows the image after it has been cropped.

2.

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.

Tapping will take the photo displayed and move the user to page 3.

6.

Color Content "?" buttons Displays more detailed info about which foods count as which colors, to refresh user's memory.

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.

Cropped Image

Camera Roll button Tapping this will allow the user to select from the images from their camera roll.

4.

Amount slider Allows for entry of food size, to account for proportions between meals. Default is "medium."

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Wireframes 3

Color Data 1.

2.

3G

10:00 AM

This Week

2

3G

3.

too much

15%

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%

3.1

5.

Doing okay. Try cutting down on the beiges and eating more reds & yellow-greens.

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!"

5

Your Food This Week

3.

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

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.

Record

Color Data Good Ideas Reminders

...

More

5

Tip Title Tip preview text. Tip preview text.

4.

Tip Title

5.

Tip preview text. Tip preview text.

7

Alerts

...

More

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.

Tip Title

Color Data Good Ideas

Color labels These color labels indicate the color of the corresponding tip. Only one color can be assigned to each tip.

Tip preview text. Tip preview text.

Tip preview text. Tip preview text.

Good Meals This will show meals that are deemed "good" by the app due to color content.

6

Tip Title

Search Button Tapping the search button will bring up the search bar + qwerty keypad. See page 3.

3

Record

6.

2.

Your Good Meals

4 3 10%

2

Color graph

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.

20%

4

10:00 AM

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.

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.

Time period selector

1

All Time

This Month

too little

1.

Time period indicator

Choose time period to view. This will display data relevant to that time period. Default will be current week.

Week of March 4, 2013

1

Good Ideas

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.

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Wireframes 4

Good Ideas (Cont.)

3G

1

10:00 AM

3G

1

10:00 AM

3

10:00 AM 1

Search

Cancel

Search Your Good Meals

3G

2

Good Ideas

2

+

4

Autocomplete 1

Tip Title Lorem Ipsum

2

Autocomplete 2 3

Autocomplete 3

Tip Title Tip preview text. Tip preview text.

Autocomplete 4

Tip Title

Autocomplete 5

Tip preview text. Tip preview text.

Q W E R T Y U I O P

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.

Tip Title Tip preview text. Tip preview text.

A S D F G H J K L

Tip Title

Z X C V B N M

Tip preview text. Tip preview text.

Record

Color Data Good Ideas

Alerts

...

123

More

space

search 5

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.

1.

Search Bar Search query will be typed here

2.

4.

Autocomplete links Tapping on an autocomplete/past search option will take the user to the search results for that search

5.

2.

Search Button Tapping this button will bring up the search results for the search term that was types in the search bar.

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.

Autocomplete options Before user begins typing, recent searches will be displayed here. Autocomplete options will begin to populate automatically as the user types.

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"

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.

1.

3.

Tip Image This image is relevant to the tip. For instance, a photo of broccoli for a tip about eating broccoli.

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Wireframes 5

Reminders

3G

10:00 AM

3G

1

1

+

Reminders

Cancel

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!

1.

Repeat

Every Day

Edit

4

Duck

8:00 AM Every Day

Lunch 4

12:00 PM Every Day

8:00 PM Every Day

...

More

Add Button

Record

1.

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.

15

6

16

7

17

AM

8

18

PM

9

19

Color Data Good Ideas Reminders

...

Record

More

Cancel Button

1.

Save Button

2.

3.

On Omnivore 1

On

Color Data Good Ideas Reminders

...

Repeat Frequency

Sound Selection

1.

App icon

Tapping this button will allow you to edit/delete the alarms that have already been created.

2.

Alert Text

Add Button

Reminder Name

Time Selection Default will be current time.

5.

slide to unlock

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.

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").

Default will be either the first sound in the iPhone sounds list or the last used sound.

-->

Edit Button

This is user-defined when setting up the reminder

4.

5.

Time for [Meal Name]! Be sure to eat plenty of [color] and [color] and record your meal!

More

Default will be every day.

4.

Sunday, February 17

5

Tapping these buttons will take you to page 3, where you will be able to add a new reminder.

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.

On

5

Tapping this will cancel the add acton and return the user to the main reminder screen.

2.

10:00

+

3

Dinner 5

2

Reminders

Breakfast

3

3G

10:00 AM 1

Save

(Lunch, Snack, etc.)

Sound

Tapping these buttons will take you to page 3, where you will be able to add a new reminder.

2.

Add Reminder

Name

1

Add a Reminder

Color Data Good Ideas Reminders

3G

2

2

Use Suggested Reminders

Record

10:00 AM

On/Off toggle

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.

2

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

User Flow

Gets alert on phone to eat lunch & which colors to eat

Lunchtime (1 PM)

Sees "Good Ideas" and past good meals near her location with those colors

Swipes alert

Creator

Wendy Chu

Class

General Assembly UXD3

Closes app

Buys food based on "Good Ideas" info

Taps "Add an Entry"

Opens Omnivore App

Camera page

Record page

Views change to overall color data

Takes Photo

Closes App

Crop Photo page

Draws crop shape

Taps "Next" button

Refines colors

Refine Data page

select portion size

enters description

Taps "finish"

Record page

Omnivore Final Presentation

Future Enhancements

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?

Creator

Wendy Chu

Class

General Assembly UXD3

Omnivore Final Presentation

Finish

IT'S OVER!

Creator

Wendy Chu

Class

General Assembly UXD3