Fadil puthiya madathummal peedikakandy / 0354579 / Bachelor Of Design (Hons) In Creative Media
Major Project
Instruction
Things to remember
- Don’t try to do something completely new; it’s too risky, and there’s not enough time to experiment and fail gracefully.
- Think about the industry
- Don’t obsess over the final outcome yet; focus on making the process solid and high-quality.
- Keep my ideas ambitious but achievable, no one wants a breakdown halfway through because I aimed too high.
- Make sure the work has polish and attention to detail because it needs to stand out, not just “get by.”
- Tell a story: Make your project so engaging that even someone who has no clue what you’re doing will go, “Wow, that’s actually cool.”
For our Major Project, we had the choice of either building on our dissertation topic or exploring something completely new. I decided to go with a fresh idea because, honestly, I didn’t enjoy my dissertation topic that much. I might reuse a few elements from it, but not the whole thing. it just didn’t feel inspiring enough. I chose to focus on interaction design, with a specific interest in storytelling. The idea was sparked by some incredible games I’ve played and my own childhood experiences, particularly my love for collecting things back then. Since I’ve been dealing with burnout lately, I thought creating something that connects to those nostalgic memories might help make the project more manageable and even enjoyable.
Lately, I’ve noticed a growing trend toward gamification and interactive storytelling on websites. It’s been fascinating to see how these elements are being used to create richer, more engaging user experiences. This trend really motivated me to explore this direction further and see how I could push the boundaries of design to create something big, interactive, and meaningful.
at first, I pitched an idea with an interactive short film to two of my teachers however they said a short film is too much towards the movie industry and its not gonna be very relevant to our current major project. they asked me to find something out of the box and cutting-edge
I focused entirely on researching the latest design trends and brainstorming new ideas. I spent long hours, sometimes staying up all night, thinking deeply about what I should do next for my project. To organize my thoughts, I created a detailed chart where I listed all my ideas. It felt like I was throwing everything onto the table, no matter how wild or unconventional the ideas were.
One of the ideas that stood out was completely out of the box and a bit risky. It’s not something you’d normally see, but I realized that if it worked, it could be truly amazing. The concept was to create a live website that would revolutionize digital interaction through immersive storytelling.
This idea felt ambitious, but I was excited to explore it further. I knew it would be challenging, but the potential to create something groundbreaking motivated me to push forward
I remember showing Miss Anis an interactive website a few semesters ago and asking her if she thought it was possible for me to create something like it. She told me that the website was created by a studio and was the result of a team effort, so doing something on that scale alone would be impossible. But she encouraged me, saying I could try something similar.
The website I showed her was Nomadic Tribe. It was a beautifully crafted, interactive experience with a meaningful message. I’ve always admired how it combined creativity and storytelling in such a seamless way.
this was the website
Nomadic tribe
Now, with technology having advanced and my own skillset being much better than it was back then, I thought, “Why not give it a shot?” It felt like the perfect time to challenge myself and see how far I could push my limits to create something just as engaging and impactful.
The first step was creating a script that served as the backbone of the entire experience. This script defined the story, user interactions, branching paths, and emotional impact of the journey.
Initial script v1 t(testing for fun)
To try out if what I think i possible, i did a bit of more research and found out that I can achieve what i envision with these two tools, framer and spline
why framer? Framer is a great tool that combines design, prototyping, and interactivity in one platform, making it highly relevant to the future of the UI/UX industry. Framer is already powering product design at some of the world's most innovative companies, including Google, Facebook, Dropbox, Twitter, and Snap
and Spline is a great tool for 3D design and interaction, especially for the web perfectly aligning with the future of UI/UX innovation. Spline is shaping the future of UX design by making 3D interaction accessible and integral to digital experiences. It allows designers to create, customize, and integrate interactive 3D elements directly into websites. Spline is perfectly positioned for the growing demand for immersive and engaging user interfaces.
Conducting In-Depth Research
The Wilderness Downtown" by Arcade Fire and Google Chrome Experiments
Google’s "A Journey Through Middle Earth
Bandersnatch (Netflix Interactive Movie)
Replika (AI chatbot)
Limited Depth: While Replika creates emotionally engaging conversations, it lacks the deep or thought-provoking prompts that could make an AI seem more intellectually engaaging. Market Niche: Primarily targets users seeking companionship rather than a broader audience interested in interactive storytelling
Testing out the prototype in spline and framer for an initial experiment
Adding interactions to the user input
This was one of the hardest parts of this project. I first imported the spline 3d prototype, however becausethe text fills the entire screen I couldn't do any interaction which almost made me quit the project. because without it the whole point of this is no more. Heres how i overcame it
(1) Learn with framer university: I was very new to framer. So I still had a long way to go to master, this, so I started learning and exploring more
(2) fixing the issue: I finally found the way to overcome it with a unique trick. I placed a small box in the frame. created a component. put the clickable interactions inside the component and then make the overflow visibe
(3) another issue: even though i fixed the initial problem. I had to make an interactive textbox where they click and new things come up and an animation to feel immersive without compromising the hover tracking
(4) final verdict: this was a big issue, I spent hours figuring out how to use the components to achieve this as framer is limited in that aspect. I found a new solution myself by creating multiple component. making different variations and connecting them together. after this i decided to continue with the project
after this i moved on to figma to continue making the design system
UI Components: Created reusable components, such as buttons, icons, and navigation elements, to maintain consistency and reduce redundant work.
Interaction Guidelines: Defined standards for how interactions would look and feel, ensuring a cohesive user experience.
Typography: Chose fonts that balanced readability with personality, ensuring they worked well across devices.
Storyboarding and Scene Mapping
then I did Storyboarding to visualize the flow of the user experience
Scene Breakdown: Mapped out every scene, including transitions, decision points, and expected user actions.
Visual Flow
Testing a Low-Fidelity Prototype
I made a prototype to validate the basic user journey and see how the first act looks like
Embedding a test versiON: I put a test version inside framer and checked the interactions and the textbox combination to see if its working
website design: I made a website as part of the experience where they traverse into the spaces in between
Adding media: In the prototype, i tested adding media, images, sliders and videos to see if it works well together to get a refined experience and make the concept come to life
Creating & adding interactions to the 3D Models in Spline
The 3D robots, environments and characters rigged in Spline, focusing on its adaptability and personality.
Optimization: for the characters to work on the web, as well as to interact. i had to put them in blender and reduce the polygons, vertices and compress the file so that it's good enough but also small enough to run on the web
Interaction: In spline. I first set up a camera, and separated the parts of the character that needs movement. i used the technique called look at-“follow cursor” and put the damping a bit higher to match theinteraction until it feels smooth and ready to use
Animation: Created basic animations, such as idle movements and reactions to user inputs, to bring the robot to life.
Integration of 3D Models into Framer
components and performance Testing: Identified errors in components, fixed the faults and lag or rendering issues during integration.
Once the initial 3D models were ready, they were integrated into Framer to test interactions.
Responsive Interactions: Tested how well the robot adapted to cursor tracking and other user inputs.
Optimizing 3D Models in Blender
I had a big issue. all the 3d models I planned to use ended up being incompatible as they were too big or had too many polygons. To address performance issues, 3D models were optimized in Blender. some ideas were significantly changed
Texture Compression: Reduced file sizes by compressing textures and optimizing materials.
spline Testing: made sure models performed well across spline and web browser
RAPID PIPELINE: After the compression, the models were still a bit too laggy so i decided to use rapidpipeline to compress the models even further which eventually started working on the web
Refining the Script and Implementing the First Sequence
With the initial technical groundwork complete, the script was revisited and refined to align with the project’s direction.
Sequence Implementation: Designed and implemented the first sequence, ensuring the robot’s looks and words matched the narrative and the frame
Transitions and Feedback: worked on seamless transitions between scenes, text animations and immediate feedback for user interactions.
Proposal presentation WEEK 7
After this I did user testing for the first act
User testing v1
3 people
Fairoos (user)
This is a great idea! I’ve never seen a website that operates like this before, and I find the concept interesting. There’s not much negative feedback I can give at this stage because the first act feels well-thought-out and promising. However, I am really curious to see how the rest of the design unfolds. I’d love to experience the complete journey and see how the interactions build on what’s already here
ito (user)
The project is quite interesting overall. However, I did have a bit of confusion when I first landed on the page. There was only a line of text visible, and it wasn’t immediately clear to me that I needed to click on it to proceed. I wasn’t sure if it was meant to be an interactive element or just part of the design. Adding some sort of subtle hint, like a visual indicator, an animation, or even a hover effect, could make it more easier for users like me.
aidil (user)
I think the first part of the project is quite nice and definitely interesting. I like the interactive experience so far, I did encounter some performance issues. It was a bit laggy on my laptop, but I suspect that might be because my laptop is slightly older but It’s something to consider, though, as not all users will have high-performance devices. If there’s a way to optimize the performance further it would be great
Continuation of Script and Full Prototype Development
I did extensive research, immersing myself in books and videos about existentialism, philosophy, and human behavior to write a cohesive, immersive script. Writing and rewriting to connect abstract ideas with the narrative was mentally draining but it necessary to make the entire thing feel connected and immersive
Using Spline, I integrated 3D models, but performance issues led to continuous optimization of the entire thing (6 acts and one website) Finally, syncing these elements with the narrative I had to create a visually engaging and immersive experience, balancing aesthetics with performance.
In Framer, I translated the script into an interactive design, animating text and adding clickable elements. The design system, typography, colors, and layouts was made to complement the story’s mood and blend with the environments. i had to refine Every interaction to make it feel immersive
User Testing v2 (act 1 - 4)
ko yanagihara (user)
“I’m really liking how immersive this feels, i haven't used a website like this before. The story and choices kept me hooked, but I did notice some lag when moving between sections, especially where the 3D elements load. It’s not a huge deal, but it threw me off a bit. Maybe tweaking those transitions or cutting down the load times could help? Also, I love how the text animations flow. it feels smooth overall”
tristan (user)
"I love the concept, it’s super engaging, and the branching choices are fun. One thing, though, is that the pacing felt a bit off in some areas. Some parts moved quickly, while others dragged because there was too much happening on-screen at once. For example, when a lot of text popped up with animations, in the act 2, it felt like information overload. Maybe slowing down certain animations or summarizing the text might help keep things balanced. Other than that, I loved how intuitive the clickable elements were. it’s clear you’ve put a lot of thought into this.
POLISHING THE EXPERIENCE
After receiving user feedback, I made the difficult decision to remove certain sequences (acts) that, while ambitious, were challenging to complete within the given time frame. Keeping them would have made the overall experience longer and less streamlined, which risked losing the user's engagement. These cuts were bittersweet because I had poured a lot of effort into designing them, but I ultimately realized that simplifying the experience was essential to maintaining its quality and flow.
in the first picutre, its an exciting gamified feature where, after a meteor impact, the user could control a dinosaur using the "W, A, S, D" keys to explore the environment. This was meant to immerse users in a prehistoric landscape, offering a playful break in the narrative. The journey was initially planned to transition into the Ice Age, introducing mammoths and other elements that added depth and variety to the story.
These scenes were some of the most creative and visually striking parts of the project, but they also required significant time and effort to optimize for the web. In the end, streamlining the prototype allowed me to focus on the core narrative and interactivity, While saying goodbye to these elements was tough, it showed the importance of balancing ambition with practicality, prioritizing the user experience above all
Finalizing the High-Fidelity Prototype
The final stage of development involved creating a polished, high-fidelity prototype that brought every detail of the project to life. This phase required attention to both design and storytelling. The prototype have six distinct acts, each building on the narrative and branching interactions. The website design evolves dynamically, changing based on the user’s choices. Here's a breakdown of the acts
Act 1 - The Prologue
Act 2 - Diverging Paths
Act 2.5 - The Illusion
Act 3 - The Comfort
Act 4 - The Revelation
Act 5 - The edge of existence
Act 6 - The Conclusion
User Testing v3 (Post-Finalization)
ko yanagihara (user)
I'm glad I got to be one of the first people to experience this. Honestly, this feels like a work of art. It really made me reflect and think about things I hadn't considered before. I loved how everything tied together so seamlessly—every choice felt intentional and added something meaningful to the overall experience. It was thoughtful and profound, and I could see the love and effort put into it.
eesha (user)
nice, the ‘Edge of Existence’ part was my absolute favorite. It was beautifully visualized and thought-provoking. and the writing was just on another level. You can tell a lot of care went into crafting that section. It was one of those moments where you pause and just let it all sink in. A great experience
Fairoos (user)
That was such an interesting experience! I have to say, the ending stood out to me the most. it was so beautifully designed and left me feeling fulfilled. The way it tied up the story while still leaving room for interpretation was brilliant. I couldn’t find a single thing to complain about. I’m genuinely glad I got to go through this because I learned a few things along the way
tristan (user)
The entire journey was so cool! From dinosaurs to cute robots, and traveling between the future and the past. it all felt like an nice adventure. It was fun, creative, and visually stunning. I loved how it combined so many elements in a way that didn’t feel overwhelming but instead kept me engaged the whole time.
FULL SCRIPT, STORYLINE, CHOICES & OUTCOMES
All acts final storyline
There’s one part I intentionally left out of this file. the moment you step into the website. There’s a subtle trick hidden within. If you pay close attention, you’ll notice it talks about the illusion of freedom. The entire script is designed to reflect this in a unique way. You may feel like your choices matter, but do they really? To understand, go into the experience and see for yourself.
While designing Act 2, I wanted to create a scene where the robot stands in a futuristic city while it’s raining. Initially, I built a 3D environment in Spline, but the file size was too large for it to run smoothly. To solve this, I used a video of a futuristic city as the background. I compressed and color-graded the footage to fit the mood.
However, it still felt off, the robot looked more like it was on a billboard than part of the scene. To fix this, I layered another video of dark rain over the background. I brought both videos into Framer, set the top rain layer to "multiply," and adjusted the opacity until it blended perfectly. This workaround made the robot feel like it truly belonged in the rainy cityscape.
In detail composition process of act 4
In act 4, the first idea was a to actually create a walking environment for the dino where the users can actually have full control of that by pressing W,A,S,D just like playing a game.
however, this cool feature was removed after the user testing as they has to use it like a game to navigate which took longer and it was much harder to design considering the deadline for this project. unfortunately this was removed however I found a clever workaround by still having interaction and moving the dinosaur but not by pressing the buttons, instead with the cursor itself, the plan was to make an endless walking terrain for the dino, however, that was too large to do and the file would not run on the web, instead I found a much cooler way to do this by using a cylinder as terrain and the cylinder is constantly moving instead of the dinosaur but it does move according to the users interactions
Philosophical Inspirations
The script for this project is inspired by some of my favorite philosophers. Their beautiful way of seeing the world has deeply shaped my writing and ideas.
Nietzsche is one of my fav philosophers, His writings on truth, morality, language, aesthetics, cultural theory, history, nihilism, power, consciousness, and the meaning of existence helped me a lot with this project
He is someone i admire a lot, and The Core Principles of Musashi's Philosophy: Self-Discipline, Self-Reliance, and Continuous Self-Improvement
Marcus Aurelius's strongest philosophy comes when he speaks on the eternally changing nature of the universe and the acceptance of death. He reminds us that all of us will die, however, we only ever lose the present moment because that is all we ever have. Nobody “loses more” by dying early.
Poster design
I'm so happy to finally share this. Every part of this project has been made with care and a lot of hard work. I hope you enjoy it as much as I enjoyed creating it. Thank you for being part of this journey
Comments
Post a Comment