Responsive wireframes

This project was a website redesign of an Oregon coast resort hotel. Their previous website was loaded with antiquated SEO practices which led to repetitive pages in the site map. The objective was to simplify the content of the site, and leverage the 3rd party booking system as much as possible.

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

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

 

MY PROCESS

After I did an exhaustive competitive analysis (that incorporated non-coastal hotels as well), I worked with our Digital Manager to gather and organize analytic data to create an IA. Upon knowing what our navigation should be, I drew a series of rough sketches of possible page layouts for mobile screens. For me this is the fastest way to get started on any new project.

I used Axure to build interactive, 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.)

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.

 

Testing

The visual design portion of this project was done by another designer, but when we had a functioning dev site with enough going on I performed a mini usability test to see how we did on the design.