The Starting Gate

The Starting Gate is a high end "white glove" banquet hall attached to Greathorse Country Club but run as a separate entity with its own staff, kitchen and facilities as well as its own marketing challenges. The job here was to build a website that could be used to market their service.

If you've been over at my Greathorse portfolio page than you might already be a little familiar with this location. This work was done parallel to the work for Greathorse. The idea here is that they share some brand recognition and assets but as businesses they really had different missions. 

For one thing, instead of being an exclusive member's only location like the Country Club, this banquet hall could be booked by anyone for corporate events, weddings and so on. It shared the same beautiful grounds and mountain top breathtaking views as the Country Club. 

Expand Content
Languages, Tools and Frameworks
  • Balsalmiq Mockups
  • Adobe Photoshop
  • Adobe Illustrator
  • Handbrake
  • Notepad++
  • HTML
  • CSS/LESS
  • JavaScript / jQuery
  • PHP / MYSQL / Doctrine
  • MVC CMS (Concrete5)
  • GIT, Bitbucket and Sourcetree
  • Airtable - Project Management
  • Agile Workflow for Design and Development

 

My approach here...

The banquet hall can be used for really any kind of gathering or event but the bulk of their business is in weddings. So with that in mind, I set out learning what I could about that industry. It's visual. Really, really, really visual. Pick up any wedding publication or look at other wedding websites and it is all about big beautiful imagery and lush surroundings. So my approach was to try and capture that same impact. Brides especially are a targeted audience for this type of visual design as more often than not they are handling the bulk of wedding planning duties... and it sounds kind of insensitive to grooms or same-sex couples for me to say that but the demographics didn't lie here.

Discovery: Lo Fi Sitemap and Wireframe

The focus on this site was really just on stunning visuals and lead generation. Comprehensive landing pages to drive traffic from social media marketing campaigns and similar efforts by their marketing team were top priorities. 

The sitemap itself came together pretty quickly after meetings with the client to understand their needs and likes. This process allowed me to understand what landing pages were needed. I also took time to explore their assets of which they had tons of location and wedding photos in professional quality which is just such a rarity sometimes. It was going to make planning the pages easier knowing I had that library to work with.

I actually approached this whole thing as if I were laying out a magazine, which was something I had to reach far back for because I'd been working digitally for so long that some of those old print design ideals were untapped for a long time. But you know... there is crossover from old standards to modern applications and actually I'd say that for a good period of time the web moved away from those standards but more and more I am seeing periodical style layouts make their way onto the web.

User flows were planned along the lines of visual story telling in page hierarchy and imagery to represent major service areas. I focused on macro elements like navigational flow in headers and footers too.

Hi Fi Proofing and Prototyping

I wanted the navigation to really seem magazine like here also so as I explored the hi res proofs I wanted to represent the main menu as if it were a table of contents like a periodical and then I built from that and explored function across tablet and mobile devices. Smaller screens would use an off canvas menu that slides in. 

Different states for the header existed also, splash type with the magazine style menu and then for interiors a more traditional horizontal menu and a sticky nav for ease of use on some the of the longer scrolling pages. I went BIG on visuals whenever possible because their text content was going to be very light. The impact had to be in the photos and I didn't want any other elements getting in the way of that.

Along with that is an ever-present Call to Action for lead generation on inquiries for booking as well as a Call to Action for the Greathorse country club itself, never missing a moment to cross promote.

Development

My approach to development is always modular. Establishing components, UI Kit and Design Systems whenever possible for future flexibility and organization. I broke my work into agile chunks, focusing on headers, footers and landing pages. Running QC and prototyping any animations or interactions on the fly. Testing against virtual device labs for responsiveness.

The UI Kit and Design System tapped some assets I had been developing for Greathorse since they shared a cohesive look in many ways. I was able to quickly and easily extend on that UI Kit because of how modularly I built it.

Structurally this site is very simple if you think about how much work the photography is doing. Really my overall approach was, don't let anything get in the way, be smart where text or elements overlay images and ensure it works across multiple devices.

The CMS tools were also extended and refined for ease of use by their marketing department to manage. I always believe that end-user functionality doesn't end with the visitor. The people managing it need to be able to do so efficiently and easily.

The Take-Away

I really knew next to nothing about weddings, marketing for weddings or even aiming at that audience so I had to dig quite a bit to learn about the market. Visual impact is super important and creating a platform where really the UI itself should not be overbearing and work in conjunction with rich, textural visuals was key. I let my work get a bit skeumorphic and utilized texture when it made sense. It was really about "feeling" and evoking emotion. Telling a story with visuals and minimal copy.

The Results

The Starting Gate has been utilizing the site to promote and book events for several years now and through the CMS tools their marketing team are able to self manage, keep up with staff turnover and promote. Ongoing maintenance, support and updates are easy thanks to modular design and approach too.

Required
Required
Required