Advanced Interactive Design
23/04/2026 - 14/06/26 | Week 01 - Week 08
Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honours) in Creative
Media
Information Design / Exercises / Taylor's University
Table of Contents
I. INSTRUCTION
II. THEMATIC WEBSITE PROPSAL
III. ADOBE ANIMATE PROCESS
IV. FINAL SUBMISSION
V. REFLECTION
VI. QUICK LINKS
I. INSTRUCTION
Thematic Website Proposal
For this thematic website proposal, I developed
Before Help Arrives, an interactive emergency-awareness
website designed to help young urban residents understand what to do before
professional help arrives. The website focuses on common emergencies such as
fire, flood, earthquake, and thunderstorm, using visual storytelling and
simple interactions to make safety information easier to understand.
Ideation
At the beginning of the ideation process, I wanted my work to be something
practical and purposeful, not just visually interesting. I also wanted the
topic to be based on factual information and connected to real-life
situations. From there, I started exploring themes related to how people
can protect themselves during emergencies. This led me to the idea of
creating an
emergency preparedness website
that teaches users how to notice
danger early, make safer decisions, and prepare before help
arrives.
Research & References
The idea slowly developed into a website where users can move through
different emergency-related pages, spot warning signs, learn simple actions,
create a safety plan, prepare an emergency kit, and access safety alerts.
For the research stage, I looked into the issue of young adults being
exposed to everyday emergencies but not always knowing how to respond
properly.
Before Help Arrives' Sitemap
The website was then organised into five main pages: Home, Spot &
Learn, Make a Plan, Emergency Kit, and Safety Alerts. The Home page
introduces the concept through a city scene and phone notification. Spot
& Learn allows users to identify warning signs through interactive
scenarios. Make a Plan focuses on preparation steps, such as important
contacts and meeting points. Emergency Kit teaches users what items to
prepare, while Safety Alerts helps users access urgent information and
emergency contacts.
Website Wireframes References
The website references helped guide different parts of the design. The
first reference inspired the choice-based interaction for selecting
emergency scenarios. The second reference was used for the Make a Plan page
because of its illustrated preparation layout and note-like structure. The
third reference inspired the looping animation idea, in which animation
provides context and helps users understand the situation before
interacting.
Visually, I wanted the website to feel friendly but still connected to
emergency preparedness. The colour palette uses bright and alert colours
such as green, pink, yellow, purple, blue, and dark tones to create contrast
and highlight important information. The visual style is simple,
illustrated, and slightly playful, so the content does not feel too
intimidating. For typography, I used a bold heading style with a clean body
font to keep the website readable while still giving it a strong
identity
FINAL Website Proposal
Refining Concept ( Figma Prototype )
After developing the concept, sitemap, references, and wireframes, I
refined the idea into a Figma prototype. This stage helped me test how the
pages connect and how the user would move through the website. I refined
the homepage into a more visual introduction, using the city scene and
phone notification as the starting point of the experience.
Adobe Animate Process
I created the Emergency Preparedness website in five separate files: Home, Spot & Learn, Make a Plan, Emergency Kit, and Important Contacts. Each section was planned to guide users from learning about emergencies to knowing what actions to take.
I designed most of the more detailed visual assets in Adobe Illustrator using bold colours, simple shapes, and minimal illustrations. I then brought them into Adobe Animate to add small animations and interactions while keeping the overall style consistent.
"Building Assets - Main Base"
"Make A Plan"
Home Page
For the home page, I designed a short interactive introduction that begins with a calm neighbourhood scene before moving into an emergency alert. Users can choose whether to open or ignore the notification, which leads them through different outcomes. This helped the website feel more like an experience instead of a normal information page.
I used JavaScript in Adobe Animate to control the buttons, page movement, and navigation between each section. The screens move horizontally with a smooth transition, while smaller animations such as weather changes, warning effects, and the phone notification help build tension without changing the overall visual style too much.
One challenge was connecting the different choices and outcomes without breaking the flow of the page. I also had to adjust the JavaScript several times because small issues with button instance names or exported files could stop the entire interaction from working.
Spot & Learn
Working on the transition
The Spot & Learn page introduces four emergency situations: fire, earthquake, thunderstorm, and flood. Each poster works as a button that opens a short sequence of safety information, allowing users to learn through illustrations instead of reading a large amount of text at once.
I created a diagonal object-swap transition to move between the information steps and used code to connect every poster, next button, back button, and return button. Small looping animations were also added to the illustrations, such as moving flames, fading smoke, shaking objects, moving water, and a car travelling under a bridge. These movements keep the page active while still allowing the information to remain clear.
The main challenge was managing four emergency sections within one file while keeping every next, back, and return button connected correctly. I also had to balance the looping animations so they added movement without distracting users from the safety information.
Make a Plan
The Make a Plan page breaks emergency planning into four manageable steps: preparing contacts, finding exits, staying updated, and checking home safety. I used a noticeboard-style layout so the information feels organised, practical, and less intimidating.
Each step is placed inside its own MovieClip and controlled through JavaScript. When the user moves forward or backward, the current panel gently fades away before the next one appears with a small upward movement and scale change. I also added quick idle animations, including a moving phone, appearing route lines, a vibrating device, and a slightly moving magnifying glass to make each illustration feel more responsive.
One difficulty was creating smooth transitions between all four panels while keeping the shared background and navigation consistent. The timing of the fade, movement, and idle animations also needed several adjustments so the page did not feel too fast or abrupt.
Emergency Contacts
For the Emergency Contacts page, I focused on presenting important Malaysian emergency services in a clear and approachable way. The landing page uses a phone and contact-book illustration before leading users to separate information panels for MERS 999, NADMA, and Fire and Rescue.
I used coded buttons to switch between the contact panels and connect the page to the main navigation bar. The transitions follow the same gentle movement used in the Make a Plan page to keep the website visually consistent. Small animations such as the phone bobbing, the call icon pulsing, the plant leaves moving, and the sticky note wiggling were added to make the landing page feel active without distracting from the emergency information.
The main challenge was switching between the landing page and each emergency contact panel without losing the navigation controls. I also had to make sure the contact information remained clear while adding enough animation to keep the page visually engaging.
Check Out Final Submission :
V. REFLECTION
OBSERVATIONS
While working on this emergency preparedness website, I noticed that both the way information is organised and the way the animations are framed can strongly affect the user experience. My main focus was learning how to present each section clearly, while also making the transitions and idle animations feel smooth and suitable for the page. I also observed that keeping the layout simple helped prevent the information from becoming too overwhelming. However, some parts looked flatter than I originally expected, which made me realise that simplicity still needs enough visual detail and movement to keep the design engaging.
FINDINGS
From this project, I learned a lot about gathering and simplifying information, especially because emergency-related content needs to be clear, direct, and easy to understand. I also became more familiar with navigating Adobe platforms, particularly Adobe Illustrator and Adobe Animate, while researching different methods whenever I was unsure how to create a certain interaction or animation. I found that separating elements properly, using MovieClips, planning the frame structure, and keeping the interaction code organised were important for making the website function more smoothly. I also learned that UI/UX decisions are not only about making the page look attractive, but also about controlling how much information users receive at one time.
EXPERIENCES
MMy overall experience was challenging but valuable. At first, I was unsure about framing the animations, connecting the pages, and making the interactions work properly. By testing different methods and researching solutions, I became more confident in using Adobe Animate and understanding how motion, design, and interaction work together. This project also taught me that UI/UX should balance clear information with visual appeal, and that different projects may require different design approaches.
.gif)
Comments
Post a Comment