WeddinG Venue Website
I designed a desktop website and mobile website for a wedding venue from conception to delivery. Through a process involving research, interviews, initial design phases, and a usability study, I ended with high-fidelity prototypes of the websites in Adobe XD.
The Goal
Design a desktop website and corresponding mobile website for a wedding venue that provides easy navigation, clear user flow, and an easy tour booking process.
My Responsibilities
As a UX designer designing the websites from conception to delivery, my responsibilities included:
conducting interviews
paper and digital wireframing
low- and high-fidelity prototyping
conducting usability studies
iterating on designs
User Research
I conducted interviews to understand the users I'm designing for and their needs. I gathered information about users' experiences with booking appointments online and their experiences with navigating websites.
I learned that users prefer a straightforward and short user flow when booking appointments online. Most users also prefer a website with an overall user flow that is simple and easy to understand.
Pain Points
User research identified pain points users have when using websites and booking appointments online.
1
NaviGation
Websites can be confusing or
difficult to navigate.
2
User Flow
Sometimes there isn't a clear user flow when booking appointments online.
3
LeGibility
Information on mobile versions of websites is sometimes difficult to read/see.
User Persona
After identifying pain points, I created a fictional user whose characteristics, goals, and frustrations represented the needs of a larger user group.
Age: 28
Hometown: San Francisco, CA
Family: Lives with fiancé
Occupation: Lawyer
Rebecca
"I want to find info on a wedding venue easily and quickly book a tour."
Rebecca is a lawyer and lives with her fiancé. She is looking for a wedding venue to host her upcoming wedding and has been browsing venues' websites to find the right one. She prefers websites that allow the user to book a tour and that showcase details of the venue on their website.
Goals
Easy tour-booking user flow
Straightforward and easy navigation throughout entire website
Frustrations
Websites that don't have bookings for tours
Websites that have a confusing user flow
Websites that don't have enough info about their venues
User Journey Map
I then mapped the persona's journey as they normally would go from browsing a wedding venue's website through going on a tour of the venue. Mapping the journey helped identify further pain points and ideate possible solutions.
Rebecca
Mapping Talia's user journey revealed how helpful it would be for helpful for a wedding venue's website to have a short, easy user flow when booking a tour, as well as obvious access to information about the venue and straightforward navigation.
Action
Navigates through website
Finds info about venue
Books a tour
Goes on tour of venue
Task List
A. Go to website
B. Navigate through different pages within the site
A. Browse through pages on site
B. Gather info about the venue
A. Go to tour booking page
B. Enter info and pick date and time
C. Get confirmation
A. Arrive at venue
B. Go on tour
Feeling Adjective
Frustrated if the navigation is difficult or the user flow is confusing
Annoyed if there is not enough info available about the venue or it's not easy to find
Impatient if the user flow is confusing or too long
Happy when the tour is booked
Satisfied or unsatisfied depending on the choice of venue
Improvement Opportunities
Easy, obvious navigation with straightforward user flow
Make venue info a priority and obvious to find
Short, easy user flow when booking a tour
Sitemap
I then created a sitemap to organize the navigation for the website, keeping in mind the pain points I learned from my user research. I chose a website structure that is straightforward and easy to navigate.
HomepaGe
Spaces
About
Book a Tour
Space 1
Space 2
Space 3
Where to find us
Contact us
Enter info
Confirmation
Paper
Wireframes
Next I drafted variations of each screen of the website on paper, while considering the user pain points of difficult navigation and unclear user flow.
The homepage paper wireframes display a clear navigation bar and focus on displaying photos and facts about the wedding venue.
Screen Size Variations
Because users would access the website on a variety of devices, I worked on designs for additional screen sizes to make sure the site would be fully responsive.
DiGital Wireframes
When moving from paper wireframes to digital wireframes in Adobe XD, I was able to redesign in ways that would address user pain points. I prioritized easy website navigation and clear information.
Navigation bar at top for easy access to all pages
Quick facts about the venue listed on the homepage
DiGital Wireframes:
Screen size Variations
When designing mobile versions of the website, I prioritized visibility and legibility of all the elements on the pages.
low-Fidelity Prototype
The low-fidelity prototype for the desktop connected the digital wireframes in the primary user flow of the website.
Usability Study
I then conducted a usability study using the low-fidelity prototype to test the website and discover any user pain points.
Key Findings
1
Users weren't able to return home when clicking the logo in the navigation bar.
2
Users weren't able to use the dropdown menus when booking a tour.
3
Users thought an interactive map would be most useful.
Mockups
After the usability study, I created high-fidelity designs that represented the final product. I used the feedback from the usability study as an insight on how to improve the designs.
Before usability study
Made the map on the About page interactive
Made the logo direct user back to homepage and underlined current page to make navigation clearer
After usability study
Before usability study
After usability study
Made the Book a Tour page look more like a button
Added a carousel of images at the top of the homepage to make it dynamic and engaging
Before usability study
Created the drop drown menus for the Book a Tour page and changed the date selection to a pop-out calendar
After usability study
Mockups: oriGinal screen size
Mockups: Screen Size Variations
HiGh-Fidelity Prototypes
The desktop high-fidelity prototype and mobile high-fidelity prototype of the website in Adobe XD connect the improved mockups in the same user flow as the lo-fi prototype.
Desktop
Mobile
Takeaways
My users shared that both the desktop and the mobile website were easy to use and navigate and that the user flow for booking a tour was direct and easy to understand.
I learned that prioritizing the user needs will lead to the best design for the product and the smoothest user experience. Little details can make a big impact on the final product.