Redesigning the Indonesian Society website in New South Wales
Turning a generic template into a culturally expressive, 3D-powered hub for Indonesian students across NSW.
Project Year
2025
Client
ISANSW
Team Size
4
Tools
Figma, Blender, React, TypeScript, Tailwind, Vite, Vercel, GitHub
The Brief
Project Snapshot
ISANSW connects Indonesian students across NSW through events, culture, and support. The website needed to stop feeling like a template — and start feeling like a home base.
My role
I led interaction + visual direction and shipped the build with the dev team — turning the design into a scalable React + TypeScript site (including the 3D hero system).
Chapter 2
What Was Broken
The biggest issue wasn’t just visual — it was that the site didn’t give students a reason to return. Updates lived elsewhere, and the experience didn’t feel Indonesian.
Identity gap
“It was functional, but it didn’t feel Indonesian.”
— Society President
User Needs
A warm, culturally expressive interface that reflects Indonesian identity.
No reason to visit
“Why visit the website if updates are only on Instagram?”
— Previous Webmaster Director
User Needs
A reliable hub with up-to-date community info — not a static page.
Trust issues
“Some buttons didn’t even work — it felt unfinished.”
— Indonesian Student
User Needs
A predictable, functional experience where interactions work.
Chapter 3
Design → Build
I designed with implementation in mind — every layout decision had to survive responsive constraints, Tailwind tokens, and real code.
First Iteration
I explored ticket-inspired event layouts and a gallery-style homepage. Feedback showed the hierarchy needed to be clearer and the typography needed better readability.
So I tightened spacing, simplified components, and improved the type scale to translate cleanly into code.
Design–Dev Constraints (the real stuff)
I treated constraints as part of the design — Flexbox spacing, responsive stacking, and token consistency. The goal: expressive visuals that are actually buildable.
Matching Tailwind Tokens
I mapped the design palette to Tailwind’s tokens so the look stayed consistent in implementation (no “almost the same pink” drifting across components).
Decision
Redefining the Web in 3D
Instead of using stock imagery, I used 3D campus landmarks as the hero — so students instantly feel: “this is my campus → this is my community.”
Why 3D worked here
Landmarks act like visual shortcuts: recognition, belonging, and navigation — in one glance.
The tradeoff
3D can be heavy, so I kept motion subtle and optimised assets to protect load/performance.
Proof (Front-end integration)
React + R3F, but kept intentional
I built the front-end system in React + TypeScript and integrated the 3D hero with R3F. The motion is lightweight (small math-based rotations + damping), aiming for “alive” — not gimmicky.
Chapter 4
The Reveal
Student society websites often look identical: generic templates, low trust, no warmth. This redesign flips that — culture first, clarity second, polish always.
The old website
Confusing, outdated, culturally empty
The new website
Modern, vibrant, culturally expressive
Drag the middle slider to compare.
Chapter 5
Impact
The new ISANSW website launched with a 3D landing experience, clearer navigation for events/committees/sponsors, and a digital presence that finally feels student-run, warm, modern, and proudly Indonesian.
Reflection
Design–Dev Mindset
This strengthened my ability to design for feasibility — expressive visuals that survive real front-end constraints.
Leadership & Communication
I learned to communicate across disciplines, keep momentum through change, and balance storytelling with technical practicality.
If I Had More Time…
I’d refine performance further, expand CMS support for future committees, and add more micro-interactions across the site.
Key Takeaway
Culture isn’t decoration. It’s building a digital space where identity feels familiar — even when students are far from home.
Currently Open to Work
Let's connect
Internships, collaborations or creative ideas — I’d love to hear from you ✿