Information Design – Final Project: The 5-Minute Morning Update
INFORMATION DESIGN - FINAL PROJECT
ANIMATED INFOGRAPHIC: POINT 3 - THE 5-MINUTE MORNING UPDATE
WANG JIHENG 0378904
Bachelor of Design (Hons) in Creative Media
GCD60504 Information Design
Final Project: Group Animated Infographic
Individual Contribution: Point 3 - The 5-Minute Morning Update
LIST
- MIB
- LECTURE
- PROCESS
- FINAL SUBMISSION
- FEEDBACK
- REFLECTION
MIB
The final project for Information Design was a group animated infographic based on Cal Newport's How to Become a Straight-A Student. The purpose was to transform the book's study strategies into a short and understandable motion-graphic video for students.
Our group focused on Part 1 and developed a practical time-management message. The full animation presents small actions that can help students plan their work more realistically. My individual contribution was Point 3: The 5-Minute Morning Update, which appears from 0:20 to 0:30 in the group video.
My section explains that students can use a short morning routine to review unfinished tasks, add new deadlines and organise the day into realistic time blocks. The key message is: five minutes of planning now can make the day calmer and more organised later.
LECTURE
During the final-project briefing, I learned that an animated infographic needs more than attractive graphics. It must communicate information through a clear order, a consistent visual system and movement that supports the audience's understanding.
The lecture introduced an AI-assisted workflow: understand the assigned source, simplify it into a script, check the script, plan the visual direction and storyboard, create vector assets, then animate and refine the material in After Effects. AI can support research and planning, but the final visual decisions, vector assets, animation and editing still need to be developed by the student.
For this project, I used the provided research material and the group direction as the main reference. Google NotebookLM and ChatGPT were used only as support tools to organise information, test clearer wording and plan the sequence before I created the visual assets and motion graphics myself.
PROCESS
1. Group Research and Role Allocation with Google NotebookLM
At the beginning, the group uploaded the assigned book and reference files into Google NotebookLM. This helped us review the key ideas in Part 1 and organise them into smaller infographic points. The group then divided the animation into individual sections, and I was assigned Point 3: The 5-Minute Morning Update.
The NotebookLM notes showed that the idea was not simply to make a longer to-do list. Students should check yesterday's unfinished tasks, move them to a realistic new time, add new deadlines to one calendar and plan the current day clearly.
2. AI Discussion for Content Understanding
Before writing my own note, I used ChatGPT to understand what Google NotebookLM was doing in the group workflow. I confirmed that NotebookLM was working from the book and PDF sources uploaded by the group, rather than replacing the source material. I then used the explanation to check the Part 1 content and identify the elements needed for my short sequence.
This discussion helped me distinguish between the research stage and the design stage. I still checked the generated suggestions against the course source and the group plan before deciding on the final content.
3. Visual-Element Planning
After the group allocated my point, I used ChatGPT to list possible visual elements for a short animated infographic. The purpose was to turn the message into a simple visual sequence rather than showing too much information at once. The final direction used vector graphics instead of photographs or detailed illustrations, so that it could match the group's overall style.
The planned elements included a morning sun and alarm clock, calendar page, unfinished task card, arrow from “Yesterday” to “Today”, deadline bell, to-do list, check marks, schedule blocks and final student/workspace elements. I selected and adjusted the final elements according to the available time and the group visual direction.
Fig. 3: Real AI discussion screenshots used to develop the visual elements, script and storyboard for Point 3.
4. Script Development and Storyboard Planning
I used the research and visual-element list to develop a short script for my 10-second section. The wording was simplified so that every line could be understood quickly while the visual movement was taking place. I then used the script to decide what should appear in each scene and how one scene should move into the next.
| Time | Script Sentence | Visual Direction |
|---|---|---|
| 0:20–0:21 | “Step 1: Start your 5-minute morning update!” | Morning sun, alarm clock, calendar and “5 MINUTES” title. |
| 0:21–0:23 | “Check yesterday's list and move unfinished tasks to a new time slot.” | A task card moves from Yesterday into Today. |
| 0:23–0:25 | “Add new deadlines, reminders, and to-dos into your calendar.” | A notification bell and deadline card enter the calendar. |
| 0:25–0:27 | “Build today's schedule with realistic time blocks.” | A messy list changes into clear time blocks and check marks. |
| 0:27–0:30 | “Five minutes now means a calmer, more organised day.” | A neat calendar, relaxed student icon and final message appear. |
5. Adobe Illustrator: Vector Asset Creation
After confirming the script and storyboard, I created the visual assets in Adobe Illustrator. I made the vector elements needed for the sequence, including the sun, cloud, alarm clock, calendar, task cards, deadline card, bell, time-block planner, check marks and text elements. I used simple shapes and a consistent colour palette so that the information could be read quickly.
I also organised the artwork into separate layers before exporting it for animation. This was important because the calendar, cards, arrows and text needed to move independently in After Effects. Adobe Illustrator was used to create the vectors; it is separate from the AI tools used earlier for research and planning.
图片位置说明：这里放 Adobe Illustrator 的图层面板截图。画面要同时看到图层名称和部分画板，证明素材已经按可动画的对象分层。
6. After Effects: Animation Production
I imported the Illustrator layers into Adobe After Effects and created a composition for my section. I arranged the assets in the timeline according to the 0:20–0:30 storyboard and used keyframes to control position, scale and opacity.
The animation begins with the sun, clock and calendar introduction. The unfinished task card then moves from “Yesterday” to a new “Today” time slot. Next, the deadline card and notification bell enter the calendar. The messy to-do list changes into a structured daily planner with time blocks, before the final screen holds the message: “5 MINUTES NOW = LESS STRESS LATER”.
During this stage, I checked the timing of each entrance, the reading time of the text and the order of the layers. I adjusted the duration and spacing between scenes so that the information remained clear instead of moving too quickly.
Fig. 7: After Effects composition and timeline used to animate my Point 3 sequence.
7. Feedback and After Effects Timeline Revision
After I completed the first version of my animation, I showed the work for checking and received feedback from both the lecturer and my group. The main issue was the timing of the subtitles: the earlier text remained on screen and blocked the information that appeared after it. This made the sequence difficult to read clearly.
I returned to After Effects and revised the timeline. I moved the in and out points of the text layers, shortened the duration of the earlier subtitle layers and added clearer gaps between each action. This followed the lecturer's feedback to use normal x1 speed and leave slightly longer space from one part to the next. The revised timeline made every scene easier to read before the following animation entered.
The group also discussed whether extra captions should remain after voiceover was added. In the WhatsApp poll, five members chose No for additional captions. Following the group decision and the group leader's direction, I deleted the later subtitles and kept only the opening “Step 1” text. The remaining scenes communicate through the animation and voiceover, so the screen is cleaner and the vector graphics are not covered by text.
Fig. 11: Revised After Effects timeline after lecturer and group feedback.
Fig. 12: Revised After Effects timeline after lecturer and group feedback.
Ending Fade-Out Animation
After completing the main calendar scene, the group leader suggested that my section should end with a fade-out transition. I added an opacity keyframe to the final planner composition in After Effects so that the scene gradually fades out before the next group member’s section begins. This creates a smoother connection between the different parts of the full animated infographic and prevents the final frame from ending too suddenly.
Fig. 13: Revised After Effects timeline after lecturer and group feedback.
Ending Fade-Out Animation
After completing the main calendar scene, the group leader suggested that my section should end with a fade-out transition. I added an opacity keyframe to the final planner composition in After Effects so that the scene gradually fades out before the next group member’s section begins. This creates a smoother connection between the different parts of the full animated infographic and prevents the final frame from ending too suddenly.
After completing the visual and timeline revisions, I prepared the narration for the final sequence. I used ElevenLabs to generate the AI voiceover from my short script. I selected the Roger voice and the Eleven Multilingual v2 model, then checked the generated audio against the animation in After Effects.
I adjusted the voiceover text and placement so that the narration matched the movement of the graphics and the final screen had enough reading time. This voiceover was added only after the animation and subtitle revisions were completed.
9. Final Export
Finally, I placed the voiceover into the revised After Effects composition, checked the timing one more time and exported my completed Point 3 section as an MP4 file. The exported animation was then ready to be combined with the other group members' parts in the final animated infographic.
FINAL SUBMISSION
The final submission is a 10-second animated infographic segment for Point 3: The 5-Minute Morning Update. It combines my Illustrator vector assets, the revised After Effects animation and the final ElevenLabs voiceover. The subtitles after the opening “Step 1” were removed following the group caption decision, leaving a clearer animation-led sequence. The MP4 was then combined with the other group members' sections for the complete animated infographic.
Fig. 13: Final animated infographic frame from my Point 3 section.
FEEDBACK
The feedback process included two levels. From Mr Martin, I was asked to use normal x1 speed and create slightly longer gaps between parts. During the checking session, I also needed to revise the timeline because the earlier subtitle layer overlapped with later information. I solved this by changing the layer timing and leaving clearer reading space between scenes.
From the group, we discussed whether the voiceover also needed on-screen captions. The group poll resulted in Yes: 0 and No: 5, so the group decided not to keep additional captions. I followed this feedback by removing the subtitles after the opening Step 1 text. This helped the vector animation and narration remain the main focus.
REFLECTION
This project showed me that good motion-graphic work begins with planning. The AI-assisted research and script discussion helped me organise a complex source into a short sequence, but I still needed to decide what information was essential, how the visuals should look and how the animation should be timed.
I also learned the importance of layer organisation in Illustrator and timing adjustments in After Effects. Preparing the vectors as separate objects made the animation process more manageable. If I develop this project further, I would test the sequence with more viewers and refine the transitions and voiceover timing again to make the explanation even clearer.
Comments
Post a Comment