Group Assignment 1 - Design Process/Blog

 SDG 11: SUSTAINABLE CITIES AND COMMUNITIES

TARGET 6: REDUCE THE ENVIRONMENTAL IMPACT OF CITIES

INTRODUCTION & SDG CONNECTION

Improper waste disposal at night markets in Changlun has become a growing environmental issue. After business hours, waste such as plastic packaging, food scraps, and disposable drink cups is often left scattered on the ground. This situation leads to unpleasant odours, blocked drainage systems, environmental pollution, and potential public health risks. Although cleaning is carried out by the local municipal council, the problem continues due to a lack of environmental awareness and shared responsibility among night market vendors and visitors.

This issue is closely related to the United Nations Sustainable Development Goals (SDGs), particularly SDG 11: Sustainable Cities and Communities, which focuses on making cities inclusive, safe, resilient, and sustainable. Clean public spaces are an important part of a sustainable city, and improper waste management directly affects the quality of the urban environment. By addressing waste disposal behaviour at night markets, this project aims to support the goal of creating cleaner and more sustainable community spaces.

Through this motion graphics project, awareness is raised that cleanliness is not only the responsibility of the municipal council, but a shared responsibility among all community members. By encouraging responsible habits among vendors and visitors, this project contributes to the broader effort of promoting sustainable practices in public spaces.

PROBLEM IDENTIFICATION

The main problem identified in this project is the improper disposal of waste at night markets in Changlun, especially after business hours. Waste such as plastic packaging, food leftovers, and disposable drink cups is often left on the ground instead of being properly disposed of. This happens when vendors and visitors leave the area without cleaning up their waste, assuming that the responsibility lies solely with the municipal council.

This issue occurs mainly due to a lack of environmental awareness and shared responsibility among the community. Many individuals do not realise that their small actions, such as leaving rubbish behind, can contribute to larger environmental problems. As a result, the accumulation of waste causes unpleasant smells, blocked drainage systems, water pollution, and potential health risks to the public.

The problem directly affects the cleanliness and image of Changlun’s night market as a public space. If this issue is not addressed, it may lead to long-term environmental damage and reduced community well-being. Therefore, identifying this problem is important in order to encourage behavioural change and promote more responsible waste management practices among night market vendors and visitors.

CONCEPT & IDEA DEVELOPMENT

The main concept for this motion graphics project is “Expectation vs Reality.” This concept was chosen to clearly show the contrast between how people expect a night market to look and the actual condition after business hours. At the beginning of the animation, the night market is shown as clean, organised, and pleasant, representing the ideal situation that everyone hopes for. This scene is then followed by a sudden transition to the real situation, where rubbish is scattered on the ground and the environment appears dirty and neglected.

This contrast helps to create emotional impact and encourages viewers to reflect on their own behaviour. By visually showing the difference between a clean and dirty night market, the message becomes more relatable and easier to understand. The concept also allows the audience to quickly recognise the problem without the need for long explanations.

After presenting the problem, the animation moves on to simple and practical solutions, such as proper waste disposal by visitors and self-cleaning practices by vendors. The concept ends with a positive message that emphasises shared responsibility and encourages the community to take action. Overall, this concept supports the project’s goal of raising awareness and promoting cleaner habits in a clear and engaging way.

STORYBOARD & VISUAL PLANNING

storyboard 1 

Frame 1: Introduction

• Visual Elements:

  • A square shape drops from the top of the screen.

  • Text appears alongside or within the square.

• Motion:

  • After falling, the square shifts slightly in any direction like left, right, up, or down.

• Narrative Purpose:

  • This opening sets a dynamic tone, grabbing attention with movement and introducing the theme.

Frame 2: Transition Expansion

• Visual Elements:

  • The square begins to grow gradually.

  • It expands until it fills the entire screen.

• Motion:

  • Smooth scaling animation.

  • Transition effect either a fade or a flash of white light marks the shift to the next scene.

• Narrative Purpose:

  • Symbolizes transformation or entry into a new environment.

Frame 3: Pasar Malam Scene

• Visual Elements:

  • Scene switches to a night market (Pasar Malam).

  • Background is primarily blue.

  • Text appears to label or describe the scene.

