Omnivore App UX

General Assembly UXD3

Creator

Class

Wendy ChuOmnivore Final PresentationIntroduction

OMNIVOREcount colors, not calories


Creator

Class

Wendy ChuOmnivore Final PresentationOverview

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?

What did you eat?

Chicken, mac & cheese, green beans

How much did you eat?

a moderate amount

1

2

4

Edit DetailsCrop Finish

3

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

3G 10:00 AM

4

Record Color Data Good Ideas Reminders More

...

This Week This Month All Time

too little too much

Week of March 4, 2013

Your Food This Week

5

2

1

6

6.1

3.1

15%

5%

10%3

20%

Tip TitleTip preview text. Tip preview text.

4 6




5

3G 10:00 AM

Record Color Data Good Ideas Alerts More

...

1 2

7

Your Good Meals

3

3G

10:00Sunday, February 17

slide to unlock-->

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

1 2


Creator

Class

Wendy ChuOmnivore Final PresentationCompetitive Analysis - The Eatery

Launch Sequence intro Survey Food Entry (Photo)

Food DataFood Entry (Text) 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).


Creator

Class

Wendy ChuOmnivore Final PresentationCompetitive Analysis - Pic Healthy

Launch Sequence Food Entry Food Data

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

Class

Wendy ChuOmnivore Final PresentationCompetitive Analysis - MealLogger

Launch Sequence

Food/Misc. Data

Food Entry (Photo)Signup/Login 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


Creator

Class

Wendy ChuOmnivore Final PresentationCompetitive Analysis - MyFitnessPal

Signup/Login

Food Entry Food Data

Intro Survey

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.


Creator

Class

Wendy ChuOmnivore Final PresentationCompetitive Analysis - Feature Comparison

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

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

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

Meal Logger

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

•Slideshow about general features •Single tutorial slide

•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

Login/Signup

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


Creator

Class

Wendy ChuOmnivore Final PresentationCompetitive Analysis - Takeaways

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"


Creator

Class

Wendy ChuOmnivore Final PresentationPersona

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 CampbellAge: 28Location: Oakland, CAOccupation: 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.


Creator

Class

Wendy ChuOmnivore Final PresentationUser/Business Goals

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.

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

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

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.

FeaturesBusiness Goals

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.

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.


Creator

Class

Wendy ChuOmnivore Final PresentationApplication Map

Loading Screen

Record

Launch Experience(1st time only)

NAVIGATION

Color Data Good Ideas MoreReminders

Add Reminder

Individual Idea PageTake Photo Food Entry

DetailCrop PhotoEdit Details


Creator

Class

Wendy ChuOmnivore Final PresentationWireframes

Launch Sequence

Eat better by eating more colors. Omnivore helps you keep track!

swipe to continue

1

3

2

Omnivore helps you eat better by recording the colors of your food. No

calorie counting required!

swipe to continue

3

2

IntroductionExit1Eat better by eating more colors. Omnivore helps you keep track!

swipe to continue

1

3

2

Eat lots of colors & limit beiges (meats, starches, processed food) and greys

(sweets) for best results.

Eat More ColorsExit


swipe to continue

1

3

2

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

Record PicsExit


swipe to continue

1

2

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

Keep it UpExit


swipe to continue

1

3

2

Get started now!

1

RemindersRecord

Record your first food entry

Remind yourself which colors to eat

Get Started!Exit

12

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 buttonAllows user to bypass the intro sequence and go directly to the main page (record).

2. Animated Swipe instructionTells 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 dotsIndicates that there are multiple pages of content and where the user is in the progression.


Creator

Class

Wendy ChuOmnivore Final PresentationWireframes 2

Record Function


...

3G 10:00 AM

+ Add an Entry

Grilled Cheese and Tomato Soup

Recorded Today

Corn Flakes & Milk

Granola Bar

1

3

2

Record

2

1. Add meal buttonThis takes the user to page 2, where you can add a meal.

2. Today's food sectionDisplays all the food recorded for the current day.

