Responsive Website Redesign
Role: End-to-end UX / UI Designer
OVERVIEW
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 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:
A ground up redesign crafting a site that inspires trust, feels intuitive to use, and provides a best-in-class experience for booking and planning the perfect getaway.
Filters, favorites, and reviews -- hi-fidelity prototype
RESEARCH
Research for this project consisted of competitor analysis and contextual interviews.
I conducted research on MIVP’s big-name competitors in the property rental space: AirBnB, and Vrbo, comparing them in four main categories:
Search functionality
Competitor Analysis
AirBnB and Vrbo:
-
Most important / popular categories appear in dedicated bar
-
Full amenities list appears under filters, organized by popularity.
MIVP:
-
Main categories siloed in separate pages in dropdown menus
-
Amenities list is long, disorganized and confusing to use
"Things to Do" / Local Attractions
AirBnB:
-
No local attractions listed, unless in host-created "guide"
Vrbo:
-
Listings have maps with short list of attractions, transport options and other hotspots​
MIVP:​
-
Listings are bare-bones, missing relevant information or backlinks to the given businesses / locations
Price Transparency
AirBnB:
-
Displays properties' nightly rate, need toggle to show fee-inclusive full price
Vrbo:
-
Displays all listings' base-rates and fees by default ​
MIVP:
-
Due to seasonal variance, does not display prices until dates have been input.
-
Expense totals visible on individual property pages.
-
Prices often lower than AirBnB / Vrbo (direct-booking model)
Customer Service
AirBnB and Vrbo​
-
Somewhat limited customer service and attention due to size
-
Host intermediary complicates complaints process and causes inconsistency in consumer experience​
MIVP:
-
Small, local focus allows greater individual customer attention
-
Offers perks including 24/7 concierge services, on-site maintenance, plus shopping and event-planning assistance
Contextual Interviews:
I interviewed five subjects with recent experience booking rental properties, ages 28-38. 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.
Interview goals:
-
Determine common pain-points of booking a rental
-
Understand what inspires user trust in a property-rental site
-
Learn which categories or filters are most important to users
-
Learn what information / features users expect when booking
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:
-
Narrow down a search (based on predetermined criteria))
-
Decide between two properties, based on individual page info
-
Pick a local group activity from the “Island Information” page
Takeaways & Areas for Improvement
Transparency Regarding "The Basics":
-
Number of beds / sleeping capacity and price are major factors in choosing property
-
Pre-date-selection price opaqueness was frustrating
-
Unable to check number of mattresses in each size, so hard to plan for certain groups (children, couples, elderly)
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:
-
Several key categories and amenities (beachfront, pool, large common space) are first on users minds
-
Subjects failed to notice or use of the nav-menu dropdowns when looking for properties in those categories
-
Disorganized filter menu made finding these categories difficult
Dropdown menu leading to individual, disconnected search pages for each popular property category
Familiarity & Trust:
-
Subjects mistrustful of site due to outdated interface, clunky interactions, and large blocks of “salesy” language
-
Subjects found extra services (24/7 concierge, maintenance, etc.) appealing but were unaware MIVP offered them
Home page text, awkwardly displayed, and unappealing for users to read.
Host Interaction:
-
Common past experiences dealing with unhelpful hosts, or inoperable amenities (pool closed, hot-tub broken)
-
Complaint filing feels like too much hassle with huge company
-
Concierge and maintenance services viewed as a plus
Reviews as a Deciding Factor:
-
Subjects consulted property reviews to make a final decision
-
"Canned" reviews or absence of "verified" tags cause suspicion
Local Attractions:
-
Subjects prefer local recommendations when possible
-
Absent that, subjects resort to Google or websites like Thrillist
-
MIVP's barebones recommendation lists force 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:
How might we improve search flow to ensure users find the most relevant properties for their stay?​​
How might we reorganize site content to more convincingly communicate MIVP’s unique value propositions?
How might we restructure "things to do” entries to ensure the information is relevant to the user?
DESIGN
I placed an emphasis on streamlining and revamping the existing elements of the site to be consistent with those of industry leaders. Design efforts were focused on improving three key flows most users would encounter in the course of booking or planning a stay.
.png)
Searching for Properties in a Popular Category
​In this flow, the user wants to book a property, preferrably a house, and is flexible on dates, price, and 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” from the filters menu.
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
After narrowing a 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) pinned to the top
-
Truncated amenities list by popularity / relevance (can be expanded)
-
Map widget shows property location and commute times to important places (parks, museums, airports, etc.)
-
Trip information includes "book now" button and detailed price breakdown showing how the price would change with different dates
Details:
-
Further breaks-down property specifications
-
Number and size of all beds and bathrooms
-
Types of rooms in the house (kitchen, office, etc.)
-
House rules (dog-friendly, non-smoking, etc.)
-
Brief property description to better know the space and those renting it out
Reviews:
-
Average score (out of 5)
-
Reviews listed in chronological order
-
Disclaimer explains their order and includes a verified-reviewer guarantee (same that Vrbo provides)
After reviewing the specifics for both properties, the user can make an informed decision between the two.
.png)
.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).
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 & ITERATION
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' response to the prototype were positive overall:​
-
Similarity to more familiar platforms like AirBnB or Vrbo made it more intuitive to use vs the existing MIVP website
-
Revised filter structure increased confidence in search results
-
Links, hours, and other info made activity / venue modals more efficient to use and compare
Even so, several issues came up during these tests:
-
Confusing nightly rates vs total price on property cards
-
Expecting "Favorites" page and “share” option for properties
-
Expecting ability to sort reviews in “Individual Property” page
-
Lack of visibility for “Things to Do” link(s)
Revisions & Implementation
1. 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. To stay consistent with industry practices, I 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
2. Favorites Page & Sharing:
Subjects mentioned they usually revisit their "favorites" frequently over several days and share listings with their party to get opinions 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
3. Visibility of “Things to Do”:
In testing most subjects needed to be directed to the relevant dropdown menu to find the "activities" page. To give these activities better exposure, I included activity types in modals similar to the "popular categories" on the home page.
Desktop and mobile home page with"Explore Marco Island" activity modals
4. Sorting Reviews:
While testing the individual property page, subjects mentioned they preferred to look at negative reviews first since they’re “more honest” about potential issues. To that end, I included several review sorting options (recent, low-to-high, or high-to-low) so users can approach this information in a way that suits their preferences.
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.
REFLECTION & NEXT STEPS
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. 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 value propositions: for example, giving activity recommendations greater visibility to reflect the staff's local knowledge, 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 without overwhelming the user through in-your-face, "salesy" text.
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.