• Motion:

  • A line moves from left to right across the screen

• Narrative Purpose:

  • Introduces the main setting with a calm but lively atmosphere.

Frame 4: Clean Market

• Visual Elements:

  • A square and triangle falls from the sky .

  • The original background is already visible.

  • The square also acts as a pathway/road leading into the market.

  • The market is shown clean and organized.

• Motion:

  • Shapes and text move from left to right, continuing the flow.

• Narrative Purpose:

  • Highlights transformation of he market appears neat and improved compared to earlier frames.

Frame 5: Reality Check

• Visual Elements:

  • Text appears: “But this is far from reality” and “Suddenly.”

  • The screen changes color—possibly darkens to reflect a shift in tone.

• Motion:

  • Abrupt transition, possibly with a glitch or flash effect.

• Narrative Purpose:

  • Introduces a twist or reflection—what was shown before may be idealized or fictional.

storyboard 2

Frame 6: Reality

• Visual Elements:

  • A rectangle with diagonal lines appears.

  • Background already present.

  • Label: “reality”.

• Motion:

  • Transition effect (any style is fine).

  • Skin or layer falls into place.

• Narrative Purpose:

  • Marks the shift from ideal to real — entering the actual situation.

Frame 7: People & Noise

• Visual Elements:

  • Row of house-like shapes with circles below (symbolizing people).

  • Scene feels crowded.

• Motion:

  • No specific movement noted, but implied busy atmosphere.

• Narrative Purpose:

  • Represents real-life conditions — noisy, messy, full of different types of people.

Frame 8: Zoom Focus

• Visual Elements:

  • Two circles — one large, one small.

  • Text appears in the center.

• Motion:

  • Zoom in on a person, then zoom into the center circle.

• Narrative Purpose:

  • Directs attention to a specific individual or issue.

Frame 9: Trash Symbolism

• Visual Elements:

  • Large circle with smaller shapes inside.

  • Arrows pointing downward.

• Motion:

  • Zoom into the circle, then it drops downward.

  • Circle symbolizes trash.

• Narrative Purpose:

  • Represents decline or hidden problems — what’s beneath the surface.

 Frame 10: Collapse

• Visual Elements:

  • Scattered shapes around a central dark circle.

  • Lines radiate outward.

• Motion:

  • The circle falls, then explodes or bursts.

• Narrative Purpose:

  • Final impact — reality hits hard, things fall apart.

storyboard 3

Frame 11: Waste Management Contrast

• Visual Elements:

  • Scattered shapes (circles, squares, triangles) across the frame.

  • Arrow pointing left.

  • Text appears with the phrase “when the west”.

• Motion:

  • Shapes move leftward.

  • Sound effect plays during the transition.

• Narrative Purpose:

  • Suggests that in some places, waste is properly managed and disposed of.

  • Implies contrast with local reality.

Frame 12: Messy Market Scene

• Visual Elements:

  • Row of five buildings with triangular roofs.

  • Scattered shapes below represent trash.

• Motion:

  • Transition effect (unspecified).

  • Possibly includes dialogue or voiceover about the night market.

• Narrative Purpose:

  • Shows the actual condition of the market — messy, with visible rubbish.

  • Reinforces the gap between ideal and real-world practices.

 

storyboard 4

Frame 13: Booth Setup

• Visual Elements:

  • Three tent-like booths.

• Motion:

  • Zoom in on one of the tents.

• Narrative Purpose:

  • Shows that vendors are responsible for providing bins.

Frame 14: Booth & seller

• Visual Elements:

  • Close-up of a tent with a bin and signage.

  • Text appears for visitors.

• Motion:

  • Simple transition, no special effect.

• Narrative Purpose:

  • Informs visitors about proper waste disposal.

Frame 15: Throwing Trash

• Visual Elements:

  • A person throws trash into the bin.

  • Bin starts to enlarge.

• Motion:

  • Movement toward the bin.

  • Bin grows in size.

• Narrative Purpose:

  • Highlights correct behavior — disposing trash properly.

 Frame 16: Bin Close-Up

• Visual Elements:

  • Enlarged trash bin with lid.

• Motion:

  • Lid opens to reveal trash inside.

• Narrative Purpose:

  • Reinforces the idea of proper waste handling.

