Introduction

Research

This case study documents my research and design process for the Special Topic course, where I explored motion and 3D integration within web experiences. The case study is organized into three main sections corresponding to each module of the course: Module 1 focuses on project direction research, Module 2 covers tool exploration, Module 3 define product topic, design, iteration, and development. Each section includes documentation of key activities, reflections on learnings, and visual assets that illustrate my process and outcomes.

Module 1

Research

In this module, I explored the different project directions available and identified the path that aligns most closely with my career goals. This decision is not only based on personal interest, but also on the type of work I want to create in the future and the direction the industry is moving toward. I see this course as an opportunity to deepen my understanding of motion and 3D integration within web experiences through research, experimentation, and iteration. Using the design thinking and action research methods introduced in the course lectures, this module establishes a clear learning plan. I will test ideas, reflect on outcomes, and adapt based on feedback. The goal is not just to choose a project direction, but to build a focused and purposeful development process that guides my work throughout the term.

Activity 1 | Choosing A Path

I explored the 3D Design branch by researching different sub-paths, retail challenges, and current industry trends to identify a direction aligned with my career goals. After comparing options and reflecting on their potential, I narrowed my focus to one main path to move forward.

Activity 2 | Choosing A Path

I developed and pitched initial project concepts, gathered peer feedback, and refined my direction based on usability concerns and personal learning goals. I shifted toward a motion-driven scrollytelling website concept that better supports my interest in motion, branding, and interactive web design.

Module 2 : Tool Exploration

Research

Having chosen scrollytelling as the project direction coming out of the last module, this phase focuses on exploring how motion and 3D elements can be integrated into a scroll-based web experience to create something engaging and immersive. At this stage, the goal is not to deliver a finished product. Rather, this is an opportunity to experiment with different tools and approaches through hands-on exploration, using the process itself as a guide for learning. By testing early and often, I hope to identify key uncertainties and technical challenges before committing to a defined topic.

Action Research Cycle 1

Starting Project 2, I used the Action Research to map out my knowledge gaps and prioritized key objectives. This guides my learning journey in Activity 1.

Activity 1 & Action Research Cycle 2

Learning and Exploring with Javascript library and animation tool to learn how scroll-based web experience can be created. Tool: GSAP(Scroll-based and timeline animations), Jitter(Motion and micro-interactions)
Live site demos and github links:
Learning GSAP Foundation | Live Site
Learning GSAP Foundation | Github
Cocktail Branding Site | Live Site
Cocktail Branding Site | GitHub

Activity 2

Explore different tool that allows me to create and incorporate 3D elements into web projects efficiently, and building websites that allow users to interact with 3D views through scrolling.

Action Research Cycle 3

Using the Action Research to identify key learning goals and knowledge gaps related to my current progress, and use it as a guide for my learning journey in project 3.

Module 3

Research

In this module, I explored the different project directions available and identified the path that aligns most closely with my career goals. This decision is not only based on personal interest, but also on the type of work I want to create in the future and the direction the industry is moving toward. I see this course as an opportunity to deepen my understanding of motion and 3D integration within web experiences through research, experimentation, and iteration. Using the design thinking and action research methods introduced in the course lectures, this module establishes a clear learning plan. I will test ideas, reflect on outcomes, and adapt based on feedback. The goal is not just to choose a project direction, but to build a focused and purposeful development process that guides my work throughout the term.

Activity 1

This activity focused on defining the project topic and creating all visual assets for the website. I chose to redesign a landing page for Aesop's Tacit Perfume and used Vizcom to design a brand new packaging concept from scratch, iterating through different variations using AI prompting. I also experimented with 3D model generation in both Vizcom and Meshy AI, ultimately moving forward with the Meshy AI output given the time constraints.

Activity 2

This activity covered the full design and development process. I used Claude Code and its Skills feature to generate an initial responsive UI, transferred it into Figma using Figma MCP, and then manually redesigned the layout to add more personality and better incorporate the Vizcom assets. I then used Claude Code to build the final website, troubleshooting issues along the way, and embedded the 3D model through Spline. I also explored NFC chips as a creative marketing extension for the perfume sample.

Research Summation

Across three modules, I explored how motion and 3D can come together to create immersive web experiences. I learned that scrollytelling is a powerful way to tell a product story, and that tools like Claude, Vizcom, and Meshy AI can significantly speed up the design and development process when used intentionally. More than the tools themselves, what mattered most was understanding the principles behind motion timing, asset optimization, and user interaction. This research confirmed that motion-driven storytelling not only aligns with where the industry is heading, but also makes brand experiences feel more engaging and memorable.

Reflection

In the final project, I applied the knowledge and skills I developed in previous projects, including GSAP, Meshy AI, and Spline, while continuing to explore AI tools such as Vizcom, Figma MCP, and Claude Code to make my workflow more efficient. Working with these tools also gave me a better understanding of how they are reshaping the standard design and development workflow. This project allowed me to finally work through many tools that had been sitting on my "to learn" list for a long time. I was very satisfied with my learning outcomes, and seeing all these skills come together in one project made the experience genuinely rewarding. I also learned how to better troubleshoot and identify the right tools for future projects. Although the final website is responsive and functional and met my initial learning expectations, it is worth noting that the entire Aesop website was defined, designed, and built within two weeks. Given that timeline, there are areas I would like to improve on in the future, including defining the new packing design through more research, user testing to evaluate the visual design, the scrolling and 3D interaction experience, and performance across different browsers. Overall, this project pushed me beyond my comfort zone in the best way possible. It challenged me to think not just as a designer, but as someone who is actively shaping how design and technology work together. As AI tools continue to evolve, I feel more confident in my ability to adapt, experiment, and build experiences that are both meaningful and technically considered. This project is a milestone I am genuinely proud of, and it has given me a clearer direction for where I want to take my skills next.