Website Design & Development

Benbow Historic Inn

Project Brief

Design Challenge
How can Benbow Historic Inns’s website be redesigned to reflect new renovations?

Project Description
The Benbow Historic Inn located in Garberville, Northern California, was undergoing renovations to their property. New suites were created, each themed after one of the original Benbow family members. The resort needed an updated design to reflect the new changes, and to address lacking website content. I designed and developed the original WordPress theme; re-mapped and curated the website content; and, implemented new features which would optimize website functionality.

Software & Resources Used

Adobe XdAdobe Xd
Adobe PhotoshopAdobe Photoshop
HTMLHTML
CSSCSS
JavaScriptJavaScript
jQueryjQuery
PHPPHP
WordPressWordPress
MaterializeCSSMaterializeCSS

The Final Design

The final website contained over 100 pages of website content and a dozen different page templates. The primary content pages included the guest rooms, local area, amenities, restaurant, and venue spaces.

The home page immediately creates an experience in the redwoods of Humboldt County, CA. A page template was developed to query custom post type for various hotel rooms and suites. Once the user selects a room, a new page displays photos, descriptions, and lists in-room amenities with helpful iconography.

A page template was developed to query custom post types for attractions and amenities. On various pages a request for proposal form captures potential customer’s interests. Very important to the business. A page highlighting the properties various venues was created and shows each location with different set ups and floor plans. Specs are listed out in a table below each of these.

Benbow Historic Inn website mockup home page
Benbow Historic Inn website mockup rooms overview page
Benbow Historic Inn website mockup rooms single page
Benbow Historic Inn website mockup destinations page
Benbow Historic Inn website mockup request for proposal page
Benbow Historic Inn website mockup venues page

Interactive Features

Using a combination of WordPress, MaterializeCSS, custom code, and other resources I was able to implement a few interactive features. Each of these help serve a positive user experience when navigating and engaging with the website.

Benbow Historic Inn parallax effect
Use of parallax effects on banner images.
Benbow Historic Inn date picker
A date picker drives user conversion to making reservations.
Benbow Historic Inn dynamic tabs
Dynamic tabs helped organize content.
Benbow Historic Inn gallery
A photo gallery with side navigation thumbnails.

Design Research

The following slides display design research that was conducted to gauge and target various elements of the project such as color, typography, and layout.

Swipe through the design research slides by dragging them to the left.
Benbow HIstoric Inn website design process work mockups
The development of the home page set a pace and scheme for all subsequent page designs.
Benbow Historic Inn final design mockup
The final website design for Benbow Historic Inn.

Conclusion

The final website design shifted a bit from what the mockups intended. This was mostly due to the sudden introduction of high-quality photography that pushed the design into a higher fidelity. Colors became more flavorful to correspond with Benbow’s indoor and outdoor environments. Typography also shifted to more accurately match the original brand.

View benbowinn.com

This website was made by OptiRev for their client Benbow Historic Inn (2018).