Frame 17: Ending

• Visual Elements:

  • Five tents in a row.

  • Final text appears.

• Motion:

  • Static or fade-in for the ending message.

• Narrative Purpose:

  • Wraps up the message — clean market, responsible vendors, and proper disposal.

STORYBOARD & VISUAL PLANNING IN ADOBE ILLUSTRATOR

In this project, the storyboard serves as the main guide for planning the visual flow and ensuring that every graphic element is organized systematically. Adobe Illustrator was chosen as the primary tool because it allows us to create visuals that are clear, detailed, and easily adaptable to the project’s needs. Storyboarding not only helps us visualize the narrative journey but also provides a solid foundation before moving into the animation and motion graphics stage.

During the process, we made some adjustments to the original storyboard by adding a few extra scenes. These additions were intentional, designed to support the motion elements that will be developed later, making the visuals more dynamic and ensuring a smoother narrative progression.

SCENE 1

 SCENE 2

SCENE 3

SCENE 4

SCENE 5

SCENE 6

SCENE 7

SCENE 8

SCENE 9

SCENE 10

SCENE 11

SCENE 12

SCENE 13

SCENE 14

SCENE 15

SCENE 16

SCENE 17

SCENE 18

COLOR PALETTE

The color palette used across all scenes is organized into three visual categories. The top two rows feature bright and soft tones, representing positive or ideal scenes such as clean environments and hopeful transitions. The middle two rows contain darker, muted, or intense shades, used to depict negative or chaotic moments like noise, trash, or emotional tension. The final two rows include neutral and accent colors, applied to miscellaneous elements such as background details, text highlights, or structural shapes.

COLOUR  CHOICE FOR EXPECTATION SCENE

For this scene, we intentionally selected pastel colours to evoke a sense of calmness and positivity. Pastel tones such as soft blue, pink, purple, and yellow were chosen because they are visually pleasing and gentle on the eyes. These colours help create a welcoming and harmonious atmosphere, which aligns with the intended message of hope and optimism in this part of the motion graphic.

By using light and cheerful hues, we aimed to visually represent a “good situation” — one that feels safe, uplifting, and emotionally warm. The colour palette not only enhances aesthetic appeal but also supports the narrative tone, making the scene more relatable and engaging for the audience.

COLOUR  CHOICE FOR REALITY SCENE 

For this scene, we deliberately used dark tones to represent a negative or problematic situation. Colours such as deep blue, dark purple, maroon, and muted magenta were chosen to evoke feelings of discomfort, tension, and seriousness. These darker shades help set a somber mood and visually signal that something is wrong or challenging within the narrative.

The use of low-saturation and shadowed hues creates a stark contrast with the expectation scene, reinforcing the emotional shift and guiding the audience’s perception. This colour palette was selected not only for its aesthetic impact but also to support the storytelling by visually communicating a sense of unease and conflict.

MOTION DESIGN PRINCIPLES 

In our motion graphics project, we applied several key animation principles to enhance clarity, emotional impact, and audience engagement. Timing and spacing were used to control the rhythm of the animation. For example, in Scene 4, the question “What do you expect at a night market?” appears slowly with a soft background, allowing viewers to pause and reflect. The transition to Scene 6, which states “But, this is far from reality…”, was timed to create contrast and emotional tension.

To make movements feel smooth and realistic, we used ease in and ease out techniques. Text and shapes did not appear abruptly; instead, they entered and exited the frame with gradual acceleration and deceleration. This was especially effective in scenes like “When waste is ignored, it grows,” where the message needed to unfold gently to match the tone of the narration and background music.

We also applied anticipation and follow through to strengthen storytelling. Before rubbish was shown falling in Scene 2, we added subtle motion cues to prepare the viewer’s eye, followed by realistic settling movements as the items landed. In Scene 5, when the message “We expect a clean night market” appeared, the animation built up with anticipation and ended with a soft whoosh sound to reinforce the hopeful tone.

Sound design played a crucial role in enhancing motion. We layered ambient effects like “bubble-pop” and “whoosh” to match transitions and emotional beats. The script was carefully written to align with each visual moment, ensuring that narration, text, and movement worked together to deliver a coherent and impactful message. By combining these principles with thoughtful editing, we created an animation that was not only visually cohesive but also emotionally resonant and easy to understand.

