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.

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.