Hotel Website Responsive Wireframes

This project was a website redesign of an Oregon coast resort hotel. Their previous website was loaded with antiquated keyword stuffing, and there were a lot of unnecessary and repetitive pages in the site map.

 
My sketch notebook which shows some very rough sketches of mobile views.

My sketch notebook which shows some very rough sketches of mobile views.

 

Challenges

My task was to create a responsive set of wireframes based on our objective to slim down the site dramatically. We wanted to allow the 3rd party online reservation system do the heavy lifting, reducing page count. Roughly 60% of the existing pages would be either redirected to parental landing pages, or sent to the reservation system which held the most current information on available accommodations. The result would be a slimmer, faster experience that would more clearly direct users to book an online reservation.

MY PROCESS

I worked with our Digital Manager to gather and organize analytic data to create an IA, and then did a lot of discovery work on the resort's biggest competitors. Next I drew a very quick, rough series of sketches. For me this is the fastest way to get started on any new project. Then, I dug into Axure to build clickable, responsive wireframes to get buy-in from the resort before heading into the visual design phase. (For this example, you'll see just three page templates created in Axure. Links to each page template are noted by the blue links.)

Here is a live version of the Axure file

 
Two Axure wireframes, one is the mobile view, the other is a desktop view.

Two Axure wireframes, one is the mobile view, the other is a desktop view.

 

TL;DR - What I’ve Done

  • Discovery and data collection

  • IA/Sitemap

  • Sketches

  • Axure wireframing