Scene 1 and 2 Waste falling animation with ambient sound. Visual shows rubbish dropping onto the ground to highlight careless disposal after market hours.

In Scene1 and 2, the animation focuses on rubbish such as plastic packaging and disposable cups falling to the ground. This was created in Adobe After Effects using position keyframes to animate the downward movement. The motion begins slowly with an ease in effect and then accelerates to mimic gravity. An audio file (“simple.mp3”) was synchronized with the timing of the fall to add realism. This combination of visual and sound design emphasizes the careless disposal of waste at the night market.

Scene 3 Text: “When waste is ignored, it grows.” Simple animation with orange square and impactful message to show consequences of neglect.

Scene 3 introduces the message “When waste is ignored, it grows” alongside a simple orange square that gradually increases in size. The growth effect was achieved using scale keyframes, while the text was animated with an opacity fade-in. The pacing was controlled with ease out to make the expansion feel natural. This visual metaphor highlights how small amounts of waste can accumulate into a larger environmental problem if left unattended.

Scene 4 Text: “What do you expect at a night market?” Clean layout with soft colors to represent ideal expectations before revealing reality.

In Scene 4, the text “What do you expect at a night market?” appears against a soft blue background. The text animation was created using a combination of position and opacity keyframes, allowing the words to fade in smoothly. The calm color palette was chosen to represent the ideal expectation of a clean and organized night market. This scene sets up the contrast between community hopes and the reality that follows.

Scene 5 Text: “We expect a clean night market.” Colorful house icons and smooth transitions reflect community hopes and shared vision.

Scene 5 presents four colorful house icons appearing one by one, followed by the text “We expect a clean night market.” Each house was animated using scale and position keyframes, while the text entered with a fade-in effect. A “whoosh” audio effect was added to enhance the dynamic feel of the sequence. The staggered timing of the animations symbolizes the collective hope of the community for cleanliness.

Scene 6 Text: “But, this is far from reality…” Contrast scene with soft background and slow pacing to shift tone and reveal the problem.

In Scene 6, the tone shifts as the text “But, this is far from reality…” fades in slowly on a light blue background. The animation used opacity keyframes with a slight blur to create a dramatic effect. The audio track “soft-wh.mp3” was layered to add a somber mood. This scene emphasizes the gap between expectation and reality, preparing the audience for the problem statement.

Scene 9 & 10 Community figures and colorful houses animation. This scene introduces abstract characters and vibrant homes to represent the people of Changlun. The visual sets the tone for shared responsibility and collective action in maintaining night market cleanliness.

Scenes 9 and 10 combine colorful houses with abstract characters representing the people of Changlun. The characters were animated using rotation and anchor point adjustments to create subtle movements, while the houses remained static as a backdrop. An audio effect was added to give the impression of community activity. These visuals symbolize both the role of the community in contributing to waste and their potential role in solving the issue.

Scene 11 Text: “People throw waste anywhere.” Stylized figure animation showing irresponsible behavior in public spaces.

Scene 11 shows a stylized figure alongside the text “People throw waste anywhere.” The figure was animated with scale and a slight bounce effect to make the motion feel more natural. The text appeared with a fade-in after the character animation, reinforcing the message about irresponsible behavior. This scene directly addresses the human actions behind the waste problem.

Scene 12–15 Text: “Waste everywhere at night markets.” Layered graphics and popping sounds emphasize the scale of the issue.

In Scenes 12 to 15, text animations are combined with sound effects like “bubble-pop” to illustrate the scale of waste at night markets. The text was animated using masking techniques, making words appear from below in sequence. Audio effects were timed to match the visual rhythm, creating a dramatic impact. This sequence highlights the overwhelming presence of rubbish when responsibility is ignored.

Scene 16–17 Text: “Each stall should have its own trash bin.” Geometric stall design with bin placement to suggest practical solutions.

Scenes 16 and 17 propose a practical solution by showing stalls equipped with trash bins. The bin was animated using parenting, linking it to the stall structure so they moved together. The text “Each stall should have its own trash bin” was animated with tracking adjustments to emphasize the message. This scene communicates a clear and actionable step toward solving the waste issue.

