An interface redesign for Xplorie's new customer-facing website that clearly articulates their brand proposition.
Collaborators: Christine Yun & Ashley Hope
Software Used: Axure RP
Xplorie is a 20 year old B2B company in the travel & hospitality landscape that offers guests complimentary activities, such as parasailing, snorkeling, and ziplining, through partnerships with activity providers and property management companies. Having recently decided to make the shift to consumer-facing, they sought UX guidance to ensure that their upcoming website clearly communicates their service while also being attractive and engaging.
A Convoluted Model
How does Xplorie work? OK, here goes...
Through Xplorie’s model, when you book your vacation rental, you receive 1 free pass to every activity offered there for every day of your stay. This means that one person at a time can partake in a free activity per day.
To reiterate: One free admission...Per activity...Per day...For any 1 guest in party.
Or, put another way: Each party receives one free admission to all activities offered at their vacation rental for every day of their stay.
And while you're absorbing that, remember that: (a) The one free admission per activity per day is good only for any one guest in the party. Additional guests will be required to pay full price, and (b) admissions are non-cumulative and unused ones expire daily.
Explaining the Unexplainable
Succinctly explaining how Xplorie actually works turned out to be a difficult task – and a task the current site was failing at. Our central goal was to help users understand this essential piece of information – as quickly as possible.
The Discovery & Research
A Beautiful Mess
During the initial stakeholder meeting, we saw the new website for the first time and how Xplorie works was explained to us. After the first few rounds of site exploration, we quickly agreed that the site is beautiful and engaging. Initially distracted by attractive visuals, we struggled to figure out exactly how to improve what seemed to already be an effective website. We dug deeper, and shifted the focus to -
“Visuals aside, how can the site experience be improved?”
After dissecting the website, we realized that the information on the site did not adequately or clearly explain how Xplorie works.
The main landing page (above) features an attractive video along with sparse copy that would be extremely vague for a visitor who has no prior knowledge of Xplorie. These visitors would ideally click on “How it Works” on the top left to learn more.
When the user scrolls down on the landing page, the next click-through option is another link to the ‘How it Works’ page.
Clicking on either of these links takes the user to a page featuring this visual (below), followed by more sparse information on rentals, booking, planning activities, property & activity partners.
It isn’t until the user scrolls to the bottom of the “How it Works” page that they’re given the option to click through to an FAQ page. This link is also on the footer. I found this hierarchy to be problematic because priority should be on letting the user know Xplorie’s brand proposition as quickly as possible. In addition, the FAQ also consisted only of sparse information regarding how Xplorie works.
This deeper dive led us to hypothesize that:
Initial User Testing
To validate our hypothesis, we conducted user testing. The site was shown to dozens of people with no prior knowledge of Xplorie.
First, testers were instructed to simply explore the website. We paid attention to where their attention was drawn and what they clicked on. They were then asked to explain what their understanding of Xplorie's purpose was and for general comments.
As the quotes above indicate, the site - as it currently stands - misses the mark in clearly and concisely communicating what Xplorie's purpose is.
Sorting all of the feedback into logical groups helped us identify trends. Through affinity diagramming, we were able to solidify the problem to begin working on the solution.
According to the results of diagramming, the most frequently expressed pain point was that
brand purpose is unclear due to shortage of relevant information.
After affinity diagramming, another meeting with the stakeholders was arranged. We went to the Xplorie office, where we had the opportunity to have a more in-depth conversation with 4 other team members, including the CIO.
During this meeting, two important goals were identified by the Xplorie team:
First, to help new users quickly understand how the activities model works, and second, to help users trust that the activities are indeed free.
After synthesizing feedback and results from all of the above, I wrote a clearly-defined problem and solution statement after consulting my partners:
After identifying the problem and goals for the solution, I put together a chart based on information we gathered about competitors. We looked at what elements worked (and didn't work) on different hospitality sites to help inform the ideation phase.
Ideation & Design
Beauty is Only Skin Deep
Throughout this phase, we constantly kept our eyes on our goal of refining and redesigning the site for maximum clarity in conveying what Xplorie is.
The first stage in the ideation phase was conducting a card sort to help narrow down a concise activity and search filter list. This was prompted by several testers mentioning that the search list was unclear and illogical.
Finally, a great deal of time was spent on creating a site map, which I put together once we agreed on the best possible structure. Due to the convoluted brand message, we felt that the site's organization was imperative. We strove for clarity and a structure that made logical sense based on feedback received during launch site user testing.
Below are some of my sketches. Sketching is one of the most crucial steps for me as it helps me to see all of my ideas side-by-side on paper. Breaking things down through sketching also helps me visualize what works and what doesn't.
Main Search Bar NavigationIn response to being told by Xplorie that the number of bookings is not a success metric and that they want visitors to explore the site (instead of feeling compelled to book immediately), I suggested moving the explore and book feature to the top left. The option to explore bookings, which appears as a drop-down, becomes available only after the visitor is ready and opts to. Also, the user has the option to toggle between searching based on location or activity; the goal of this is to remind users that Xplorie is a company centered around vacation activities.
"The ability to toggle between location and activities wasn't immediately noticeable to me based on the layout."
"I didn't notice the 'search by activities' tab at all. I still felt compelled to search by location because that's what I saw first."
'How Xplorie Works' Section
Based on feedback received during initial testing, we all agreed that a section on the homepage that clearly explains how Xplorie works was a necessity.
A clearly visible collapsible section that illustrates how Xplorie works gives new users the option to learn about Xplorie after first seeing the attractive hero video that’s front and center.
The goal was to explain how Xplorie works clearly in as few words as possible. We created an example scenario and used visuals to supplement our explanation.
“I like that the ‘How Xplorie Works’ explanation is presented as an option. As a repeat visitor, I would find it redundant to have to see this information every subsequent time.”
“I still find myself asking questions on how Xplorie works. Maybe changing the verbiage would help with clarity.”
Search Results Page
I was convinced that having icons of all activities available at a property appear in search results would be helpful to the user, but also remind them of what the crux of Xplorie is - a company centered on providing complimentary activities. In addition, we sought to keep the user in mind by adding a panel for quick and easy search modification and access to more information on properties.
“I really like the panel on the side. I like that I would be able to tweak the features as I’m browsing the results.”
“I wasn’t able to see the crucial information (destination, arrival, departure, and number of guests). I would want that information clearly visible at all times.”
Users tested our first iterations on our laptops and through a paper prototype, which consisted of the "How Xplorie Works" section as well as the search and property details pages.
Iteration After Iteration
Based on all the feedback received during lo-fi prototype testing, the following changes were made when it came time to create high-fidelity mockups.
Main Search Bar Navigation
'How Xplorie Works' Section
Search Results Page
- A home page that takes the focus off booking right away and encourages site exploration by moving the booking bar to the top left and turning it into a drop-down.
-When customers are ready to begin the booking process, the drop-down first reveals a tab to search by activity. The goal of this is to remind them that Xplorie is a company centered on travel activities.
-Because of its convoluted message, ample opportunities to learn how Xplorie works were included: a visible link on header and a collapsible section on the center of the homepage, which also includes a visible FAQ link.
-A cleaned up search results page that makes booking straightforward, and again, emphasizes the activities.