Wedding Website
A custom multi-event wedding website built for an elegant Charleston celebration.
Overview
Samantha and James wanted a wedding website that went beyond generic templates. With multiple events over three days and guests traveling from around the country, their goal was to create a personalized, mobile-friendly hub for schedules, RSVPs, travel info, and galleries—all while reflecting their coastal Charleston style.
Project Duration
4 weeks
Role
Independent Project: UX Research, UX Design, UI Design
The Problem
While popular wedding site builders like Zola and The Knot offer easy-to-use templates, they lack flexibility for multi-event navigation and true brand customization. Samantha and James wanted:
-
A personalized aesthetic that matched their wedding invitations and overall style.
-
Clear navigation for multiple events (welcome party, wedding day, farewell brunch).
-
An intuitive RSVP flow where guests could respond to all events in one place.
​
Challenge: How might we create a beautiful yet functional experience for three key audiences—guests, the couple, and vendors?
The Solution
- Create an elegant, mobile-first experience.
-
Allow guests to RSVP for multiple events easily.
-
Centralize travel information and FAQs.
-
Showcase the couple’s personality through visuals and copy.
​
I designed a custom wedding website for Samantha and James that would not only function as a hub for all event details but also reflect their coastal Charleston aesthetic. The site needed to handle multiple event RSVPs, guest travel information, and serve as a digital keepsake with galleries and personal storytelling.
​
Goals:
-
Build a mobile-first experience that made finding event info effortless.
-
Streamline the RSVP process for multiple events.
-
Centralize FAQs, travel info, and registry links to reduce guest questions.
-
Showcase the couple’s story and aesthetic through design and imagery.
Process
-
Research and Synthesis
-
Ideation and Sketching
-
UI Design and Prototyping
-
Usability Test and Synthesis
-
Redesign
Tools
Miro, Otter, Figma, Canva
Research
Ideate
Design
Test
Reflect
Research
Research
I started with a competitive audit of leading wedding website builders (Zola, The Knot, Minted). Findings included:
-
Templates were attractive but rigid.
-
RSVP processes were often multi-step and confusing.
-
Event schedules were buried in submenus.
​
I also spoke with five recent wedding guests to learn their pain points:
-
“I didn’t know if I was invited to all the events.”
-
“I couldn’t find the dress code anywhere.”
-
“I had to text the couple for hotel info.”
​
Key Takeaway: Clear navigation, consolidated event details, and a fast RSVP experience were top priorities.
4
Questions
43
Responses
5
Interviews
Affinity Mapping
After gathering data from the participants I made an affinity map to organize and categorize the key notes taken. The 5 categories were products currently used, difficulties, important attributes and desired incentives.
.jpg)
Empathy Map
I then created empathy maps to identify the unique types of users that I will be designing for. These maps identified what the users do, think, feel and say. In this process I discovered 2 unique user types, one who typically is very indecisive and the other fatigued with decision making.
.jpg)
.jpg)
Personas
Based on the empathy maps I created 3 personas in order to ensure the decision making process will be user centered throughout the project. While creating solutions I would refer back to these personas for guidance.
How Might We Statements
Now that I have created personas and have identified who I’m designing for I used the “How Might We” method to maximize my opportunities for design.
-
How might we help users form a consistent reading habit?
-
How might we make discovering new books feel intuitive and personalized?
-
How might we encourage community and discussion without pressure?
Ideate
User Stories
In order to identify the functional needs of my product I created 16 user stories to set the requirements for my design. I then prioritized each task from high to low in order to create a well rounded product. My goal was to design a MVP (minimum viable product) by incorporating all high and medium priority user stories into my design. I was also able to incorporate most low priority stories into the application.
High
(Must Haves)
Medium
(Need to Have)
Low
(OK Not to Have)
-
Register for the application.
-
Log into my account.
-
Invite/add friends to collaborate with.
-
Options narrowed down so that choices can be more easily made.
-
Make a reservation with others.
-
Use a calendar to coordinate.
-
Make a choice for me based on my preferences.
-
Log into my account through touch and/or face ID.
-
Receive points/rewards.
-
Check places off a list.
-
Save posts straight from social media.
-
See my friends' shared interests.
-
Compare choices.
-
Receive suggestions based on my location so I don’t have to do the research while traveling.
-
Chat with friends and reviewers.
-
See wait times at restaurants/bars in my area.
Information Architecture
After Identifying the key features that will go into the design I created a site map to help structure the content and act as a foundation for the app. This would also help me understand the navigation of the pages that needed to be created and how they are all connected.
User Flows
Now that the overall navigation was structured I had to dig deeper into the user's journey throughout the app. I created 3 user flows of the essential tasks that needed to be completed. These user flows were critical to the main functions of the app and enabled me to identify the elements that will hold the most value to the users.
Sketching Screens
It was time to transform these routes into visual representations for design. I began sketching the screen layouts for all the user flows.
Wireframes
To develop these layouts further I converted these low fidelity sketches into wireframes using Figma. I used a mostly grayscale color palette with limited design elements to focus solely on the structure of the screens and prioritized mobile-first design for portability. Creating low-fidelity wireframes in Figma allowed me to further iterate my designs. I could still easily make changes to my design at this stage and focused more on clarity: easy navigation, minimalist design.
Design
Moodboard
I created a moodboard to be used for inspiration while making design decisions. I wanted a friendly, vibrant feel to encourage social engagement and reflect the brand’s personality and attributes to nail down the general aesthetic of the app. The images selected communicate social interaction in a positive and uplifting way. I used this to inspire my design and final color palette.
Style Guide
In order to be efficient and ensure visual consistency throughout the project I created a brand style guide. I defined the product’s color palette, logo regulations, typography, grid system, UI elements and iconography. These standards served as a guideline for every design decision to be made.
Hi-Fidelity Screens
I began incorporating the style guide and brand platform into the wireframes and converted them into high fidelity screens. This was definitely my favorite step seeing the designs activated and alive. I went for a modern and minimalist appeal to keep the design simple and most important user friendly.
Prototype
I created a prototype using Figma to conduct 5 moderated remote usability tests.
click to open the DEETS prototype...
Test
Usability Testing
The purpose of these tests was to ensure the users can complete the app's primary tasks, to ensure the users understand the app’s primary purpose, to identify any accessibility concerns or problems with the design’s interface and to assess the general impressions of the overall design.
The primary tasks the users were asked to complete were:
​
1. Input personal preferences.
2. Make plans with a group.
3. Post a review.
​
After collecting all the user feedback I used affinity mapping to categorize the insights and organize them by severity. Then I created a usability test report to document the data and prioritize the issues and recommend solutions. I discovered 3 major issues that needed attention and 3 minor adjustments.
Findings
.jpg)
Issue #1
The main finding from my testing was that most users are having difficulty finding where to post a review and are becoming a little flustered.
​
​
Issue #2
Users were unable to exit the pop-up pages in order to return to the previous page.
​
Issue #3
Users wanted to see their own review posts on their personal page.
Redesign
To address the issues I identified through usability testing, I made a few critical changes that would allow for a smoother user experience.
​
I created a separate section calling out places recently visited to post a review for. This provides the user to easier and quicker access.
​
I replaced all back arrows with a background touch point to easily return to the previous page.
​
I created a section on My Page with all of your posts similar to a personal Instagram feed.
​
On the Home Page, shown below, I switched up the order of the categories presented, so users would see more time sensitive categories such as "Your upcoming DEETS" without having to scroll too far down. This is the first page seen after logging in, so I also added a search bar and quick link buttons to this page for easier access.
Hi-Fi Screen
Home Page
Redesign
Home Page
Reflect
Overall, I am proud of the final product. As the Sole UX/UI designer for this project, I have learned a lot every step of the way.
​
I knew going in that I wanted to create something that my friends and I would actually use, benefit from and enjoy. Speaking with others who enjoy going out for food and/or drinks but find difficulty in choosing a location and planning with a group opened my eyes to even more possibilities for design solutions. This made it much easier to design something that all of us could benefit from.
​
From research to the final design, I am proud to have kept a user centered approach while creating something beautifully functional that accomplishes both mine and the user's goals.