HKBU Iftar 2025 Landing Page

During university, I've led our student community at Hong Kong Baptist University to organize an Iftar event, a community gathering to celebrate the breaking of the fast during Ramadan. I witnessed firsthand how the event grew to welcome over 100 participants annually.

Here's video from 2025 event:

When number of participants grew, it came with a challenge: participants constantly messaged us with questions about logistics, location, timing, and event details.

In 2024, I identified a critical problem: We were spending countless hours answering the same questions repeatedly, Where is it? What time? What should I bring? Is there prayer space?

The solution: Design and develop a dedicated landing page that would serve as a single source of truth for all event information.

Key Objectives

• Centralize essential information to reduce inquiries and enhance coordination
• Build with Next.js for efficient performance and responsiveness
• Create a single source of truth for event logistics

Project Background and Requirements

Drawing from the previous year's experience, where participants frequently messaged with questions about logistics, I identified the need for a dedicated resource.

Common inquiries included:

• Event location and timetable
• Food options
• Prayer facilities
• Appropriate attire
• Feedback submission

Key priorities from organizer meeting:

• ✅ Clear navigation to address common queries
• ✅ Inviting design to foster community and spiritual reflection
• ✅ Minimalistic structure for quick access

Impact: This user-centered approach significantly minimized redundant questions in 2025, particularly regarding location and scheduling, allowing organizers and participants to focus on the event itself.

Research and Inspiration

To establish a foundation, I examined visual design elements and design principles:

Design Elements:

• Color, typography, shape, and space

Design Principles:

• Hierarchy, contrast, balance, and unity
• Gestalt principles (proximity and similarity) for intuitive information grouping

Layout Research:

• Reviewed similar event sites
• Favored single-column format for mobile-friendly readability

Typography Choices:

• Pinyon Script – Elegant headings to evoke tradition
• Montserrat – Modern, accessible body text
• This combination supported both accessibility and cultural resonance

Low-Fidelity Wireframing

I initiated the process with low-fidelity wireframes to outline structure rapidly.

Approach:

• Used placeholders for text, icons, and sections
• Avoided colors or images to concentrate on flow and functionality

Key sections:

• Hero banner for welcome message
• Timetable and location details
• FAQ accordion
• Feedback form

Outcome: Quick validation of content organization, confirming alignment with user needs before refinement.

Mid-Fidelity Development

Advancing to mid-fidelity, I incorporated design assets into a grid-based layout for consistency.

Refinements:

• Enhanced hierarchy and proximity for navigation bars, buttons, and text blocks
• Added stock images as placeholders for event visuals
• Ensured design supported intuitive interactions

Iteration:

• Gathered feedback from organizers
• Expanded FAQ section based on feedback
• Optimized usability while keeping design grayscale

High-Fidelity Design and Implementation

In the high-fidelity stage, I applied a curated color palette to evoke warmth and invitation:

Color Palette:

• #F3F0BC – Tranquility and calmness
• #052E16 – Grounding stability
• #CA8A04 – Optimistic warmth
• #FB7185 – Joyful accent
• #FFFFFF – Clean clarity

These choices reinforced themes of community and reflection, with contrast ensuring readability.

Implementation and Results

Technical Implementation:

• Built with Next.js leveraging server-side rendering
• Optimized for fast loading and SEO
• Fully responsive across mobile and desktop

Final Outcome:

• ✅ Minimalistic, user-friendly interface
• ✅ Effectively addressed all identified queries
• ✅ Seamless experience for 100+ attendees
• ✅ Significantly reduced logistics inquiries

Key Takeaway: This project demonstrates end-to-end UI/UX proficiency, from ideation through deployment, delivering tangible improvements in event coordination and participant experience.