Boston Equestrian Center

Building an Online Booking That Converts.

Project Summary

Project Type

Web Design, Web Development, Branding

My Role

Web Designer & Developer

Client

Boston Equestrian Center

Duration

8 weeks in April 2021

Tools

Adobe XD, WIX

Project Overview

Boston Equestrian Center (BEC) was created in 1995, with more than 25 years of experience in the horse industry. It is home to horse enthusiasts, where trainings are customized to meet individual needs and goals. The organization owns a website that was built 12 years ago, and since then, there has been only some minor updates made to maintain the website.

In this project, my role was to design, develop, and launch BEC’s brand new site. The solution is migrating their site from Joomla to WIX to allow the team to manage and maintain their site independently. I established a new booking system to boost sales, rebrand their visual look to make it more attractive, and restructure the content to be more relevant, informational, and easy to navigate.

Visit Website

Design Process

STAGE 1: Empathize

The Challenge

Outdated Content
The website was first developed in 2009 and there has been no updates implemented on the site since then. As a result, majority of the content in the site is outdated and not reflecting the true information. For example, some programs are no longer offered, or many horses have already been sold.

Lack of Control
The site was created in Joomla and none of the management team has the access to update the content. This is due to the nature of the website that is hard coded and BEC have no website manager who have the ability to modify the web content.

Unattractive Brand Design
12 years have past while design trends change every year. The lack of regular maintenance on the site and its brand have caused them to move further away from the current trend. Consequently, the old design might be one of the culprits of why BEC was having a hard time attracting new customers - lack of relevancy.

Problem Statement

How might we help BEC to develop an online platform that is relevant and informational for their users while having a full control over it?

STAGE 2: DEFINE

Product Roadmap

Through auditing the site, interviewing stakeholders, and assessing their competitors; we got a better understanding about what they need in the website and what they are trying to accomplish by the end of this project.

In this stage, the strategy focus on establishing an organized structure that will set the foundation on how the new site will be built. The steps include: archiving content, creating sitemap, mapping final content to the structure, and finally collecting moodboard to help guiding the design process.

Content Collection & Restructuring

Moodboard: Design Inspirations

Minimum Viable Product:

01

Online Booking
The team wants to have a more automated process to reduce the manual process of booking lessons.

02

Remove Old Content
It's important to prevent misinformation to users by only showcasing services that are currently offered.

03

Web Migration to CMS
Develop web with Wix to allow the team own the site, connect with users, and monitor their engagements.

Sitemap

STAGE 3: Ideate

Wireframing

Creating wireframes is one of the most important steps in completing this project. It is used as a guideline to visualize the layout of the content and could help speed up the web development process. In addition to that, the wireframe is also a great tool to explore design, color, typography, and structure in the site before finalizing the visual look of the brand.

stage 4: TEST

Web Development

The final part of the process is to develop the site in Wix which covers: creating all pages, developing online booking platform, setting up on basic SEO, and finally adding user interaction to make sure all buttons, links, and pages are working smoothly.

Then, the most critical part is to disconnect the domain from Joomla site and connect it to the new Wix site. Once the propagation period ended, the next part is to setup the Google business profile so that it helps their audience find out about their business.

Visit Website

Online Booking
This is one of the most important features added in the website. By automating this step, it simplifies the booking process between users and the team. Users can easily find available dates and time slots, then schedule a lesson. The final checkout step is to fill out their contact info to send confirmation.

In addition to that, the team will also able to add trainers’ information in the backend. Dates will become unavailable if no trainer is registered in that day. Trainers will also get notified through their email if someone is booking a lesson on the day and time they enrolled.

Submission Forms
It is important to be easily accessible if users want to reach out to you. The goal of this contact page is to give users different ways how they can reach out to the team at BEC. There are different contact forms accross the site: general information, boarding/leasing quote, and horse prices quote.

The contact form helps the team to stay organized and connected to their users. In the previous version, the only way to contact is through phone and email. Through introducing different channels, it expands opportunities to engage differently with them.

What's the impact:

5 minute 19 second

This is the average time visitors spend on the site. The top 3 most visited page after homepage are: Lessons, Services, then Horses.

34% Bounce Rate

This is the number of visitors left after viewing one page. They average to spend 2.4 pages/session. The most popular page to navigate to is: Lessons.

72% Organic Search

After the first year, the site attracts 98% more visitors than the previous year while 72% of that number comes from Google search.