Design Exploration - Final Compilation

24.4.2025 - 29.7.2025 (Week 1 - Week 15)
Chong Hui Yi / 0363195
Design Exploration / BDCM
Final Compilation

---

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Task 1

4. Task 2

5. Final Project

6. Feedback

7. Reflection

---

LECTURES

Week 1:

Task 1: Project Direction Analysis Steps

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1m2KBBNamcySou5jjXSi0Nsw-aqJcqeRj/preview" width="640" height="480" allow="autoplay"></iframe>

---

Task 1: Project Proposal

Instruction

"Once you have decided the direction of your project, you will prepare a proposal brief explaining the reasons for your project and how you intend to carry it out. This area will consist of proposed research areas, data gathering methods and technical executions for your project. Be realistic with your proposal, as you have limited amount of time, resources and energy to do so but at the same time allowing you to exercise your creative skills beyond your comfort zone."

Progression

In week 1 lecture, we were asked to look into the current industry outlook and compare it with our own portfolio. The goal was to see whether our current skills match the job market.

• If they match, we should explore what additional skills might be useful.
• If they do not match, it’s time to work on filling the gaps.

To begin, I searched for UI/UX job trends on LinkedIn and JobStreet. I looked into 12 companies and collected the common requirements they listed.

Fig. 1.0 UI/UX Industry Skill Requirements