3. Meal EntryThe 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

5

4

6

Take Photo

Copy past entry

Take PhotoCancel12

1. Cancel ButtonCancels the recording action and returns user to page 1

2. Copy past entry buttonAllows 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 buttonAllows the user to bypass the photo function and record color data + text only. Skips forward to page 4.

4. PhotoDisplays the image from the phone camera

5. Take photo buttonTapping will take the photo displayed and move the user to page 3.

6. Camera Roll buttonTapping this will allow the user to select from the images from their camera roll.

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

Oval Rectangle Geometric Freehand

3

4

Crop PhotoCamera Next1 2

1. Back ButtonGoes back to Page 2: camera function

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

3. Crop Shape/verticesDisplays 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 selectionAllows 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?

What did you eat?

Chicken, mac & cheese, green beans

How much did you eat?

a moderate amount

1

2

4

Edit DetailsCrop Finish

3

1. Cropped ImageShows the image after it has been cropped.

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

3. Color adjustment controlsAllow 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 sliderAllows for entry of food size, to account for proportions between meals. Default is "medium."


Creator

Class


Color Data

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

3G 10:00 AM

4


...

This Week This Month All Time

too little too much

Week of March 4, 2013

Your Food This Week

5

2

1

6

6.1

3.1

15%

5%

10%3

20%

1. Time period indicator

2. Time period selectorChoose time period to view. This will display data relevant to that time period. Default will be current week.

3. Color graphThis 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 recommendationThe 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 thumbnailsThumbnails 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.


4 6




5

3G 10:00 AM


...

1 2

7

Your Good Meals

3

Good Ideas

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 ButtonTapping the search button will bring up the search bar + qwerty keypad. See page 3.

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

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

5. Bookmark IconThese 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 tabTapping this button will take the user to the page displayed here. When active, it will be highlighted in a brighter color.


Creator

Class


Good Ideas (Cont.)




3G 10:00 AM


...Tip TitleTip preview text. Tip preview text.

Your Good Meals

2

1

1. Selected color filterWhen 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.

Autocomplete 1

Autocomplete 2

Autocomplete 3

Search Cancel

4

Autocomplete 4

Autocomplete 5

123

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space search

3

5

3G 10:00 AM 21

1. Search BarSearch query will be typed here

2. Cancel ButtonTapping 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 optionsBefore user begins typing, recent searches will be displayed here. Autocomplete options will begin to populate automatically as the user types.

4. Autocomplete linksTapping on an autocomplete/past search option will take the user to the search results for that search

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

Good IdeasSearch

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

+3G 10:00 AM 21

1. Back ButtonTapping 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 ButtonTapping 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 ImageThis image is relevant to the tip. For instance, a photo of broccoli for a tip about eating broccoli.


Creator

Class


Reminders

Reminders3G 10:00 AM

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

Add a Reminder1

Use Suggested Reminders2


...

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

2. Use Suggested Reminders buttonThis 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.

Add Reminder3G 10:00 AM

Cancel1

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 ButtonTapping this will cancel the add acton and return the user to the main reminder screen.

2. Save ButtonSaves 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 FrequencyDefault will be every day.

4. Sound SelectionDefault will be either the first sound in the iPhone sounds list or the last used sound.

5. Time SelectionDefault will be current time.

Reminders3G 10:00 AM

Edit1

+2

Breakfast

Lunch

Dinner

On

On

On

8:00 AM Every Day

12:00 PM Every Day

8:00 PM Every Day

3

45


...

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

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

3. Reminder NameThis 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:00Sunday, February 17

slide to unlock-->

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

1 2

1. App icon

2. Alert TextAlerts 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.


Creator

Class

Wendy ChuOmnivore Final PresentationUser Flow

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

sizeenters

descriptionTaps

"finish"

Record page


Creator

Class

Wendy ChuOmnivore Final PresentationFuture 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

Class

Wendy ChuOmnivore Final PresentationFinish

IT'S OVER!

Omnivore App UX

Design

Transcript of Omnivore App UX