SCREEN 1.) Sign-Up:
MAIN GOAL: Capture users info and get them into the app
TO DESIGN: New users will open the app and be prompted to sign up with email or via Facebook. This is required, because we are tracking their diet over time.
I like the simple image based sign-up screens of apps like: LinkedIn, Flipboard, MyFitnessPal
SCREEN 2.) See list of photos/work-items in Timeline
MAIN GOAL: Get users adding metadata to images of food
User will take photos of the food they eat throughout the day within the app. The app currently works in such a way that users can add meals to their food diary in one of 3 ways: 1.) take a photo from within the app 2.) upload from their library 3.) enter manually without a photo
TO DESIGN: A feed that shows all users meals eaten throughout the day in reverse chronological order.
Images in feed will show things we already know about the photo (Specifically: date and time, meal name, location, # calories and comments from their nutrition coach).
If any of the info is not filled out (e.g. calories, meal name) then the user should be alerted that there is work which needs to be done to complete this entry.
In the app today (screenshot attached), the feed merely looks like an instagram clone. This is fine, but it doesn't seem correct. Since the purpose of the app is not to look at photos, but rather to review what was eaten.
Note: To add data to an image, the user will click on the photo and add go to an existing screen to add data about the meal.
Users can archive these images when tagging is complete. So, this screen is really thought of as a workflow where the “tasks” are represented by images.
SCREEN 3.) View Summary Over Time
MAIN GOAL: Show users how their food choices and weight are tracking over time.
TO DESIGN: A user can select a time range (max 91 days) and see several single metrics (# days, # meals, meals per day, calories per day, calories per meal, macro breakdown -- % carbs, % protein, % fat. I've uploaded a screen shot of what the summary page looks like today. It's functional, but this should be the exciting part of the app!! I'd like this screen to really excite users.
Within this screen, I'd also like to add a single chart showing two graphs (calories per day, weight by day) on the same axis.
AFTER: Within this screen user can click through to see a detailed summary of the meals during this time, which will lead to what we're designing in Screen #4
SCREEN 4.) View Breakdown by Dimensions (e.g. Day of Week, Location)
MAIN GOAL: Give users ultra-specific areas they can focus on to improve their diet.
When users click through to see a detailed breakdown they will be able to choose by (day of week, time of day, location, mood, etc.).
TO DESIGN: Once they’ve chosen a dimension, they will see a full breakdown of how they’ve eaten across that dimension. For example, day of week would show: average calories by day, average meals by day, # meals counted, % of total calories on that day). I've attached screenshots of what the app looks like today.
This page will call out the worst offenders so the user knows to focus their energy on those items.
Note: These dimensions can have very few entries (e.g. day of week (7 entries) or many entries (e.g. ingredients) so the design will need to accommodate a dynamic number of entries.
Note: The app also has macros which are not captured in the current design.