WeddinG Venue Website
I designed a desktop website and mobile website for a fictional San Franciscan 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.
Rebecca
Rebecca is a future bride who needs a smooth and convenient way to browse a wedding venue's website and book a tour of the venue because it will make the preparation of her wedding easier.
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 Rebecca's user journey revealed how it would be 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.
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.
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.
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.