Case Study: Wedding Scheduling Responsive Website
Thera Sunset: Schedule your wedding timeline in minutes.
Overview
Product: Thera Sunset is an outdoor wedding venue located in the island of Santorini, Greece. The Thera Sunset responsive website is not a typical wedding venue website because it offers the option of scheduling the wedding timeline.
Guide: Google UX Design Professional Certificate
Duration: 7 weeks
My Role: UX Research, UX Design, UI Design
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Goal: The main goal for the design was to create a responsive website for the wedding venue with the option to schedule the wedding flow.
The Process
The Design Thinking process for this project is the one which was taught in the Google UX Design course. The process consists of five stages: Empathize, Define, Ideate, Prototype, and Test.
Understanding the user
User research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was busy adults who want to schedule the wedding timeline as quickly and easily as possible. Research also revealed that users want to have control over their wedding timeline and to be able to choose the desired order and duration of each festivity. Other user preferences included the option to select the preferred wedding festivities from many available and to add new wedding festivities.
User research: Pain Points
Time: Time for scheduling the wedding flow is limited for working adults.
Wedding Planning Process: People are overwhelmed by all the details they need to take care of during the wedding planning process.
Food: Food is one of the most important things. People want to be able to plan the opening and closing time of the buffet.
Outcome: People want their wedding to be unforgettable.
User Personas
Problem Statement: Paola is a busy adult who needs a quick and easy way to organize their wedding timeline because they are overwhelmed by all the details they need to take care of.
Problem Statement: Marvin is a detail-oriented person who needs to have control over their wedding timeline because they want it to be as they have imagined.
User Journey Map
Mapping Paola’s user journey revealed how helpful it would be for users to have the option to schedule their wedding timeline.
Starting the design
Sitemap
I started by creating a sitemap to guide the organizational structure of each screen’s design and to ensure a cohesive and consistent experience across devices.
Paper Wireframes
I took the time to draft iterations of each screen on paper, then I used the ideas I liked the most and created the final version of my paper wireframes.
Digital Wireframes
I created the digital wireframes using Adobe XD and then using the completed set of my digital wireframes, I created a low-fidelity prototype. You can check the low-fidelity prototype for desktop and for mobile.
Usability Study
I conducted a usability study to determine whether the users were able to complete the main user flow in the low-fidelity prototype of the product.
Research Questions
How long does it take for a user to schedule a wedding timeline using the website?
Are users able to successfully schedule the wedding timeline as they want?
Are users able to successfully remove a festivity they don’t want?
Are users able to successfully add a new festivity that they wish to be included?
Are users able to successfully put the festivities in the desired order?
Are there any parts of the scheduling process where users are getting stuck?
Key Performance Indicators (KPIs)
Time on task: how much time users spend scheduling a timeline
Task success rates: how many users successfully complete a particular task
User error rates: how often users get stuck trying to schedule the timeline
System Usability Scale: a questionnaire to evaluate customer feedback
Research insights
1. Users want to be able to remove a festivity that they don’t need.
2. Users want a confirmation message after saving or deleting a festivity.
3. Users want fewer gallery pictures on the Home page.
Refining the design
From all the insights collected from the usability study, I corrected and improved my digital wireframes. Also, I worked on my mockups for each screen. After laying out all the screen mockups I connected them, added gestures and motions to create a high-fidelity prototype. You can check the high-fidelity prototype for desktop and for mobile.
High-fidelity screens
Responsive Design
The designs for screen size variation included mobile, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Accessibility Considerations
1. The drag-and-drop interaction can be done using keyboard keys. It is also accessible when using screen readers. Although, as an alternative way to put the festivities in order it has been also added a drop-down menu on each festivity page in which users can select the desired order of the festivity.
2. Used accessible color contrast confirmed by WebAIM.
Going forward
Users shared that the wedding timeline can be scheduled fast and with ease with the website’s features.
While designing the Thera Sunset website, I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Next Steps
- Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
- Interview users to get to know their feedback on the product.
- Conduct more user research to determine any new areas of need.
Thank you!
Thank you for your time reviewing my work on the Thera Sunset website! If you’d like to see more or get in touch, my contact information is provided here.