Balloon and Events Website

- Role: Developer & Designer

- Purpose: Create an ecommerce platform for customers to order deliveries from. Be able to track inventory for larger prop items and yard card products. 

- Sector: Balloons / Event Decor


The Balloon and Events Construction company is owned and operated by my mom. I was given the opportunity to give her website a digital overhaul and bring a new ecommerce system to the business. The goal of the website was to cut down on customer invoices over the phone and drive sales through the website instead. This process began with creating a new website called Jacksonville Celebrations. This website worked almost as a proof of concept before taking down the companies main website. 

Starting Point

This website was a second version of a previously built ecommerce website. Once we had tested the ecommerce method and saw positive results we were ready to integrate the two websites into one main website for the business. The goal was to keep a similar look to the main website while bringing in the ecommerce shop option. 

The business has two main customer bases. The first is larger organizations such as corporate businesses, schools, and non profit events. These clients typically prefer their orders via a place order form so we decided to keep this form as an option. Smaller clients who are looking for simple birthday or holiday delivery options were more likely to order via the ecommerce shop. 

The home page was designed to feature seasonal products such as holidays, graduations, and specific events. The goal was to add products as these events came during the year.

A secondary goal for this website was to create an infrastructure/template that other ecommerce balloon website could be built off of for future clients looking for a similar product. 
  • Jacksonville Celebrations

    The test shop website before integrating into Balloon and Events main website.
  • Old Balloon and Events Website

    This screenshot was taken from wayback machine and is not a true representation of the old site.

Development Process

Before I began developing the website I needed to gather resources from both of the businesses current site. This meant creating a list of products, gathering brand and product images, and getting organized. From there I was able to begin work in WordPress. 

Step 1: 
- Create our workspace. By using the cloud hosting system called Cloudways I am able to work on the website without taking the current live version down. This allows for a quick transition once the full site is finished and ready to go live. Once the website is complete I will be able to clone it and use it as a starting point for future ecommerce balloon websites.

Step 2: Upload plugins. 
- Once the workspace is created it looks just like a regular WordPress website. We then upload Oxygen Builder which is the system I use for developing websites. During this time we add any other plugins that may be necessary for the website to function properly. A few of these plugins include fluent forms, Woocommerce, and Woo delivery so we can set custom delivery options. 

Step 3: Assign global colors, typography, and headers. 
- Using the companies already established branding sheet it is easy to input the global colors and fonts. This way whenever we add any text or colors all of the global types are already there.

Step 4: Import media.  
- The next step in the process is to upload any media files to the site. This includes photos, design models, .pdf files, and any other media file. This was a lot of work since the website is selling many varied products. 

Step 5: Create Templates
- Now that the website is built, our plugins added, and all the global elements are added we can start building out the website. 

Oxygen Builder allows us to create templates that are then applied to other pages throughout the website. The first template to create is a header and footer that will be applied to our main page. Both the header and footer act as the bun in our website sandwich and everything we develop in-between is considered inner content or the meat of the sandwich.  

Step 6: Inner Content 
- With the header and footer built it is time to start building out the inner pages of the website. We start by creating the home page that features a slider and has the order form front and center. From there the focus is on creating the ecommerce shop. Starting with the top level catagories and working down to the sub categories and lastly the product pages. All of these pages follow a template so each product will be using the same single product template page. 

During this process it is important that any work we do on the desktop version of the website we are also considering the mobile version. No section is complete until all breakpoints have been looked at and edited to fit within the different screen sizes. 

Once the shop has been fully built out and the informative pages (about us, contact us, FAQ, etc...) created as well  it is time to start adding products. These products need to allow the customer to select many different customizable options such as balloon colors, arch sizes, foul balloon letters and numbers, and many more options. A simple dropdown box could work here but we wanted to add a simple method that is more appealing visually. The solution to this is a image selection seen in the image below.

Step 7: Final Touches
Before taking the website live we must run several tests to make sure everything is functioning properly. Stripe payment method is the first thing we test to make sure the website is taking payments and sending them to the right place. Next, we make sure we can block out order times in case a day becomes too busy or a holiday break is needed. Lastly, we test and make sure the delivery fee and taxes are working correctly. An order placed from different zip codes needs a different delivery fee based on distance. Once all of these things are tested the website is ready to launch

Step 8: Launch
With the website live I can now install Rankmath. An SEO and analytics plugin that will help us track important data the website is bringing in. This connects to google analytics so we can track live and real-time data. The last step is ongoing as the work never truly ends. More products need to be added as the season's change and the business grows. 

Analytic Feedback 

After launch analytics:
The key thing to look at here is what percentage of users are viewing the website from their mobile devices. The mobile layout of this website required additional work but that responsiveness was key to the overall design and success of the website. 

Contact Me

Let's make something new, different and more meaningful!
Fill out the form and I'll be in touch.
Call Me

+(904) 955-1532


linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram