Wedding RSVP
interactive wedding invitation website with online RSVP
Public project・Apr 2024
VISIT SITE
I received the best news from my close friend, she was getting married in a few months!. And she trusted me to create her wedding invitation website, including an online questions form to invite guests and track all attendance. After discussing her needs, we summarized the main requirements:
1.) Should be a single-page web application and included all event details in that page.
2.) The website should display each guest’s name to make the invitation more personal and impressive.
3.) A simple online form for invited guests with three questions:
- Guest’s name
- Attendance status: Attending, Not Attending, or Not Sure
- Number of accompanying people
1.) Should be a single-page web application and included all event details in that page.
2.) The website should display each guest’s name to make the invitation more personal and impressive.
3.) A simple online form for invited guests with three questions:
- Guest’s name
- Attendance status: Attending, Not Attending, or Not Sure
- Number of accompanying people
After that, I began researching online wedding websites but couldn’t find one that matched all these features in a single page. However, I learned about a popular system called RSVP (Répondez s'il vous plaît, French for “Please respond”). I decided to adapt this concept for the project and used Notion to applied as the database, Because it already provides a user-friendly interface for manage the data which helped me shorten development times a lot. This image below is the overall system architecture that I designed:
System Architecture Overview Fortunately, my friend, bride, had already designed her own physical wedding invitation card and hand-drawn illustrations for the event, which she shared for use on the website.
Wedding invitation card design and illustrations I designed the website based on her invitation card style, adding animation and interactive elements to match the cuteness and romantic wedding theme. The RSVP section was designed to be pure and simple for all guests.
Responsive UI Website design on desktop and mobile For animations part, I used GSAP[1], a powerful JavaScript library for smooth and responsive web animations, perfect for create scroll-based motion effects that enhance user experience and make the website feel more lively and memorable.
Screen capturing of website on mobile The design was intended to mimic the elegance of the physical invitation card while offering interactive experiences that paper couldn’t provide. For the example below, the Dress Code section comes alive with charming animations that invite user interaction.
the Dress Code section UI design
Interactive Dress Code section, responsive on click. After completing development and plugging website with Notion API, I delivered the project to my friend. She immediately started sending this online wedding invitations to her guests. In that same day, I received many positive feedback from users through my friend. And website analytics showed a surprisingly high user engagement, with the highest user active time exceeding 2.2 minutes that far beyond what I expected for a single-page site with minimal content. To further enhancement, I added a double-tap to “like” animation feature, inspired by Instagram and TikTok, to make the experience more enjoyable and memorable.
Double-tap to “like” animation feature. Reference:
1. GSAP.com