Skyfield-Ranch-Banner-M-Crop.jpg

Skyfield Ranch Case Study

Project overview 


The product: Skyfield Ranch is a rustic wedding venue location in Alberta, Canada. Skyfield offers a unique experience, blending nature with modern convenience that wedding guests won’t forget.

The problem

Many wedding venue booking websites are confusing and don’t offer clear information on pricing and how to book for a specific date.

The goal

Our Skyfield Ranch wedding event booking website will let users quickly and easily see pricing information, and when the venue is available to book.

WoodBG-Small2.jpg
Laptop-Home.png

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

  • Pain point 1: Working adults are too busy to spend time online researching wedding venue pricing, especially as most websites do not clearly display pricing.

  • Pain point 2: Text-heavy wedding venue booking websites are often overwhelmingly difficult to read and navigate.

  • Pain point 3: Online booking systems are confusing to navigate and don’t offer suggestions if the user’s chosen wedding date is unavailable.

User Personas

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.

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.

journeymap.png

Starting the design

Information architecture

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

sitemap.png

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

paper-wireframes.png

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

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

lofi-prototype-mobile.png

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.

lofi-connections.webp

Usability study findings

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

 

Round 1 findings

  • Users want clear, accessible language, and lots of high quality photography
    Users want to see suggestions for available dates if the one they’ve selected isn’t available
    Users want to see clear, unambiguous pricing information (no hidden costs)

Round 2 findings

  • Users want suggestions on alternative dates for booking
    Users want readable text (high contrast, not too small a typeface)
    Users want a shortcut to ‘contact us’ page for further inquiries

Mockups

Mockups

Mockups

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.

sf-ba2.png

High fidelity prototype

hifiprototype.png
Mockups.jpg

Theme

Dark: #463E38

Header: Garamond Medium

Paragraph: Garamond Regular

Buttons: Garamond Semibold

Primary: #A7AA7E

Header: Garamond Medium

Paragraph: Garamond Regular

Buttons: Garamond Semibold

Secondary: #F3C39D

Header: Garamond Medium

Paragraph: Garamond Regular

Buttons: Garamond Semibold

Accessibility considerations

  1. Provide access to users who are visually impaired by increasing text size and contrast

  2. Use high quality and large imagery showcasing all aspects of the venue to help users better visualize the wedding venue space and how it could function for their own wedding.

  3. Include alt text to all images for screen readers.

Going Forward

Takeaways

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!”

What I learned

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

  1. Conduct another round of usability studies to validate whether all of the pain points identified in the first study have been effectively addressed.

  2. Conduct further user research to identify and determine any new areas of need.

WoodBG-Small2.jpg