Sound Design: Nathan Ray
Hand Model: Mirror Su
Background & Goals
“Breakfast Time” was the visual component for my MFA in Motion Media Design thesis published in April 2013. My thesis was about:
Interactivity in motion graphics focusing on how interactivity can both deliver content and allow navigation in motion graphics.
When it comes to motion graphics with lots of information, we normally think of infographics motion pieces. In this situation, motion graphics helps to communicate the message and to highlight the focus point of information. However, sometimes those motion pieces become overwhelming as the quantity of the information or the length of the piece is too extensive. Interactivity helps to clarify content in this process. It plays an important role to shift the viewer’s role from passively watching to actively participating. Users can get involved and learn the content based on their needs.
“Breakfast time” is an application design about the importance of a healthy breakfast and nutrition. The goals for “Breakfast Time” are
- Demonstrate that different user participation differentiates content in motion graphics
- Indicate that motion graphics becomes the bridge to support interactivity and emphasize the information content
- Motivate users to keep having healthy breakfast every day through the combination of interactivity and motion graphics
- Researched and wrote the thesis
- Ideated and created the application design
- Went through the design process from research, user interviewing, sketching, creating wireframes, visual design, motion prototyping, demo video production (storyboarding, location scouting, shooting and editing)
APPROACH & PROCESS
Why I Chose Breakfast As My Visual Topic
When I was working on my thesis writing, I kept thinking “what is design is for?” and “what does design really mean to me?” I realized, for me, the heart of design is people. Design is part of our lives and design should help make our daily lives—even ordinary tasks—more efficient and pleasant.
I brainstormed and focused on information design in food, health, education, and entertainment categories. After asking some of my friends, giving a survey, and initial ideation and testing, I narrowed the topic to the food and health category. Personally, I enjoy breakfast and I found that a lot of people skip breakfast. According to a leading marketing research company, the NPD Group, a study in 2011 showed one out of 10, or 31 million, U.S. people don’t start their day with breakfast. In order to communicate the importance of breakfast and encourage having breakfast every day, I started to list some ideas.
- 20–30 year olds
- People who eat breakfast but still sometimes skip their breakfast
Instead of an interactive video or interactive installation to convey the importance of breakfast and the healthy breakfast nutrition, I decided to make an app so that users can be reminded and can keep track of their breakfast every day.
The intro animation introduces the standard of a healthy breakfast:
- Four healthy levels: lower fat, lower carbs, higher protein, and higher fiber
- Calories range around 400-500
After the main interface comes in, an icon of the four healthy levels and a calorie calculator is on the right bottom side. The four healthy levels icon reminds a user of the standard of a healthy breakfast. And the calorie calculator indicates the calories of their breakfast combination.
Main Screens Wireframe
Food Nutrition Data Growing:
Calories Exceed Notification:
Transition to Breakfast Combination: resembling scene of food coming to the table
Product Consideration & Further Improvement
One of the goals for “Breakfast Time” was to support the thesis statement and to explore the opportunities for motion graphics in interactive design workflow. Although the nutrition database fulfilled the app concept, it would need to be expanded and I would need to add a detailed unit for each food to get accurate measurement.
Further features could be added to make the app more functional:
- Expansion of the food nutrition database
- Detailed unit for each food, which could simply have the unit next to the calories under the food or have a drop-down menu to help select the correct amount of food
- Search function to search for a specific food
- Scan a food label to add a food
- Tips and inspiration for a good, healthy breakfast and recipes
- Expansion to different platforms (ex: mobile) and how it works on a vertical screen layout
Adobe Design Achievement Awards: Semifinalist in Information Design Category | Aug 2013