Madonna Inn

 Madonna Inn is a quirky, eclectic, destination resort of sorts known for their garish, individually themed rooms and main dining hall that drips gold foil on fake flowers and floral carpet. My best friend and I were on their site booking a weekend getaway. We scoured the site to find available rooms, but we found it incredibly difficult to use the booking module to do so—and with that, this project was born.

Date: Summer 2020
Client: Personal Project
Role: UX/UI Designer and Art Director

Problem Statement—

Project Goals—

MadonnaInn_Mocks_Reference

Updated logo and homepage for reference.

Research

Approach—

User Research
User Flow Charts 
Empathy Maps
Information Architecture 
Paper Wireframing
Digital Prototypes in Invision

During this stage, I pinpointed three different user types based on my personal site interactions with Madonna Inn and understanding their general audience. The first, a user who wants to book a specific room and is flexible with dates. The second, a user who is interested in a few  rooms, but has more specific dates in mind. And the third, a user who doesn't care which room is available, but has hard dates. My research lead me to believe that the site right now is only working for the third type of user, but for the first two using the site lead to frustration, confusion and anger. 

User flow diagrams made with Whimsical were integral to determining the painpoints that needed to be addressed in the design solution. I combined the user experience map's emotion element into these charts to better illustrate those points.

This is the updated user flow diagram for all three types of users to accomplish their goals. The other side is a failed attempt. Trying to make the module less repetitive in most regards proved to make the flow more complicated and make less sense. After I ditched the idea, I retraced my steps and completed some sketches of how the site operates presently. This gave me more insight as to how I could make smaller, more manageable adjustments to improve every user's flow.

My first time entering the Madonna Inn website was overwhelming. They had everything incredibly detailed on their site, but it is was cluttered. When I went to book a room, I couldn't find where to book immediately, which was an automatic a red flag. Businesses should not have the path to satisfying customers' needs—and by proxy, making money—hindered in any way! I kept the same information on the site, but rethought and reorganized the header, tabs and individual pages. 

Madonna_Inn_Documents_0000s_0008_9

Paper wireframe sketches of the header, homepage and booking module. These sketches established content organization and hierarchy which drove the user flow.

Screen-Shot-2020-08-27-at-7.35.31-PM

These are digital prototypes made in Invision. By visualizing the decided content hierarchy, I was able to make tweaks to copy placement and imagery to assist in optimizing a flow that worked for every user.

There were a few situations that arose involving the need to compromise my initial goal to reduce repetition. For the booking module (top row), I chose keep the left column the same with the information repeating back to the user under the input boxes once it had calculated. It wouldn't necessarily affect the outcome of the user's journey and I wanted to work within the general constraints of the presumed back-end capabilities. These decisions would be better supported with stage-by-stage user testing.

Solution

Personal Constraints—

→ Generally speaking, site content can be edited down and rearranged, but not outright deleted. 

→ Keep booking module on separate platform. Do not integrate into main Madonna Inn site. 

→ Rooms stay visible even when they are not available. I designed additions to the booking capabilities that could alleviate this initial painpoint and keep within the pre-existing back-end structure.

 

Branding refresh: Exaggerated the letterforms of the logotype to make it more funky-country-grandeur, in-line with the new direction of the voice and site as a whole. Kept the magentas and pinks in the origianl color palette, but added secondary colors that added interest and more character. The new body font had a softness that contrasted the "MADONNA INN", adding some needed craftsman back into the branding.

MadonnaInn_Mocks2

Updated homepage highlights second-level priority pages such as the bakery, spa and things to do. They don't hold the same priority as the header tab content, but the gallery gives them a showcase. "Love Letters..." was originally only found in the footer, but I chose to bring it up to the homepage, because it was a cute way to show customer experiences, which is important to Madonna Inn. 

MadonnaInn_Mocks4

Updated header and footer.

MadonnaInn_Mocks3

Updated "Hotel" page. Keeping information in less tabs allows for users who have different needs to quickly find what they're looking for and not be inundated with cluttered information that isn't relevant to their goal. This page serves as a template for the "Dining", "Things To-Do", etc.

MadonnaInn_Mocks6

These screens mark the user flow to book a specific room from the website via the "Hotel" page. The pages title organization is the same (All Guestrooms & Suites > All Luxury Suites > Individual Luxury Suites), but I reworked the galleries to allow for more movement between all options. For example, on the top screen, I alloted three carousels per row (on desktop version). Each carousel gave snapshots of the room options so users had the option to either click on the room they liked from that gallery, which takes them to the the expanded room on "Luxury Suites", or they could click the room category to see all options at once. 

MadonnaInn_Mocks1

Booking module flow screens. I kept a similar structure to the existing module, but I made it more user-friendly by changing the icons, reconfiguring the scale, and optimizing the lightbox. I also integrated the new branding into this platform. 

MadonnaInn_Mocks5

Close-up of the biggest change to the booking module: the addition of a calendar. Keeping in-line with the site capabilities and the user flow analysis that I conducted, it was important to have a calendar, but not allow users to be able to book from the calendar. It isn't perfect, but by allowing users to see when each room is available through the info icon on each individual room option, users can easily take that information and input it into the "See Available Rooms" section. From there, users are able to book the desired room for its availible nights. This flow eliminates circling back or contacting the conceirge. 

Further Considerations—