Responsive Website Redesign
Role: End-to-end UX / UI Designer
OVERVIEW
For this project, I worked with Marco Island Vacation Properties, a Florida-based small business in the property-rental space, to redesign the core aspects of their website for improved functionality and visual appeal.
Background:
Marco Island Vacation Properties (MIVP) is a small, family-owned, vacation-rentals business operating out of Marco Island, Florida. They manage over 250 vacation properties, from beachfront houses to condos and high-rise apartment units, all of which are rented out by property owners for long stretches, à la AirBnB. While their properties are listed on multiple platforms for wider reach, they’ve recently ramped up their social media and other digital advertising in a bid to drive more traffic to (and receive more bookings via) their home website.
Problem:
MIVP's website is functional, but it looks outdated, is clunky to use, and fails to inspire the trust neccessary to make it appealing enough to users to compete with industry giants like AirBnB or Vrbo.
Solution:
Re-design the site from the ground up, crafting a product that inspires trust, feels intuitive to use, and provides a best-in-class experience for booking and planning the perfect getaway.
Competitor Analysis:
RESEARCH
Research for this project consisted of Competitor Analysis and Contextual Interviews.
I conducted research on three of MIVP’s competitors in the property rental space: AirBnB, Vrbo, and Clausen Properties Rentals (CPR) – another small business operating in the Marco Island area with similar resources. Because MIVP’s website and offerings proved to be the same or better than those of CPR, I focused on comparing MIVP and the other two in four main categories:
Search functionality:
Vrbo and AirBnB included the most important / popular categories in a dedicated bar, with a more granular amenities list appearing under a filters button, organized by popularity. MIVP organized its most important categories in separate pages that are buried in dropdown menus on the home page. Their amenity list, while long, was disorganized and confusing to use.
"Things to Do":
AirBnB does not include a list of "things-to-do" for individual properties. Some information can be found in a Host Guidebook, but only if the host creates one. On Vrbo, each listing has a map / “Location” section which includes a short list of local attractions, transportation hotspots, parks, etc. Because all MIVP properties are in the same location, their website has a dedicated page with a range of popular categories (restaurants, family activities, water activities, etc.) though the page itself does not include relevant information beyond website links or contact info.
Price Transparency:
AirBnb displays the base nightly rate for each property, though users will have to locate and click a toggle to display full-prices (which include extra fees for cleaning etc.). Vrbo displays all listings with their base-rates as well as cleaning and service fees by default. Due to high seasonal variance, MIVP does not give price indications until dates have been input. Expense totals are visible on individual property pages. Generally speaking, prices are lower on MIVP's site due to their direct booking model.
Customer Service:
AirBnB and Vrbo, being large companies with countless properties are limited in the customer service and attention they can provide. Bookers and hosts can file complaints, but the size of these companies and the emphasized role of hosts makes it difficult to address complaints in a timely manner. Small and locally focused, MIVP has the bandwidth to offer perks like 24/7 concierge services, on-site maintenance, personal shopping, and even event-planning assistance.
Contextual Interviews:
I interviewed five subjects with recent experience booking rental properties. Their booking experiences varied in terms of party-size, length of stay, and the presence of children or pets, covering a range of use-cases for the MIVP redesign.
My goals for these interviews were:
-
Determine the common pain-points of booking a rental property online
-
Understand what makes a property-rental site feel trustworthy to users
-
Learn which categories or filters are most important when searching for a property
-
Learn what information / functionality creates the most user-friendly experience
Each interview began with standard research questions crafted to address my research goals based on users previous booking experiences. Afterwards, I walked each user through a brief, remotely-monitored test of the current MIVP website. Tasks included:
-
Narrowing down a search to one or two “contenders” (with predetermined search criteria)
-
Deciding between two properties, based on the information on their individual pages
-
Picking a local group activity or outing, based on MIVP’s “Island Information” page
These interviews yielded several key insights about both rental booking and the MIVP site in particular:
Transparency Regarding "The Basics":
Number of beds / sleeping capacity and price were two major factors in making or breaking a property choice. When doing an initial search with flexible dates in mind, price opaqueness was frustrating. Similarly, while MIVP offers a filter for number of beds, there’s no easy way to determine how many of each type of bed there are, which would be frustrating for bookers who have children, couples, or elderly relatives who need specific bed sizes.
Property search filters modal, showing separate sliders for beds and occupancy followed by alphabetical amenities list. Note that the bedrooms slider is stuck on 4+, bed sizes do not indicate number of each, no price-filtering option, and listing "first aid kit" inspires more suspicion than trust.
Property Categories:
Subjects’ most important criteria for narrowing down to an ideal property were location (beachfront vs inland), as well as features like pools and hot-tubs, kitchens, and large common spaces, all of which make the property more livable and fun for a large group or a group travelling with small children. None of the subjects noticed or made use of the nav-menu dropdowns when looking for properties in those categories, instead they relied on filters which they found confusiongly organized.
Dropdown menu leading to individual, disconnected search pages for each popular property category
Familiarity & Trust:
At the end, when asked if they would use MIVP to book a stay in Marco Island, most subjects were hesistant, citing the outdated interface, clunky interactions, and large blocks of “salesy” language as factors that contributed to a mistrust of MIVP’s website and a preference for AirBnB or Vrbo. Subjects reported that extra services (24/7 concierge, maintenance, etc.) would have improved trust, but were unaware MIVP offered them.
Home page text, awkwardly displayed, and unappealing for users to read.
Host Interaction:
Everyone had stories about times they felt at the mercy of a host, either up-charging or misleading them about a property. Filing complaints or appealing to a huge company like AirBnB felt like more hassle than it was worth. Subjects contrasted this situation with hotel stays, where concierge and maintenance services are always on hand to address any issues.
Reviews as a Deciding Factor:
When choosing between a few contenders, subjects often consulted the reviews section to make a final decision. However, when reviews feel “canned” or there are too few of them, it creates suspicion in the absence of a verified tag or other guarantee.
Local Attractions:
Most subjects subjects preferred to get recommendations from locals or friends if possible. However, when staying in an unfamiliar area, most subjects resorted to google or websites like Thrillist to find local restaurants / activities. Subjects agreed MIVP’s small, local focus gave their recommendations more weight, but were frustrated by the fact that the listed recommendations showed only contact info, forcing users to do independent research to make a decision.
Fishing venues list (no prices, distance, or other info)
Working from these findings, I developed three HMW questions to guide the website redesign:
HMW: improve the structure of searches, filters, or listing order to ensure the user is able to quickly isolate the most relevant properties for their stay?
HMW: re-organize the website’s content to more convincingly communicate MIVP’s unique value propositions to potential customers?
HMW: restructure the local businesses / "things to do” entries to ensure that information is presented consistently and with attention to user-relevance?
DESIGN
Because the MIVP website technically had most if not all of the core features it needed to function, I placed an emphasis on streamlining and revamping the existing elements of the site to be consistent with those of industry leaders. I focused my design efforts on improving three key flows that a user would encounter in the course of booking a stay with MIVP:
.png)
Searching for Properties in a Popular Category
In this flow, the user wants to book a property, preferrably a house, and is somewhat flexible on a number of other factors (dates, price, misc. amenities). The user can either select “House” from the popular categories modals on the home page, or fill out info for a property search and then select “House” on the listing search page, under “Popular”. Either method filters down results to houses only. From there, they can narrow their search results in two ways:
-
Sorting properties by relevant factors like price, best reviews, or most reviews
-
Applying filters via the streamlined filter menu
.png)
In the filters menu, the most important / popular amenities are pinned to the top, followed by high-priority basics like bedrooms and price, and complete with a longer list of amenities divided into categories (property type, house rules) to help refine their search results. In this case, the user decided to add "pool" and one "dog-friendly" filters to their search.
Listings on this page have greater price transparency, regardless of whether the user has included travel dates yet. If dates are input, the nightly rate is displayed as normal. However, if no dates are entered, properties will display an average nightly rate to help users make informed decisions prior to setting firm dates. Users can “favorite” properties to more easily compare them later on.
Medium fidelity wireframes (mobile & desktop)
Comparing Individual Property Pages
In this flow, having narrowed their search to two contenders, the user can review information from the individual property page to make a decision. Below the photo gallery, this page is divided into three sections, each of which can be jumped to via clicking a tab at the top:
Overview:
Basic information (reviews, beds, baths) is pinned to the top, followed by a truncated amenities list (organized by popularity / relevance) which can be expanded for more detail. The property location is pinned on a map widget, commute distance to important places like parks, museums, and the airport is listed below. The section ends with users' trip information, a detailed price breakdown, showing them how the price would change if they changed their dates, and a button for booking the property.
Details:
This section further breaks-down property specifications, cataloging the number and size of all beds and bathrooms, types of rooms in the house, and house rules (if any). Users can also read a brief description of the property to better understand the space or the property owners who are renting it out.
Reviews:
All reviews for this property are listed, in chronological order below an average figure. A disclaimer at the top explains their order and includes a verified-reviewer guarantee (the same that Vrbo provides).
After reviewing the specifics for both properties, the user can make an informed decision between the two.
.png)
Medium fidelity wireframe (mobile)
Finding an Activity or Local Attraction
From the home page, users click the menu or nav bar item “Things to Do” and select from a dropdown menu between categories like Restaurants, Shopping, Water Activities and Family Activities. Clicking on any of these opens up a dedicated page with more specific categories to choose from (in this case, “Family Activities” leads to a “Zoos and Museums” page).
.png)
Medium fidelity wireframes (mobile & desktop)
Clicking one of these categories opens up a final page with a list of venues, each of which displays a google-listings-inspired modal showing relevant details like address, hours, price, and reviews. Websites, addresses, and contact information are hyperlinked to help users quickly access the resources they need to compare and ultimately choose a venue.
TESTING
I prototyped these flows and conducted four remote-monitored usability tests with my original subjects. Each subject had performed similar tasks using the existing MIVP website during their interviews, so they could easily compare my design to the original.
For each flow, subjects were given a list of criteria for their stay, including price range, dates, party size, preferred amenities and preferred type of activity.
Subjects responded positively to my prototype, reporting that its similarity to more familiar platforms like AirBnB or Vrbo made it more intuitive to use vs the existing MIVP website. In particular, they felt that the revised filter structure and the revamped activities / venues modals each made completing these tasks more efficient.
Even so, there were several issues that came up during these tests:
-
Confusion between nightly rates vs total price on property cards
-
Intent to use "Favorites" page and lack of “share” option for properties
-
Expectation of being able to sort reviews in “Individual Property” page
-
Lack of visibility for “Things to Do” link(s)
REVISIONS & IMPLEMENTATION
Nightly Rate vs. Total Price:
In my prototype, when a user views listings without inputting travel dates, the property cards display an estimated nightly rate (e.g. “$224 avg. per night”). Once dates have been input and seasonal pricing gets factored in, the display changes, showing an updated cost figure with no “per night” label, confusing some users who assumed this was a figure for the total cost of the stay. I considered changing the dates-locked-in price to a total figure, but realized that was not in keeping with the standard practice of hotels and other booking sites, so I instead edited the dates-selected label to read “$224 per night” for the sake of clarity. I also built-out the price-breakdown in the individual property page to improve transparency.
Left to right: Search page without dates (property card shows average nightly rate), Search page with dates (card shows updated nightly rate), Price breakdown for proposed stay
Favorites Page & Sharing:
Subjects had the option to "favorite" properties once they had narrowed their search. Several mentioned that in real life they would often revisit their favorites frequently over several days, and often share listings to get opinions or keep their party informed before confirming. To accommodate these preferences, I included a dedicated favorites icon alongside the menu allowing users to access these properties with just a click. I also included a “share” button next to the “favorite” button in the Individual Property page, so users can easily consult with other travelers about a given property.
Left to right: My Favorites menu item, My Favorites page, Individual Property page with "Share" button added
Visibility of “Things to Do”:
In the “finding activities” part of the test, most subjects needed to be directed to the menu to find the dropdowns associated with local activities. I included activity types in modals similar to the "popular categories" on the home page to give them greater exposure..
Desktop and mobile home page with"Explore Marco Island" activity modals
Sorting Reviews:
While testing the Individual Property page, some subjects mentioned they preferred to look at negative reviews first since they’re “more honest” about potential issues. To that end, I included an option to sort reviews by recent, low-to-high, or high-to-low, so users can make more informed decisions.
Two review sorting options, as viewed within individual property pages. Left: sorting low-to-high shows the reason for poor reviews (construction noises) which have since been addressed. Right: Negative reviews pertained to pool remodeling, but most recent reviews show remodel was successful.
LEARNINGS & OPPORTUNITIES
This project reinforced to me the importance of familiarity in crafting an intuitive user experience. For better or worse, the biggest names in the property rental industry have created standards by which competitors’ websites and mobile apps are judged, and in order to present my subjects with a design that felt “right”, it had to closely follow the visual and experiential model of AirBnB and Vrbo, rather than trying to reinvent the wheel.
That being said, there were several instances in which the design formula had to change to accommodate MIVP’s unique position and value propositions: for example, making local recommendations much more visible, curating popular categories that best suited the properties on Marco Island, and creating a home page that “sold” MIVP’s unique offerings and advantages over its big-name competition.
Value proposition section of desktop home page
From my discussions with MIVP representatives after completing this stage of the redesign, I learned that a number of their properties have set minimum-stay requirements. In future iterations, I will need to figure out the best way to include those minimums in the search page (perhaps with a dedicated filter setting) and / or within the individual property pages.
In addition to this, satisfied with the overall appearance and structure of the website, I intend to implement more search and filter options, such as “off-season” or “price drop” to help users find great deals and feel more empowered in their search for the perfect vacation.