New Field Farm at Timber Ridge
A Responsive Website
Overview
Client: New Field Farm at Timber Ridge
My Role: Principal Designer, UX/UI Specialist, Brand Coordinator
Summary: New Field Farm at Timber Ridge is a new event venue in the Shenandoah Valley near Lexington, VA. The owners and operating team want to build a new website and use it to establish themselves as a high end venue and showcase the elegant style of the venue. As the area is very remote, a well designed web site is the best way for them to make their presence known.
Goal: Increase tour requests and bookings for a new event venue by building a new website.
Process: Research - Define - Design - Testing & Iteration
Research
Quick Take
-
Users do not spend more than 10 minutes on a venue site before moving on.
-
Users want to have pricing listed on the website. Venues do not provide that information on a website as they want to manage sticker shock.
-
A venue website needs to lead the user to contacting the venue staff as quickly as possible and allow the user to visualize their own event in the space.
“There’s so much to do I do not want to waste time, or fall in love with a venue that’s out of my budget.”
I interviewed the event manager of the venue. During the interview she stated that she has taken charge of establishing the style and amenities of the venue which the owner and builder are executing on during construction. The purpose of the website would be to quickly showcase the style and appearance of the venue and direct the potential client to book a tour where the venue team would take over the clients booking experience from there. She also shared her knowledge of the clients in the wedding industry. The key client is an engaged bride-to-be anywhere from 22 to 32 years old. Stereotypically the bride is the partner in the couple that takes charge of the wedding planning and will be the one researching venues and reaching out to the venue for more information or to set up a tour.
I looked at the websites and learned about the six other major venues in the same area. None of these venues websites provided pricing, floorplans, or an easy way to reach out to the venue without having to use multiple clicks of the mouse. I went through the process of requesting more information on one of the competitor’s websites and found that there were far too many steps and questions than I was willing to complete. The wording from page to page changed from requesting more information at the start to booking a tour at the end.
I created a user survey targeting those searching for an event venue. The survey asked about timeline for planning, budget, amenities the user would like, how much time users spend looking at websites, and a free response question where the user could input what they most need or want from a venue website. The survey found that most users were actually looking for venues and amenities that were far outside their budget. The survey also showed that 80% of those surveyed specifically requested for pricing to be provided on the website.
User interviews revealed that users do not spend more than 5-10 minutes on a website before either reaching out for more information or moving on. This created a need for multiple well marked paths to lead the user to reach out to the venue. Users also stated that less text is better as the first priority is images of the space and property, and if the images are enough to keep them hooked then they continue to search for more relevant details.
I approached the client with the findings of the research, and specifically asked her about listing prices on the website versus the culture of the wedding industry. The client stated that the wedding venue community does not post pricing on the websites in order to ensure that users would reach out for more information. This allowed the venue to make a sales pitch and to be present to mediate any sticker shock the user might have. The client was aware of the frustrations that users have with the lack of transparency between the venue and the public when it comes to pricing, but was hesitant to provide a pricing sheet online without any way to provide context to the user. If a user hears the pricing while physically standing in the space, they can have the context that allows them to avoid a shock from the pricing and help the user understand what they are paying for.
I proposed making a price list available online as this could provide some transparency and build good faith with the user, and make the user want to reach out for more information. This would also decrease the number of users who book a tour or reach out for more information, but immediately decide against the venue after learning about the pricing.
Define
Quick Take
-
The user needs responsive venue staff, transparency on pricing details, and photos of the entire venue space.
-
Simple and streamlined site map which directs users to contact the venue.
“This is a lot of time and money being invested, I need enough information to erase all doubt that this is the venue for me”
With the results of the interviews, surveys, and competition analysis in mind I created a persona of the user the client targets in their business. The average user is a bride-to-be who is 22 to 32 years old, already engaged, wants to host 10-200 people at her wedding, and has a venue budget of $8,000 to $15,000. The user persona is also in need of responsive venue staff, transparency on pricing details, and photos of the entire venue space that do not try to hide it.
Once the user persona was complete, a site map and user flow were created which emphasize scheduling a tour by having buttons to lead the user to the page to the “request a tour” from every other page on the site in close proximity to key details which would lead to interest in the venue. Interviews and surveys also revealed that the users did not spend more than 10 to 15 minutes on a website before either requesting details or moving on. This meant that the site map was kept simple and streamlined, which led to the task flow being straightforward. A user flow was created which outlined how quickly a user could make it through the site as a whole, and at any point decide to request a tour or request more information.
Design
Quick Take
-
Wireframes built with each page directing the user to the page to contact the venue.
-
Logo and style tile created based off of a carving found on the property, and a color scheme that is common in the historic architecture and construction in the area.
-
Prototype was built from wireframes and style tile, and a light and airy design was used as requested by the client.
“A light and airy style is considered timeless, and will be perfect for the website moving forward.”
I began the design phase of the project by creating mid-fidelity wireframes of five desktop pages and three mobile screens. The overall purpose of the website is to guide the user to the page for them to book a tour where they can meet with venue staff, so I made sure that every page had a button to lead the user to the bookings page where they could fill out the form to set up a tour. The clients overall design theme she provided was “light and airy” and “lots of pictures”. I made sure the home page would be full of photos and plenty of white space to balance it out and maintain an open feel. The actual tour and bookings page does not have any photos as it would be too cluttered in addition to the input fields for booking a tour. The client loved the customized footer using the silhouette of the ridgeline of the Blue Ridge Mountains which dominates the view from the venue.
I presented the wireframes to the client for her feedback, and to help us establish a style tile of the colors she would like present in the website. As we walked through the wireframes the event manager was able to let me know how the color scheme and theming for the venue could be incorporated. Into the website to make the experience of going from the digital site to the physical property more seamless.
I was also asked to develop the logo for the venue. I was sent pictures of details of the farmhouse, barn, and property. Among those was a close up picture of a flower design that had been hand carved into a post of the railing in the stairwell of the old farmhouse. I created the logo using that carving as a template, and presented a variety of options to the client. They settled on a logo that consisted of the flower design framed by a box. I also created an outline of the ridgeline of the Blueridge mountains that dominates the view from the property for use on the website in the footer. Creating these custom design elements for the product was my favorite part of the process, and I came out of this task with a greater understanding of the client and their product.
With the wireframes approved, logo and branding developed, and the style tile developed, I moved on to building the prototype. I developed the prototype keeping in mind the need for there to be minimal text with necessary details, a lot of images of the space and property, and continue with the light and airy theme the client had requested and established. I built the homepage with many images immediately available and multiple buttons to lead the user to the page to request more information and schedule a tour. I kept the form for requesting a tour and more information down to 9 fields to complete, only one of which is a free answer field. A photo gallery page was created with photos and detailed text descriptions of the venue, with a detailed pricing chart at the bottom. The “Contact Us” page provided the email address, phone number, and physical address of the venue for the user to use.
Testing & Iteration
Quick Take
-
Language on the website was changed to make it clear that users were requesting a tour and not booking an event, and to clarify the purpose of each page
-
Input fields were minimized and overall site spacing adjusted to allow for the light and airy feel the venue requested.
-
Pricing was reduced from exact prices for items to price ranges.
-
“Contact Us” page expanded to include a form.
“The language on the website needs to be very clear in order to direct the user to contact the venue.”
Multiple users tested the prototype of the webpage, and all were able to submit a tour booking request within 10 minutes. Testing was done in person, and remote over zoom using the Figma prototype file. Users appreciated that the style was light and airy and they did not feel overwhelmed going through the website. Users also noted the consistent style of the website and the venue itself, which users stated would make the experience of going from exploring online to touring in person feel seamless. Based off user feedback changes were made as follows:
The header was too spread out and taking up too much of the users screen space. The header was updated to a tighter layout.
​​The footer was reorganized to make better use of space and create a sense order out of the chaos from the previous iteration. I spread out the page options on the left side in a column, I placed the social media logos in a column, decreased the size of the logo, and made the input fields a single line instead of outlined boxes. All of these changes helped to make the footer look more organized and more consistent with the
Users were confused on what the “Tours and Bookings” buttons and page would help them do, making the users hesitant to click on the buttons and go to the page. As the key purpose of the website is to encourage and guide users to booking a tour, the language needed to be changed to clarify what they would be booking. On the homepage
the“Tours and Bookings” button was changed to “Request a Tour”, and the first “Request a Tour” button was moved so it would be immediately visible when the user lands on the homepage. The “Tours and Bookings” page was also renamed to keep the language consistent, and the purpose of the page clear.
The input fields throughout the site were changed from outlined boxes to simpler lines for entries. This better achieved the goal of making the design less cluttered and also suggested a more open and sophisticated look.
The “Amenities'' page was also confusing to the users as they did not understand the purpose of the page from its title. The page was renamed “The Venue'' as its purpose is to display images and provide information on the venue.
The images dispersed throughout “The Amenities” page were condensed to a photo carousel on “The Venue” page. To save space and allow the Venue to add as many photos as they would like and update them throughout the year.
The “Amenities” page contained a full list of the packages and pricing for the venue. User testing showed that users were less likely to reach out to the venue for more information after seeing all the pricing laid out, and many stated that it was too much information that did not mean anything to them in addition to being attached to a very large price tag. In the second iteration the pricing section remained at the bottom of the
retitled “The Venue” page, and became a summary with a general price range, and an invitation to reach out to learn more about the packages that would suit the user and what that pricing would be. This solution allowed for the user not to be overwhelmed with information and would also provide the venue with the opportunity to make their sales pitch and provide pricing details with more detailed context.
The “Contact Us” Page was expanded significantly in the second iteration after testing. Multiple users in testing stated that they felt the page was inefficient as it only contained contact information which would require an additional step to put to use. Users stated that in a rush to look at as many venue websites as possible this would deter them from reaching out. Although there is a way to book a tour- users also
requested a way to just ask some questions or set up a phone call before committing to meeting in person. This feedback led to the addition of a message form to the page. This allows users to have direct contact with the venue with minimal effort. In addition to booking on site tours, this contact us form would allow another manner for the client to get users into their pipeline.
Conclusion
The second iteration was accepted by the client, and they looked forward to putting it into development. Since the completion of the final design the client has taken no action to develop the design as the completion of the venue has been past due for over a year now, and the client would like the venue to be completed before overhauling the website again.
An addition I would recommend to the client is providing more access to the message form on the “Contact Us” through buttons on the homepage and at the bottom of the bookings page in the event the user is intimidated by the idea of booking an onsite tour.
Moving forward I hope to help the client to bring the style and branding established with the website to their printed materials that they provide during tours, and also as hand flyers in local businesses.