Gina Lin
breakfast-time-thumb-1700x1400.jpg

Breakfast Time

Sparking my user-centered design journey and exploring the opportunities for motion graphics in interactive design

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
 

Role

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

 

Primary Audience/User

  • 20–30 year olds
  • People who eat breakfast but still sometimes skip their breakfast
 

Format

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.

 

Intro Animation

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

Index Selection:

wireframe_1_o.jpg
 

Breakfast Combination:

wireframe_2_o.jpg
 

Statistics:

wireframe_3_o.jpg
 
 

Visual Design

 
 

Motion Prototyping

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
 
 

RECOGNITION

Adobe Design Achievement Awards: Semifinalist in Information Design Category | Aug 2013