CSE 457 Final Project - Process Book

Project Title: The Cost of Lovin' It 🍔

Group Name: Notorious RBJ 👑

Group Members:

Project Schedule

Project Screencast

Project Overview

Background & Motivation

• McDonald’s is one of the most popular fast-food franchises around the world, currently in 118 countries and serving 69 million people a day.
• Popularity comes from many factors, including convenience, taste, and low price, but these benefits often come at the cost of nutritional value and healthiness.
• Fast food is often a staple in the diets of those facing food insecurity, which is a major public health concern around the United States and the rest of the world
(Source)
• Motivation for the project comes from our group’s interests in food from around the world and dietary/nutrition management
• Current nutrition calculator provided by McDonald's
• Potential areas for improvement
• Inconvenient to navigate if you want to see menus and nutritional info from other countries while located in the United States
• Displays nutritional information numerically (% daily value, calories, macronutrients, etc.) rather than an easier to understand visualization (ex. bar graph for clear value comparison)
• Total meal calculations on top of page are only macronutrients (calories, fat, carbs, protein), and does not break down information any more in-depth (sugar, sodium, etc)
• Does not display any price information

Project Objectives

• Provide an easy to read method of displaying nutrition information for McDonald’s menus around the world
• Allows people to navigate international McDonald’s menus and learn about food and flavors from other countries
• Makes nutrition information more accessible by having international information compiled in one place
• Visualizes nutrition information in an easier to understand method in comparison to simply listing out numbers and percentages, which is the typical way of displaying nutrition facts
• Ultimate goal is to increase awareness of the nutritional information of McDonald’s food so individuals can make more informed choices about the food they consume, regardless of where they are located in the world.

Final Project Submission - Due 01/06/2021 at 11:59pm

Accomplishments

• New design sketch:

• Updated circular menu to have a circle shaped menu item list instead of a rectangle to improve readability
• Added text highlighting when menu items are selected around the circle
• Added functionality to save and compare meals
• Can save up to 5 meals for easy access and comparison
• Use yellow button under menu to save meal
• Meals are accessible by pressing happy meal icons labeled 1-5
• Press x button to delete saved meal
• Hover over happy meal icons to see list of items saved and metadata, click to load visualization for that meal
• Custom happy meal icons created using Figma
• Template from Noun Project, a source for free icons(Source)
• Added a tooltip warning when adding menu items that exceed any recommended DV categories by themselves
• Filmed project screencast video with team and uploaded to youtube (see above section)
• Submitted peer evaluations

Milestone 2 - Due 12/7/2020 at 11:59pm

Accomplishments

• Collected remaining data for additional countries
• 12 total countries now: USA, Australia, Brazil, China, Japan, Spain, Mexico, Canada, India, Hong Kong, UK, South Africa
• Data sources:
• USA
• Australia
• Brazil
• China
• Japan
• Spain
• Mexico
• Canada
• India
• Hong Kong
• UK
• South Africa
• Collected USA recommended daily value data for barchart visualization(Source)
• Data Cleaning
• Removed problematic symbols from data
• Organized column headers to be consistent across data
• Consolidated menu categories to be more concise and fit to circle section size and prevent spillover
• Shortened lengthy item names to fit page better
• Add storytelling element when page is loaded to introduce how to use visualization
• Used familiar McDonald's colors (red and yellow)
• Header is on top of page with McDonald's logo and red color
• Sketch of concept:

• Process book was moved to separate page (can be accessed with button on top of page)
• Completely redesigned country selection feature
• Before, our plan was to just have a drop down menu to select country names at top of page
• Now, we utilize premade SVG icons (Source)for country selection
• Inspiration taken from Assignment 2 year selection
• Sketch of design options:

• Improved Upon Circular Menu Design
• Decided to omit percentages (did not add much value to project goals)
• Implemented Co Prof. Mel's feedback from Milestone 1
• Now user must click on menu category to populate outer circle with items from that category
• Display selected items on a "reciept" instead of a "plate"
• Easier to fit item names in a vertical list rather than in wedges of a circle in the middle of the menu
• Added limit of 10 items per order
• Pop up warning appears when user tries to select over 10 items
• Implemented final barchart design
• Barchart encompasses all nutrient values, not just calorie data for breakfast items
• Colors
• Are also in familiar McDonald's red and white
• Yellow is full bar background
• Red is order nutrient
• Black line is daily value cutoff
• As items are added to circular menu selection, barchart data visualization reloads
• Transition added when bars change
• Labels
• Nutrient labels are on left side
• Recommended DV comparision percentages are on right side
• On top of each bar, total amount of each nutrient is displayed with units
• Black line is daily value cutoff
• Tooltip appears when hovering over red bar and black DV line to display more detailed info

Next Steps

• User Testing in class
• Final Presentation
• Peer Evaluations
• Final submission!

Milestone 1 - Due 11/23/2020 at 11:59pm

Accomplishments

• Collected menu data for 7 main countries (USA, Brazil, South Africa, Australia, Spain, India, China)
• Manually entered some data if not available in a convenient CSV online
• Selected a main country from each continent for initial dataset
• Each country menu has the following information:
• Food items
• Menu Categories
• Calories per item
• Macronutrients (Carbohydrate, Protein, Fats)
• Some countries include more details such as Sodium, Sugar, Fiber, Vitamins, Trans Fat, etc.
• Not all country menus have the same nutrition information available from McDonald's
• Data sources:
• USA
• Brazil
• South Africa
• Australia
• Spain
• India
• China
• Successfully loaded csv data and added data structures for visualization
• Created a basic visualization using nutrition information data structure
• Isolated breakfast menu items for each country
• Implemented a bar chart displaying calories for each breakfast menu item
• Dropdown menu for selecting country option to display
• Created framework for circular menu
• Circular menu similar in appearance to radial dendrogram or radial stacked bar chart
• Sources:
• From Slack message from Co. Professor Mel (Thank you!)
• From Observable HQ
• Menu is updated when selecting a country using dropdown menu on top of page
• Display food categories on circle by color, label categories with category name (eg. drinks, sides, etc)
• Added functionality to select menu item and add to center of circular menu
• Can select a maximum of 10 items per order
• Menu item will be highlighted when selected and added to center
• Menu item will also appear in center of circle
• Can select one item multiple items to be added to order
• Refactored visualization code using recommended object oriented structure (inspiration taken from Assignment 2 code)
• Discussed redesign options for visualization with team (discussed below)
• Created process book template

Next Steps + Design Improvements for Milestone 2

• Implement bar chart visualization using remaining nutrition information
• Should display information about all nutritional aspects of food, expanding on our preliminary visualization of only calorie info
• Should also have comparisons against recommended daily nutrition values
• Should correspond to selected items from circular menu visualization
• Recommend DV Source
• Original proposed design:

• Alternative Design Idea we are evaluating for Milestone 2:

• Add percentages to circular menu for each food category
• Will give a sense of what types of foods more commmon in different countries
• For example, USA has a much larger breakfast menu in comparison to other countries. Having percentages per category on the menu will allow users to see this.
• Visualize selected menu item names on a plate in center of circular menu
• More aesthetically pleasing, easier to understand food categories and how your meal is divided up
• Similar concept to ChooseMyPlate.gov portion visualization

• Improved Circular Menu Sketch:

Project Proposal Sketches

Full Sketch

Sketch Breakdown

- Map to Menu

- Menu to Nutrition Info

Preliminary Sketches