Moo and Brew Festival Website

- Role: Developer

- Purpose: Drive ticket sales & inform 

- Sector: Live Event


The Moo and Brew festival is a music, beer, and burger festival where attendees can enjoy the fun atmosphere while eating drinking and jamming out. Our job for this website was to drive users to purchase tickets as well as portray information about who all will be attending the festival. With the festival having to be canceled last year due to COVID this years launch was heavily anticipated. 

Starting Point

Before beginning work on developing the site we needed to mock up what the design was going to be. The website was using a temporary landing page that was collecting emails and informing visitors that more information was coming soon. We wanted to keep the design theme consistent with this lading page. 

To the right is some images of the early design process. We started with sketches before moving to an Adobe XD mock up. From there we were able to begin the development in Oxygen builder/WordPress.  

Development Process

Once the mock ups and Adobe XD designs are complete we are ready to move into WordPress and begin the development process.We follow a similar structure here for each website to streamline the workload and cut back on repetition. 

Step 1: 
- Create our workspace. By using the cloud hosting system call Cloudways we are 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. 

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 we use for developing our websites. During this time we add any other plugin we think may be necessary for the website to function properly. 

Step 3: Assign global colors, typography, and headers. 
- These are all already assigned in the Adobe XD so all we have to do is put the inputs in Oxygen Builder. 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 we have to the site. This includes photos, design models, .pdf files, and any other media file. 

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 follow along the Adobe XD and work from the top of the page down. We start by adding in the hero header video followed by the headliner banner. The rest of the site is developed by simply working our way down. 

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. 

Step 7: Revisions and Touch-Ups
By this point the majority of the site has been built out and we are able to show a functioning version to the client. We take feedback and edits that must be made and get back to work.

Important edits:
- Artist Spotlight image changes & photo ratio changes
- Hotel section was added during this step
- Vendor section required mobile/breakpoint edits

Analytic Feedback 

After the sit launched we were able to look at Google Analytics to tell us key information regarding what the sites users were doing. Below are screenshots of that data.
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


Drop a Line

Let's Connect
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram