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:

Adobe Photoshop

Adobe Xd

CSS

HTML

JavaScript

jQuery

WordPress

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.

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.

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).