AUJC Case Study

Links

Check out the club’s official website and its activities:

• AUJC Official Website
• AUJC Instagram

Background

The Adelaide University Japanese Club (AUJC) was established in 2026 following the merger of the University of Adelaide and the University of South Australia.
The club hosts weekly meetups where students and local community can participate in Japanese cultural activities, practice their Japanese, or simply meet new people.

As a newly formed student organization, the club needed a digital identity that reflected its values and encouraged students to become part of its community.
The primary objective was to create a modern, welcoming platform where students could learn about the club, discover upcoming events, and stay connected throughout the year.
In addition, the website needed to remain easy to maintain as committee members changed over time.

Research & Goals

Before designing the interface, I considered who would be using the website and what they hoped to accomplish.
The majority of visitors would be new students looking to learn more about the club, current members searching for upcoming events, and committee members responsible for updating information.

From these users, I have identified several priorities:

• Introduce the club and its activities.
• Highlight upcoming events to encourage participation.
• Present committee members in a welcoming and approachable way.
• Make information easy to find on both desktop and mobile devices.
• Allow future committee members to update content without requiring programming knowledge.

Design Decisions

Color Palette

The website uses a restrained color palette inspired by Japanese aesthetics, creating a calm and welcoming experience.

• #ECE1CD - the primary background color, providing a warm, paper-like canvas that feels softer than pure white.
• #657B69 - used in the featured event section, helping upcoming events stand out from the rest of the homepage.
• #D67E77 - highlights the committee section, giving a warm tone and encouraging visitors to learn more about the team.
• #5E635F - used for body text, offering enough contrast for readability while feeling softer than pure black.

I also layered a subtle SVG grain texture.
The combination of this and the background colors creates a paper-like surface that complements the club's Japanese-inspired aesthetic without distracting from the content.

Typography

To balance tradition with modern usability, I paired two complementary typefaces.
Cormorant Garamond is used for elegant headings, and Montserrat is used throughout the interface for its excellent readability across desktop and mobile devices.

Information Architecture

I structured the website around the questions a first-time visitor would naturally have, keeping the navigation simple so people could find information quickly without feeling overwhelmed.

The homepage introduces the club, showcases the latest event, highlights its activities, and provides a glimpse of the committee before directing users to more detailed pages.

Upcoming events are placed near the top to show that the club is active, while activities and committee members appear further down to add context.

Dedicated pages organise the remaining details:

• Events
• Committee

Implementation

Content Management

One of the project's most important goals was ensuring the website could be maintained without a developer.
Student clubs experience frequent event updates, annual committee changes, and requiring future members to edit code would create unnecessary maintenance challenges.
To address this, the website integrates Sanity.io as a headless content management system.

I landed on seven schema types in Sanity, each mapping to a real piece of the club's identity or operations:

• Top - clubName, buttonLink, and label. The first thing a visitor sees, so it needed to be editable without touching the layout.
• About - Icons (AUJC, JLACS, JCC) are grouped by orientation―landscapeIcon and portraitIcon. This lets future committees swap or add icons without touching the layout code.
• Event - title, date, location, bookingLink, image, and description per event. Events are ordered by date, with the most recent one pulled out to feature on the homepage.
• Activity - Array of title, description, and image. Showcase what the club actually does weekly.
• Committee - Splits into a groupPhoto and comment for the homepage, and a separate member array (photo, name, role, year) for the committee page.
• Contact - email, membershipLink, sponsorshipLink, and a list of socialLink.
• Metadata - clubName, description, icon, ogImage. These need to be editable since the club might change its name or icons.

Development

The website was built with Next.js, Tailwind CSS, and GSAP, with the data layer built around GROQ queries against Sanity.

Data fetching uses Next.js's revalidate: 3600 option on every query, meaning pages regenerate at most once an hour rather than on every request.
For a club site where events and committee info change occasionally but not constantly, this keeps pages fast without needing the club to trigger a manual rebuild every time someone edits content in Sanity.

GSAP is used for section reveal animations as users scroll through the page, and a horizontal drifting cloud animation in the hero section.

Reflection

Designing for a real organisation introduced a different set of constraints than designing for myself.
On a personal project, I can change direction on a whim. But here, every decision had to account for the club and a committee that turns over annually.

A successful website is not measured solely by its appearance, but by how effectively it helps people accomplish their goals.
Every decision, from the homepage layout to the content management system, was made with the club's long-term needs in mind.

The result is a website that establishes a strong digital identity for the Adelaide University Japanese Club, and also provides a sustainable platform that future committee members can maintain on their own.