SOON

I worked on SOON's new look and website with Erin Manalo. It was one of my most ambitious projects yet –– from building an entirely new design system and rebrand from scratch, to working in Blender and WebGL, to UI design and implementation. I built the site in React and Next.js, developed the frontend architecture, and optimized the 3D assets and interactions for smooth performance across every screen size

Problem

How can we rebrand SOON into a hackathon experience that feels as crafted and ambitious as the builders it brings together, translated into a website that carries real 3D presence without sacrificing performance?

Roles/responsibilities

Brand identity and design system, built from scratch
UI/UX design and prototyping
Frontend development and architecture (React, Next.js)
3D modelling in Blender and WebGL implementation
Performance optimization of 3D assets and interactions

Info

When: 2026

Team size: 2

Timeline: 1 month

Tools used: React, Next.js, Tailwind CSS, Blender, Three.js/React Three Fiber, GSAP

Deliverables

The final deliverable was the SOON Hackathon website, alongside a full brand identity and a line of merch built on top of it.

Research

This case study walks through research and discovery, the design process, the final solution, and a review of impact and learnings.

Challenges

Missing information: a lot of the event details we needed to design around hadn't been finalized yet, so we had to design around unknowns
Missing content: copy, assets, and final decisions from the organizing team often arrived late or not at all
Time constraint: the entire rebrand and build had to happen in a single month
Avoiding the “vibecoded” look: with so many hackathon sites built quickly and generically, the site needed to feel deliberate and crafted, not templated
Reflecting uniqueness: SOON positions itself as a different kind of hackathon, and the UI needed to carry that same distinction

Process

We started with branding and before moving into the website itself, so every later decision had a system to draw from.

Designed the logo and a full design system from the branding
Designed pages directly from the design system, so visual language stayed consistent end to end
Designed interactions on a per-page basis, layered on top of the page designs
Kept everything responsive across every screen size
Built merch on top of that same identity

For a closer look at how the identity itself was built, see the branding page.

Outcomes

Impact

Several sponsors cited the polish of the site as part of why they decided to sponsor, noting that it showed we “care about the little things”
Raised $12k in sponsorship within 2 weeks
Hackers and applicants provided positive feedback on the overall experience and spent time interacting with the site.
Applicants cited the merchandise and design as a reason for their interest.
Participants, hackers, and organizers have all expressed satisfaction with the rebrand, especially the new visual identity.

Learnings

Picked up Blender texturing for the first time