Advanced Interactive Design - Final Website

Name: Liong Xenyi (0383125)
Module: Advanced Interactive Design  (DST60804)
Date: 14/6/2026 - 31/7/2026 (Week 9 - Week 14)
Degree: Bachelor of Design (Honors) in Creative Media 
University: Taylor's University

Instruction
To demonstrate original authorship and verify that the project was not generated solely by AI, your E-portfolio must include a Process Documentation Section featuring:

• Development Progress: Screenshots of your workflow, code snippets, or asset creation.
• Reflection / AI Disclosure: A brief narrative explaining your design decisions (and a brief statement detailing any AI tools used and their specific role in your process).

Progress

I created 5 pages for this website: Homepage, Executive Dysfunction, Emotional Dysregulation, Rejection Sensitive Dysphoria, and Stories. I was doodling some sketches and turned them into drawn elements in Adobe Animate. This helped me get started on what idea and direction I wanted to go. Some other elements, I immediately drew on Animate as the idea came to me.

Fig 1.1 Drawing elements, colour palettes and fonts

I used several fonts to make this website. Heyam, Dinosaur Cake Demo, Cakecafe, KLASIKAP and Nirakolu for the headings and sub-headings, while the body is Malvinas Regular. I mixed in a lot of different typefaces to portray that more "creative chaos" that people with ADHD usually have, alongside different colours for each page. 

For each page, I include 3 main layers: the main content, navigation bar, and the action layer.

As for the navigation bar, I used green so that it contrasts against the beige colour. I included all the main pages in the bar, with the page that the user is on to be highlighted with the same beige. I coded the navigation buttons to navigate to their respective pages in Fig 1.3. Additionally, the buttons have an Up, Over. Down and Hit images, like in Fig 1.4; I did this for all buttons.

Fig 1.2 Navigation Bar

Fig 1.3 Code for navigation bar

Fig 1.4 Buttons for navigation bar

For the homepage, I made a title image, and had a brief introduction of what the website should do and what it features. It has the other main pages buttons at the bottom, with accompanying pictures. I combined all of the contents into a Movie Clip called scrollContent.

Fig 1.5 Homepage

 

Fig 1.6 Contents inside the homepage

As for the code, I added the code that allows the page to scroll the contents inside the Movie Clip. This page is vertical, so the code consists of scrolling on the Y axis.

Fig 1.7 Homepage code

The next page, Executive Dysfunction, is a horizontal scrolling page instead. This one consists of another navigation button made solely for this page. This page has buttons and pop-up cards to show more information. This was a little difficult for me to get at first, but I managed to get the code right. Like before, all the content are inside the Movie Clip, this time called "mc_slider". The code is in Fig 1.9, showing how the cards were coded. This page colour theme was different shades of blue.

Fig 1.8 Executive Dysfunction page

Fig 1.9 Pop-up Cards

1.10 Coding for the pop-up cards

Additionally, I drew all the images when creating this page. I made the buttons with images so users can click on them. Since the style was more on the creative, a little kiddish style, because I did want to show how ADHD is a genetic disorder and I want people to still see the wonder in it, I made the elements with a more messy, doodle style. I admittedly, used my computer mouse to draw, as it is faster.

Fig 1.11 Drawn elements

The two pages, Emotional Dysregulation (ED) and Rejection Sensitive Dysphoria (RSD), are more similar to the homepage, where it is in a Movie Clip and the user can scroll vertically to see the content. I drew all the elements, and made shapes for each information or content. The ED page's colour theme is green and orange, while the RSD page is pink and purple. Both pages follow the coding similar to the homepage, as shown in Fig 2.5.

Fig 2.1 Emotional Dysregulation page

Fig 2.2 Drawn content

Fig 2.3 Rejection Sensitive Dysphoria page

Fig 2.4 Drawn elements

Fig 2.5 RSD coding

The last page, Stories, is a horizontal scrolling page, where scrolling will show the flow of the story. It doesn't have the typical comic box boundaries, but I used a simple stroke to show the flow of the story. I drew each of the elements in Animate, using a lot of copy pasting to reuse the same elements. Again, this has a more simple, doodle style, that hopefully captures the essence of the story.

Fig 2.6 Story page

  

Fig 2.7 Drawn content, with the usage of text

The code follows the Executive Dysfunction page, where the user can scroll horizontally to view the story. This is the code.

Fig 2.8 Stories code

For all pages, this is the publish settings to make the page. I added a loading preloader, as shown in Fig 2.10.

Fig 2.9 Publish settings

Fig 2.10 Loading

I put all of the files into the same folder so I could upload on Netlify and make a website link shown in submission.

Fig 2.11 Website folder

Submission

Website Link: https://adhd-awareness.netlify.app/

Reflection

I made many different decisions compared to my original idea in the prototype phase. At first, I wanted the pages to be side effects, misconceptions and struggles of ADHD, with stories remaining, but the information overlapped a lot, so I decided to put them into specific topics instead. 

The style for this website is to show the more hidden childlike-wonder that ADHD can be like, where random doodles are all over the place. Even though ADHD is associated with negative ideas, I wanted to disregard that with the cute doodles while also trying to represent the struggles in those elements. ADHD is a disorder that is genetic, so even if not every ADHD person had obvious symptoms as a child, they were high-masking and tried to fit in with their peers. So, in a way, the doodles were like a way to heal the inner child, and to accept that a person with ADHD isn't weird, or bad, but something they were born with as a part of them. 

I used different colours to colour-code each item and page, so that it has its own style. ADHD is about random creativity, so I wanted to change each page with different fonts and colours. The doodles were simple to draw, as it also helped with time and having to draw a lot. I used my computer mouse to draw, with a mixture of using the pen tool and the brush tool, as the brush could give that doodle effect.

As for the information, I searched an expert on ADHD and found their content. The YouTube page, How to ADHD, is led by Jessica McCabe. She is honestly how I learned more about my own ADHD, as she has good educational awareness on this topic, especially when most people forgot adults can have ADHD too, as it is a genetic disorder. I took the content from her videos and put them into my website, so that it is more accurate and clear.

I mostly struggled with coding the pages to make it a working website, as I'm still not familiar with JavaScript. I used the help of Google AI to break down the code and explain what each part is for, so that I could understand better and use that in the code. It was pretty hard to find the coding tutorials online, so I had to reside to AI, which I don't really use. I only use it to help me understand the errors in my code and how to better it so that it works.

In the future, I will better my understanding of JavaScript, so I could use Adobe Animate to make better websites. I also need to have better time management and a better direction when making websites, as they take a lot of time, and I had to rush my work, which thus did not have the quality I was aiming for.