TK Site Rebuild: Unit Pages & Calendar

Unit pages were another one of the most complicated parts of the TK site rebuild. A crucial step in the reservation funnel, unit pages are where most users ultimately make their decision whether or not to book with TurnKey.

The unit page was also one of the most complex when it came from both a data perspective and the user interface. The page required a hefty amount of data from the back end: unit images, attributes/requirements, description, amenities list, reviews, and map location. Working closely with design, we needed to find ways to organize and display all of this information in an intuitive UI.

There’s plenty to say about any one of the components here, but I want to focus on our biggest improvement in the rebuild, the calendar UI. The calendar is used to see when a home is available for a stay and to pick the dates for your stay to complete a reservation.

Old Calendar UX Issues

The original TK unit page calendar used a binary color scheme to code days as available (teal) or unavailable (grey):

Above, it appears that June 11 is available to stay. So I click:

Now, however, I see that there’s apparently availability on the 12th and 13th, when they weren’t teal before? Note that this is a new interaction: I had to click “Check-out” to open a new calendar window. I click the 13th:

But now my stay has changed to 6/11 - 7/4? This is a UI issue compounded by a bug: the 6/11-13 stay wasn’t actually possible despite what the UI told me, and then the dates API hit a bug and jumped ahead to the next available date, 7/4, Of course, this stay is impossible, but apparently I won’t learn that until I click “Book Now” (also a redundant click to see a price quote for my stay):

There are a few problems going on here, but the biggest is this: calendar dates aren’t binary, “available” or “unavailable”, but our UI coded them that way. Instead, calendar dates are complicated by a number of overlapping rules, including:

• Minimum stays: TK enforced a standard 2-day minimum, but an individual unit may have more

• Day-of-week rules: due largely to the preservation of weekend blocks, you may not be able to start or end a stay on a specific day of the week (say, end on a Saturday, when we know that users in that market are searching for a whole weekend which we can rent at a higher rate)

As a result of those rules, we needed to convey three types of days in our initial calendar view:

1. Dates that were available to start a stay

2. Middle/end dates that were available, but couldn’t be a start date

3. Dates that were completely unavailable/booked

Redesigned Calendar UI

In our new initial calendar view, “active” start dates would be colored teal, “inactive” available middle/end dates in black, and unavailable dates in grey, crossed out with a grey fill (a grey fill diagonal indicating that the home is not available in that morning or afternoon before check-in/out):

Above, I can see that August 8-11 are all dates where I can start a stay, while the 12th-13th are available but not for a start (due to min stay rules).

I select 8/8:

Now you see that 8/9, while available, has gone inactive, since it’s under the minimum stay. As I hover my cursor over available dates, a teal fill indicates my selection:

I end my stay on the 13th. With my end date selected, the calendar closes and a quote is instantly returned: