Skyfield Ranch

Project Deliverables: Responsive website design

My Role: Creative Direction, UX/UI Design, graphic design, and writing

Project Overview

Skyfield Ranch is a rustic event venue located on the prairies of Alberta, Canada. Skyfield offers a unique experience for events, blending nature with modern convenience that guests won’t forget. Their main focus is on providing a unique and memorable location for weddings and wedding receptions.

Many wedding venue booking websites are confusing and don’t offer clear information on pricing and how to book for a specific date. Our goal for the Skyfield Ranch website was to let users quickly and easily see pricing information, and when the venue is available to book.

The website has a warm and romantic design, featuring beautiful images of the venue's natural surroundings and rustic architectural features. The main page includes a carousel of photos showcasing the various spaces available for weddings, as well as a brief introduction to the venue and its amenities. The navigation menu includes detailed information about the different spaces available for weddings, a "Gallery" page with photos of real weddings held at the venue, and a "Contact" page with information on how to book the venue and get in touch with the staff.

The website is mobile-friendly and easy to navigate, with clear and concise information about the venue and its services. It also includes a user-friendly booking system, allowing potential clients to check availability and reserve the venue online.

The goal of the website is to provide a professional and engaging online presence for the rustic wedding venue, and to help generate interest and bookings from potential clients.

Understanding the User

User Research: Summary

I conducted interviews and created empathy maps to understand the users that I am designing for, and their needs. A primary user group identified through this research was young working adults who don’t have the time or budgets to submit wedding venue bookings online.

This user group confirmed initial assumptions about Skyfield Ranch customers, but research also revealed that time was not the only factor limiting users from booking a wedding venue. Other user problems included interests, obligations or challenges that make it difficult to price and book a venue online.

User Research: Pain Points

User Personas: Stephen & Emily

Skyfield Ranch user persona design by Jenn Borton

Stephen: Problem Statement

Stephen is a busy freelance videographer who needs to quickly see whether a venue is available on a certain date, because his wedding date has already been chosen and can’t be changed.

Skyfield Ranch user persona design by Jenn Borton

Emily: Problem Statement

Emily is a busy office manager who needs clear, easy access to pricing information because she’s on a strict budget for her wedding planning.

User Journey Map

Mapping Kayla’s user journey revealed how helpful it would be for users to have access to a dedicated website and online venue booking system for Skyfield Ranch.

Starting the Design: Information Architecture

Here is our initial sitemap for the Skyfield Ranch wedding venue online booking website.

Skyfield Ranch sitemap design by Jenn Borton

Paper Wireframes

Here are early paper wireframe sketches for the photo gallery section of the website. I explored a variety of different layout options, ending up with selecting one for refinement (far right example).

Skyfield Ranch ideation sketch design by Jenn Borton

Refining the Design: Digital Wireframes

I then moved on to create digital wireframes of my initial concept screens. Here I was able to refine the visual designs by implementing a grid system and establishing a visual hierarchy of elements. I also started to better understand the user journey from screen to screen within the app.

I began to establish a basic layout for the main pages of the desktop website. Here is the photo gallery page, featuring a large showcase image, with a carousel of smaller thumbnails below that a user can scroll through to get a better idea of the look of the venue.

Skyfield Ranch digital wireframe design by Jenn Borton

Mobile Wireframes

Here is an example of the digital wireframes for a mobile version of the website, sized for an iPhone screen.

Skyfield Ranch digital wireframe design by Jenn Borton

Low-fidelity Prototype

The prototype connects the user flow of reviewing pricing, choosing a date, and booking the venue, so the prototype could be used in a usability study with users.

Skyfield Ranch low-fidelity prototype design by Jenn Borton

Usability Study Findings

Here are the main findings that we made during our Skyfield Ranch website usability studies:

Round 1 Findings

Round 2 Findings


Early designs had the functionality we were looking for, however the text was far too small, and navigation elements were too difficult to click on. I cleaned up the navigation, made text and clickable elements far larger, and included high quality photography and a soft, delicate color palette. We included a call-to-action with the ‘Book Now’ button on the top right.

Users wanted to quickly and easily see if their chosen wedding date was available to book. We included an easy-to-click calendar system, as well as suggestions for nearby dates if the one they chose wasn’t available to book. We also allowed them the option to change their wedding date selection at any point throughout the user flow process (low-fidelity wireframes on top, high-fidelity mockups below):

High Fidelity Prototype

The high-fidelity prototype for the Skyfield Ranch booking website follow the same user flow as the low-fidelity prototype, including the design changes after the usability.



Impact: The website makes users feel like Skyfield Ranch really considers how to meet their needs.

User quote from peer feedback session: “This is the first venue booking website I’ve used that provides clear, concise information on pricing! I love it!”

While designing the Skyfield Ranch wedding venue booking website, I learned that the first ideas are just the beginning of the design and iteration process. Usability studies and peer feedback greatly influenced every step of the iteration process and the design of the site.

Next Steps