Special Topics Module 2

Research & Activity Documentation

Abigael De La Rosa

Project 2



This project explores how interactive 3D models can enhance product exploration within a web-based environment. Through experimentation with Spline, I tested different interactions (such as rotation, hover states, and camera movement) to understand how they affect usability and user experience.

By focusing on iteration rather than a finalized product, the project highlights the importance of clarity, consistency, and intentional interaction design in creating effective 3D web experiences.


Action Research Testing

My original Action Research Plan proposed repeating the same sequence of activities in each cycle: learning Spline, exploring Hana, and integrating a 3D scene into a webpage. After reviewing the project timeline & scope, this approach was revised to create a more feasible and focused workflow. Since Project 2 only requires a prototype rather than a fully developed 3D product, each cycle now explores a different part of the workflow instead of repeating the full process.

The first cycle focuses on refreshing Spline fundamentals through tutorials & small experiments; the second explores Spline’s 3D Timeline Animation features for object & camera movement; and the final cycle tests how an interactive 3D scene can be integrated into a webpage or prototype.

This revision also replaces the earlier plan to explore Hana after discovering that it currently supports only 2D design and cannot import or work directly with Spline 3D scenes. Overall, the updated structure allows each cycle to build on the previous one while remaining achievable within the project timeline.


Action Research Cycle 1 – Spline fundamentals

<b>Part of Experiment 2 – Feature Highlight Interaction</b><br>The glowing/pulsing yellow ring changes to pink when the mouse hovers over either the dial or the ring itself <b>Part of Experiment 2 – Feature Highlight Interaction</b><br>The component label slides in and becomes visible on mouse hover, enabling the user to read more information about each product part <b>Part of Experiment 3 – Camera Zoom Interaction</b><br>The camera transitions from a wide overview of the product to a close-up view of the slider located on top of the device when the mouse is clicked, allowing the user to inspect the component in greater detail

Action Research Cycle 2 – 3D Timeline Animation

<b>Exploring Spline's 3D Timeline for the first time</b><br>Applying a Spring/Bounce animation on an object What if I separate a piece from the rest of the product for a ‘dissected’ view, where the piece slides/opens outward via Mouse Press? How can interactions like this provide users with a better understanding of a product? <b>Attempting to run 3 animations simultaneously:</b> the top dial rotating, the main cube changing colours, and the camera panning from top-right to bottom-left. However, when setting state transitions to 0.25s, Spline struggled to handle the rapid changes and began freezing whenever I tried to further adjust the dial’s animation.

Action Research Cycle 3 – Web Integration

Embedding Spline Viewer code into Figma Make using a sample snippet from their website <b>Learning how to export 3D scenes as a code.</b> In this one, the default Play Settings were kept for now as I wanted to test out the embed code on Figma Make first. <b>Applying changes to the 3D scene on Spline.</b> These include making the 3D scene background transparent so it blends with the hero section design better; adjusting the camera zoom; and changing the label colours for more contrast.

Project 2


Prototype Research & Development

(View the prototype through this link.)

This prototype is an interactive 3D product viewer for a fictional “Fidget Block,” designed to explore how users engage with a product on the hero section of a landing page. It allows users to rotate, zoom, and interact with parts of the model through hover and click-based cues.

Please note: All other buttons & links on the page are non-functional and serve only as part of the layout; the 3D model is the only interactive element in this prototype.

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit
×

Powered by w3.css