Booth Lake Landing Resort

UX/UI Design

Overview

I was hired by Sitecast to help redesign the Booth Lake Landing Resort website. The original site, though perhaps modern in its day, was incredibly dated and in need of a makeover, both from a user interface and user experience perspective. Booth Lake is located in the Northwoods of Wisconsin, a beautiful scenic area where people come to escape the city and reconnect with nature. It was crucial for the owner of Booth Lake Landing that the site reflect what she referred to as the “Northwoods aesthetic”, allowing visitors to get a sense of the region as they explored the site to help them get a glimpse of the area’s beauty before even stepping foot onto the resort.

Problem

First and foremost, the website needed a visual facelift to bring it into the 21st century. My project managers at Sitecast wanted as much photography of the region incorporated into the site to maintain that “Northwoods aesthetic.” They wanted the visual design to have an app-like quality to it, which they believed would help modernize its look and feel. In addition to a UI overhaul, there was a need to build out a more straight-forward UX for the site’s cabin reservation process without relying on an online booking tool (the resort’s owner still wanted to manage reservations via email).

Solution

The resulting site accomplishes everything I set out to do. I brought a sense of the Northwoods into the site by incorporating photos of the region into the backgrounds of every page while relying on a transparent layering effect to modernize the site’s design. I reimagined the contact and cabin booking process to help establish a straightforward user flow, making it easy for visitors to request a cabin reservation.

Role

  • Lead UX/UI Designer

Technologies Used

  • Sketch
Desktop and mobile view of Booth Lake Landing Resorts' landing page

Research

For this project I relied on my project managers at Sitecast to serve as my primary source of information for the design direction of the project. This meant the research I was required to do was quite minimal. They were the point of contact for the resort’s owner and had collected all relevant information and requirements for the redesign from them.

User Stories

As a user on the Nav Bar I want to see a…

As a user on the Footer I want to see…

As a user on the Landing page I want to see a…

As a user on the Cabins page I want to see a…

As a user on each Cabin Overview page I want to see a…

As a user on the Bookings/Contact page I want to see a…

As a user on the Activities page I want to see a…

As a user on each Activity Overview page I want to see a…

As a user on the Photos page I want to see a…

As a user on each Individual Photo page I want to see a…

Website Goal

The goal of Booth Lake Landing’s website is to provide users an overview of the resort allowing them to view available accommodations, activities they can participate in, photos of the resort, and first and foremost, generate bookings for the resort owners.

Website Breakdown

Sitemap

Sitemap for Booth Lake Landing Resort site

Wireframes

Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort
Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort Wireframe for Booth Lake Landing Resort

UX

The primary area where the UX of Booth Lake Landing Resorts’ site needed an update was the cabin reservation process. The resort previously relied on an embedded spreadsheet indicating cabin availability and a contact form through which interested visitors would email to inquire about making a reservation. This required users to visit at minimum three separate pages: a cabin’s information page — to determine which cabin to reserve; the cabin availability page — to see whether the cabin was available to reserve; and finally the contact page — to email Booth Lake to make a reservation request. With so many steps, pages to visit, and required information to keep in mind throughout the process, the success rate of visitors actually following through and making a reservation was much lower than it could be.

In order to improve this process, I majorly reworked the UX for both the Bookings and each cabin’s Overview pages. On the Bookings page, I created a step-by-step process to walk users through reserving a cabin. Step one asks the user to select which cabin they’re interested in via a dropdown menu. Once selected, that cabin’s availability calendar and pricing information pops up with a second step requesting they select which dates they wish to visit. Step three is where users enter their contact information so Booth Lake Landing can connect back with them via email, collect their payment information, and finalize their booking.

To work in concert with the Bookings page, I consolidated all cabin information onto each cabin’s Overview page. This allows users to see all the relevant details about each cabin — photos, a description, and pricing information — as well as that cabin’s availability calendar, all from the same screen. Because the resort relies on the above-mentioned Bookings page to field reservation requests, I included a button linking to it from each cabin’s Overview page. Once the user clicks that button and navigates to the Bookings page, the cabin they were previously viewing is automatically selected from the dropdown menu and they can continue following the steps to complete their booking request.

UI

In coming up with the user interface for Booth Lake Landing Resort’s website, there were a couple elements I was asked to incorporate. I needed to maintain the “Northwoods aesthetic” from the prior site, include as much photography from the region as possible, and utilize an app-like design style. To my PMs at Sitecast, this meant using modern fonts, playing with layers and transparency, as well as bringing in design elements often used in mobile apps like modals and forward and back buttons on pages, allowing users to navigate within the site (such as between individual cabin or activity overviews) without the need to use their browser’s back buttons.

I decided upon a blue/turquoise color as the primary color for the site to evoke the concept of water seeing as the resort is built upon a lake. In order to bring in as much regional photography as possible and showcase Wisconsin’s Northwoods, I utilized photos with dark and light overlays for the majority of the backgrounds on each page, sometimes using multiple images to break up pages with clearly delineated sections. I played with transparency of site elements to allow the photography to show through as much as possible.

#3D4344

Grey color swatch

#F8FAFA

Light color swatch

#1793C3

Blue grey color swatch

#2B9EB6/
#1793C3

Turquoise gradient color swatch

Montserrat (Regular)

1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

MONTSERRAT (BOLD)

1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Landing Page

Mockup of the Landing Page of Booth Lake Landing Resort

Cabins Page

Mockup of the Cabins Page of Booth Lake Landing Resort

Cabin Overview

Mockup of a Cabin Overview Page of Booth Lake Landing Resort

Booking/Contact Page

Mockup of the Booking/Contact Page of Booth Lake Landing Resort

Activities Page

Mockup of the Activities Page of Booth Lake Landing Resort

Activity Overview

Mockup of an Activity Overview Page of Booth Lake Landing Resort

Photos Page

Mockup of the Photos Page of Booth Lake Landing Resort

Photos Overview

Mockup of a Photo Overview Page of Booth Lake Landing Resort