Scene 18 Text: “Buyers also have the responsibility to dispose of waste into the trash bin.” Purple background and trash bin animation to reinforce shared responsibility.

The final scene reinforces shared responsibility with the text “Buyers also have the responsibility to dispose of waste into the trash bin.” The trash bin graphic was animated using scale and slight rotation to make its appearance engaging. The text faded in gradually, accompanied by soft background audio to close the animation on a hopeful note. This scene reminds viewers that both vendors and buyers must work together to maintain cleanliness.

Final Scene Text: “This is our shared responsibility to maintain the cleanliness of night market.” Closing message with feel-good music and visual harmony to inspire action.

This section showcases selected scenes from our motion graphics project, each designed to highlight key moments in the narrative. The visuals were created using Adobe After Effects 2025, combining shape layers, text, audio, and animation principles to deliver a clear and impactful message aligned with SDG 11 – Sustainable Cities and Communities.

Each scene is accompanied by a short explanation of its purpose, visual elements, and how it was animated. These breakdowns reflect both our creative decisions and technical process, offering insight into how motion design can be used to raise awareness about waste management at Changlun’s night market.

DECION MAKING (SOLVING DESIGN CHALLANGE)

Throughout the project, our group faced multiple challenges that affected both technical execution and creative development. One of the most significant issues was our limited experience with Adobe After Effects. At times, project files could not be opened properly, which slowed down progress and created frustration. This technical barrier made it difficult to experiment freely and required us to spend extra time learning basic functions before moving forward with the animation.

Another challenge was the abundance of ideas generated during brainstorming. While creativity was high, we realised that our technical skills and available time limited what we could realistically achieve. As a result, we had to narrow down and prioritise only the most feasible concepts. This process of filtering ideas was not easy, but it helped us focus on delivering a clear and impactful message rather than attempting too many complex visuals that might not be completed.

We also struggled with sound design and scripting. Finding audio that matched the tone and message of the motion graphics was difficult, and writing a script that aligned with the visuals required careful consideration. The script had to be concise yet powerful enough to ensure the message was effectively communicated. Balancing these elements—sound, script, and visuals—was a challenge, but it was essential to achieve coherence and audience engagement.

In terms of visual planning, our storyboard acted as the initial blueprint. During the Illustrator stage, we added several new scenes to enhance motion possibilities and create smoother transitions. However, once we moved into After Effects, we realised that certain scenes were unnecessary or disrupted the pacing. As a result, we removed those scenes to streamline the animation and maintain clarity in the final output. This iterative process of adding and removing scenes taught us the importance of flexibility and refinement when moving from static design to motion graphics.

To overcome these problems overall, we simplified our visuals, used clear contrasts, and focused on relatable scenarios to ensure the message could be understood within a short timeframe. We divided tasks among members to improve accountability, sought feedback from our lecturer and peers to refine our approach, and adjusted our schedule through regular check-ins to manage time more effectively. Despite the obstacles, collective decision-making and perseverance allowed us to produce a motion graphics project that was both feasible and impactful, while teaching us valuable lessons about teamwork, technical skills, and creative problem-solving.

CONCLUSION 

This project has been a valuable learning experience for our group, combining creative exploration with real problem-solving. By focusing on SDG 11 – Sustainable Cities and Communities, we highlighted the issue of improper waste disposal at Changlun’s night market and developed a motion graphics concept that communicates this problem in a clear and impactful way.

Throughout the process, we faced numerous challenges, including limited technical skills in Adobe After Effects, difficulties opening project files, teamwork issues, time management struggles, and uncertainty in execution. We also had to narrow down many creative ideas to match our capabilities, while finding suitable sound and writing a script that aligned with the visuals. Despite these obstacles, we worked collectively to simplify our approach, refine our concept, and ensure that the message could reach the audience effectively.

The final outcome reflects not only our design skills but also our growth in collaboration, critical thinking, and decision-making. This project taught us the importance of balancing creativity with feasibility, and of taking responsibility as a team to overcome challenges. Most importantly, it reinforced the value of motion graphics as a powerful tool to raise awareness and inspire behavioural change in the community.

FINAL DELIVERABLES OF MOTION GRAFIK