Benbow Historic Inn

Benbow Historic Inn

Website redesign and development.

Project Brief

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

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.

Skills & Tools Used:

Frameworks, Plugins, and Other Stuff:

  • Materialize CSS
  • Advanced Custom Fields
  • Master Slider

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 final design mockup
The final website design for Benbow Historic Inn.
Benbow Historic Inn website mockup home page
The home page immediately creates an experience in the redwoods of Humboldt County, CA.
Benbow Historic Inn website mockup rooms overview page
A page template was developed to query custom post type for various hotel rooms and suites.
Benbow Historic Inn website mockup rooms single page
Once the user selects a room, a new page displays photos, descriptions, and lists in-room amenities with helpful iconography.
Benbow Historic Inn website mockup destinations page
A page template was developed to query custom post types for attractions and amenities.
Benbow Historic Inn website mockup request for proposal page
On various pages a request for proposal form captures potential customer’s interests. Very important to the business.
Benbow Historic Inn website mockup venues page
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.

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.

mood board
mood board
mood board
typographic survey
typographic survey
typographic survey
color exploration
color exploration
color exploration
texture exploration
wireframe exploration

Design Iteration

A wireframe was filled with content and the branding elements were laid into place. Then a few options were compared and iterated on until a strong design took form.

Benbow HIstoric Inn website design process work mockups
The development of the home page set a pace and scheme for all subsequent page designs.

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.

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

Back to Top