A multidisciplinary hackathon experience combining strategy, design, and high-end technology.
This project was created by a team of 8 members (4 of us were third years, 2 of them were second years, and the other 2 were first-year students). Each person was contributing to different areas of the agency simulation, whether its graphic design, web design, video editing, or any sort of interactiveveness.
My Role: Web Designer & Developer
I was responsible for designing and building the website interface, ensuring responsiveness, managing GitHub, and organizing Figma file.
Web Dev + GitHub & Figma organizing
Web Dev + GitHub
Figma + Character Design
Game Coding
Brand Guide
Video Editing
Logo + Mockups
Moodboard + Scripts
This project was part of a multidisciplinary hackathon where we simulated a full-service digital agency based on the program's teachers' decided topic. We were given an announcement that a "A mid-budget sci-fi indie film is premiering at a major festival and streaming shortly after The producers want a premiere event that builds hype and visually reflects the film's futuristic aesthetic". The requirements were as followed: Premiere event branding, Trailer/teaser strategy, Interactive installation or experiential element, Red carpet/social share moments, Press and influencer strategy, and Visual assets for digital platforms.
One key challenge was for everyone to arrive around the same time to class so we would be able to cooperate, so schedule management was difficult since everyone's was different and us third years even had interviews to focus on for our internships at the same time. Design-wise, the challenge was about balancing strong visuals with usability (respecting the overall theme discussed), especially across different screen sizes. We also had to make sure that this project was clearly designed for the intended audience, like students our age (college students interested in multimedia program / graphic designing field).
We explored a "Futuristic Minimalism" direction by focusing on contrast, glowing accents, and structured layouts.
The planning phase included moodboards, scheduling, and concept alignment across the team. We had brainstormed multiple concepts around movies and references to Ruined Earth as a helping tool, designs giving futuristic / space vibes, and using colors representing sci-fi or fantasy.
Additionally, we shared out school schedules and made a task chart ready on Figma, so each person can update others on what they have worked on as a progress tracking method. For the website, we wanted to base the theme around easter eggs for websites like deltarune as an example, where the user would get redirected to another page by clicking on the highlighted word from a text paragraph.
The branding focused on high contrast visuals, neon accents, and a modern digital aesthetic. The brand guidelines included about information about Who We Are, "ATC Studios is not just about making films. It's about crafting immersive worlds at your fingertips. Whatever story you want to experience, wherever you are, the perfect cinematic universe is always there with you".
It also had the logo design page where you may find information about its symbols, such as precision, creative vision, dynamic energy, connectivity, etc. You will equally find rules about the color usage, illustrations of how it can look like without altering the initial identity, how it should not be misued, and the required spacing for the logo to stay legible and impactful.
We extended the brand identity to social platforms to maintain consistency and engagement. The platform we chose to show that on was instagram, which matched our main objective of showcasing our multidisciplinary launch capabilities (strategy, design, tech, storytelling), and our secondary goal of building anticipation for the immersive premiere as if it were real. Since Ahead of the Cut (ATC) is a creative launch agency for Indie Film, Our Positioning Message is "We don't just promote films. We design immersive launch ecosystems".
The website was built on the idea of giving the audience an interactive web experience similar to deltarune's website where they place easter eggs, to where the user would get redirected to another page by clicking on the highlighted word from a text paragraph. The site first plays a loading initialization screen to give it a tech-futuristic processing feeling to it, followed by the homepage where you can get access to our agency's info, identity, and process. The user sees the red "transmission intercepted" text message displaying at the top, and the bottom shows a flickering animation on the robot character background.
Following a series of hyperlinks leading to several pages, the user will come across 3 transmission logs, and only 1 of them leads to the secret minigame, where you are given the choice of going back to the lobby, or accepting the challenge as a pilot to save the planet from the danger it finds itself into.
The final presentation showcased our complete agency experience and live website with changes (regarding design decisions, visual hierarchy, color palette, content consistency, etc.) based on teacher's and other student's feedback, along with decisions communicated through our teammates.
Since this event is a week long, I thought it would be a great opportunity to track my time spent on my phone and so I decided to choose the "Manage Time on Technology" capyskil. This helped me track my time procrastinating on my phone, which shows me how it potentially impacts my school performance if I don't manage to balance it accordingly. As a result, I did manage to keep my phone away from me as much as possible using several techniques (like not having the phone too close to me), moving up from level 2 to level 3.
A walkthrough of our working experience as a team on our assigned tasks, showcasing a little demo of our project.
This project strengthened my ability to work in a team environment (become confident with communication among peers) and deliver under constraints. If I were to improve this project, I would improve the website's animations (or add), fix some stuff causing issues on loading screen, and enhance the interactivity part of the project.