(Google Sheet Link: https://docs.google.com/spreadsheets/d/1DMFvRuG_FOK-Y5RyiXjvfV4AUGC6H2z0pmhE9eD7oKU/edit?usp=sharing)

Fig. 1.1 Summary of UI/UX job listings

Here are the key findings:

Web & App Product Design Dominates

High demand for multi-platform designers (Web + App)

Rising Importance of Research & Testing

Employers expect designers to validate and improve designs using user feedback.

• User Research, Usability Testing, A/B Testing = frequently mentioned
• Data-driven decision-making (analytics, heatmaps)

Collaborative & Cross-functional Roles

Designers are increasingly expected to work with marketers, developers, and business teams.

• Communication & stakeholder alignment is key
• Not just “visual design” → UX + strategy + business impact

Toolset Expectations

Employers expect proficiency in Figma, Adobe XD, and basic/advanced
HTML/CSS.

• Figma = standard (appears in all roles)
• Bonus: Knowledge of prototyping, CMS, basic front-end

Consistency via Design Systems

Maintaining or building design systems is now a common responsibility.

• Ensures scalability and brand consistency across products
• Atomic Design / UI Kit management mentioned frequently

After that, I reviewed my current portfolio and found that it mostly matches the industry requirements. But I realised my coding skills are still quite weak, so I wanted to work on a project that could help me improve in this area.

Fig. 1.2 Current Portfolio

My initial ideas were:

• Interactive portfolio website
• AR portfolio
• Website for my own font
• Promotional website for a product (eCommerce/digital)
• Narrative storytelling website

Mr. Asrizal mentioned that using a product I didn’t create might feel less personal. He suggested that AR is an interesting technology, and I could combine it with storytelling or my font to make the project more engaging. He also reminded me to think about what skills I want to highlight through this work.

In the end, I decided to create an interactive website about the small struggles people face in daily life. The idea was inspired by moments like hitting your toe on the table, getting stuck in traffic, or hurting your gums while brushing your teeth.

Final Outcome

Fig. 1.3 Design Exploration Proposal (Moments That Break You)

Fig. 1.4 "Moments That Break You" Interactive Website Content

Task 2: Project Development

Instruction

"You have 9 weeks to work on your project by developing your proposed ideas into an actual outcome through independent research for solutions and peer feedbacks to help you gain audience insights about the project from the development process to final output of designs i.e. fully functional UIX and ready to publish designs or broadcast time-based media like short film or animations. Remember, constant updates and feedbacks will help you build better outcome."

Progression

I followed my content plan to make the flowchart. Mr. Asrizal said the website doesn’t have to be just simple scrolling. It could be more fun if users can explore different story paths instead. So, I added choices in the switch part (on/off) and the computer crash part (save, don’t save, cancel).

At first, my last “breakdown moment” was lunch break, where the spoon falls into the soup. But it didn’t connect well with the part before. So I changed it to late night scrolling at home. This connects back to the missed alarm in the morning, since you stayed up too late, making the story loop.

Fig. 2.0 Flowchart

Fig. 2.1 Moodboard

I started by designing an early version of the homepage in Figma to test different colour and font combinations. In the Fig. 2.2, the heading font is Berlin Sans FB, and the subtitles use Ubuntu.

Fig. 2.2 Initial Homepage

Mr. Asrizal suggested avoiding fonts that look too formal. He recommended something messier and more chaotic to better match the theme — like Jacob Riley or Missing Lovely.

After some experimenting, I chose a final colour palette that feels bright and energetic. For the fonts, I went with the messy East Sea Dokdo for headings, and the more readable Edu SA Beginner for body text.

Fig. 2.3 Colour & Typography

I’ve roughly designed the first few sections. The illustrations are not finished yet, ’ll refine them later. For now, I just wanted to see how the layout looks.

Fig. 2.4 First Version Design

In Week 8, Mr. Asrizal suggested removing the outline from the loading bar. Then, I made the change.

Fig. 2.5 Second Version Design

After that, I drew the alarm clock in Procreate, then used After Effects to animate the clock hands moving and the alarm shaking to show it ringing.

Fig. 2.6 Alarm Animation (no sound)

For the brushing teeth section, I first sketched a rough version of the mouth in Figma. I found that Figma's brushes have a messy, hand-drawn feel, which fits the mood of my website really well. Since Illustrator doesn’t have the same brush style, I used Figma for the initial drawing and then refined it in Illustrator. I also added facial expressions to each tooth.

Fig. 2.7 Brushing Teeth Section's Illustration

Before the brushing teeth section, there’s a switch. If you choose “on,” the phone isn’t charged because you forgot to plug it in. If you choose “off,” it also didn’t charge. I used blue and yellow to show the two outcomes clearly.

Fig. 2.8 Switch ON/OFF Section

To connect the low battery and traffic jam sections, I added a large sliding text in between: “FASTER FASTER FASTER YOU'RE LATE” to show the urgency.

Fig. 2.9 Horizontal Scroll – Transition Text

The traffic jam part was the hardest to draw. Even with references, my first draft didn’t look right. So I used a real first-person driving photo as a guide and redrew it. The second version worked much better and matched the mood more clearly.

Fig. 2.10 First-person driving reference

Fig. 2.11 First Version Traffic Jam Illustration 

I animated it in After Effects. It starts with the character rushing through traffic because they are late. Then the screen becomes blurry and you realise it was all just in their head. In reality, they are stuck in a traffic jam and the car is not moving at all.

Fig. 2.12 Second Version Traffic Jam Illustration with Animation

Next is the computer crash section. It shows the message “Do you want to save changes before exiting?” with three options. Fig. 2.0 shows the Figma animation. If you click “Save,” the screen goes black. If you choose “Don’t Save,” it shows “OOPS! ALL GONE.” This kind of moment in real life feels really frustrating.

Fig. 2.13 Computer Crash Section - Figma animation

The last frustrating moment is late night scrolling. In Fig. 2.3, it starts with a day to night animation. You can choose “Go to Sleep” and it shows “That’s not sleeping. That’s overthinking.” Or you can choose “Keep Scrolling” and it shows “You said one more scroll, three hours ago.” I really liked this part because it feels very real to me. But during the coding stage, I had to remove it because I ran out of time and the illustrations & animation were not finished.

Fig. 2.14 Late Night Scrolling Section - Figma animation

At the end, I added a short message to remind people they’re not alone in their daily struggles. The background has a rotating animation, and there’s a “Back to Top” button for users to go back to homepage.

Fig. 2.15 Ending Scene

Final Outcome

Fig. 2.16 Figma Prototype: Moments That Break You

Final Project

Instruction

"Final Project consist of the finalized project output developed i.e. fully functional UIX or ready to publish designs or broadcast time-based media like short film or animations."

Progression

For the coding part, I used Visual Studio Code. I had never used it before, so I wanted to give it a try. I used to code with Adobe Dreamweaver. At first, I was a bit confused about how to create files and preview the website, but after that, it was fine. I think coding was the hardest part. I did use ChatGPT to help me, but sometimes it kept giving me code that didn’t work and it made me so frustrated haha.

I actually didn’t start with the homepage. The first thing I coded was the transition text: “No time to think, just move, wait what is that switch.” I got inspired by the “scroll float” animation on reactbits.dev, and I really wanted to try it. After testing, I managed to make it work.

Fig. 3.0 Scroll-Float Section (Text Animation Test)

Then I saw the “Falling Text” effect on the same site and thought it would be fun to try for the homepage too. I found a reference (Fig. 3.1) and decided to make the intro more eye-catching and playful. So I created an animation where the letters drop down and users can interact with them.

Fig. 3.1 Reference for Homepage (from Pinterest)

At first, the homepage started with just falling text (see the first image in Fig. 3.2). But I felt it looked a bit messy and the letters were hard to read when they all fell together. So I changed it by adding a white box around the text and included related emojis. This made it feel more like floating chat bubbles or comments, which also made it easier to read.

The text and emojis felt better after the change, but the background still looked too plain. So I replaced it with a messy, doodle-style background to match the playful theme.

Fig. 3.2 Homepage Design Process

I also designed a downward arrow cursor to hint users to scroll down.

Fig. 3.3 Custom cursor design in Illustrator

Fig. 3.4 Custom Cursor JavaScript

this website is designed mainly for desktop use, as it relies heavily on mouse interactions like hovering. On smaller screens, a popup will appear saying “Best viewed on desktop” (Fig. 3.5). If the user clicks OK, the site remembers the choice and won’t show the popup again. However, on mobile devices, only the homepage is accessible.

Fig. 3.5 Popup message shown on smaller devices

Fig. 3.6 shows all the files I used for coding. Sometimes there were so many that I almost lost track of where everything was.

Fig. 3.6 Screenshot shows all coding files including HTML, CSS and JS

Fig. 3.7 Interaction Breakdown

Final Outcome

Website Link: https://moments-that-break-you.netlify.app/index.html

Fig. 4.0 Final Project: Moments That Break You - Presentation Slide

Fig. 4.1 Final Presentation Video

Fig. 4.2 Walkthrough Video

---

FEEDBACK

Week 3:

• Since the product is not your own, it might be less interesting or personal to you.
• AR is an impressive technology. You could consider combining it with narrative storytelling or your custom font project to make it more engaging.
• You need to consider which abilities and skills you can showcase in this project.

Week 4:

• Research and collect more references on interactive websites.
• Use them to inspire your design direction and interaction style.

Week 5:

• Clearly define:
• What content your website should include
• Who your target audience is
• Look into references that focus on interactive design and user engagement.

Week 6:

• The current site structure might be too linear (just scrolling).
• Add interactive elements such as:
• Choices for users to explore different story paths
• Multiple narratives under the theme “moments that break you”
• Create a flowchart to visualise and organise story branches and interaction flow more clearly.

Week 7:

• I needed to do some research to find out whether Framer is actually an industry standard, since I wasn’t very familiar with it.
• The sudden shift to “lunch break” at the end felt a bit odd — but changing it to “Late Night Scrolling” makes much more sense. Good job on adjusting the flow in the flowchart.
• For the fonts, try avoiding ones that look too formal. Go for something more messy and chaotic that fits the theme better — like Jacob Riley or Missing Lovely.
• No issues with the overall style it.

Week 8:

• The loading bar could work more like an ON/OFF switch, try removing the outline to simplify it.
• The current font is much more suitable than before. Font-wise it’s fine now, the next step is to focus on how to animate the colours.
• The white “FASTER” text isn’t very visible on a yellow background and consider increasing the contrast.

Week 14:

• The user experience is good.

---

REFLECTION

I really enjoyed working on this project. It is something I liked doing, and I had fun during the design process. Even though there are still some parts that can be improved, I feel happy with the final result. Because of the time limit, I removed the Late Night Scrolling section. It was the most time-consuming part since I needed to draw everything and make the animation. It is a bit sad, but I am still satisfied with the result.

My favourite part is the homepage. I spent more time on it because it is the first thing users see. I wanted to make a good first impression. I also like that users can play with the text. I think it makes the start more fun.

While making the animation, I also learned a few effects in After Effects. There are still many things I have not explored yet. Besides animation, this is one of the few projects where I used HTML, CSS, and JavaScript. I think HTML is the easiest. CSS is okay. But JavaScript is really difficult. Many things were hard to understand.

I am very thankful for ChatGPT. It helped me a lot. But AI is not perfect. Sometimes the code had problems, and I had to fix them again and again. It was very frustrating, and I almost went crazy.

In the end, I am happy I chose this topic. Doing something I enjoy helped me stay motivated and work better.