Genesis framework site provides turnkey design and development services
Welcome to Fetch + Field
Recently I was given the opportunity to create my first website for a sub-brand Standard Beagle, called Fetch + Field. Fetch + Field was created out of the sudden and unexpected need for small, local businesses to shift from brick and mortar to the digital space without much digital support or experience. The brand creates out of the box support for these businesses to improve their websites, build an e-commerce platform, curate social media content or improve their security during these uncertain times.
Brand and Styling
I’ve learned that time and budget constraints can inhibit you from completing every step of the UX process at some points in our career. That was the case here.
We wanted to get up and running as quickly as possible to help these businesses shift their companies’ usual business processes and stay afloat. I already had a name to work with. From there I created a logo and style tile.
No matter how quickly something needs to be created, the UX process is always more important than just throwing a site together.
We were given a general direction to go in from our stakeholder. Since it was a sub-brand Standard Beagle, dogs were an important aspect of the branding. Because dogs are usually fun, easy-going, loyal and hard-working, we decided to use those traits in our branding adjectives. We came up with Curious, Resourceful, Mischievous, Reliable, Creativity, Confident and Positivity.
The intention of this style was to embody the brand’s complex descriptors. Curiosity, confidence, and mischievousness are provoked by the bright, bold colors and are displayed through Staatliches, the header and logo typeface. The resourcefulness and reliability are tied in with the classic monochromatic base colors, warmer tones, and Roboto body copy.
Setting up website development
Our company uses the Genesis framework because of its strong code base and developer-friendly hooks. Genesis also has a lot of child themes that are perfect for e-commerce websites.
How did we pick our theme?
Choosing a theme is harder than you would think. With all the options out there how did we settle on just one? When you’re in a hurry and need a website up quickly, simplicity is key. We picked the Breakthrough Pro theme because of the simple layout and blank slate. It was also bold, like our brand.
Applying Style
So the template is up, now what?
I learned one cardinal rule, never make edits to a live site! Our team of developers set up what they call a “development site,” which is basically a place on your server where the entirety of your site is copied and replicated for development and testing. That way you don’t accidentally make a change to the code and completely shut down a customer-facing site.
Next, since I was creating the entire website straight from the WordPress admin, I installed the Google Fonts plugin to implement the typography from our style guide into the site. The plugin isn’t perfect, and I found myself customizing some CSS using the Additional CSS box in the theme customizer.
I also would like to note that not everything is going to turn out like you plan. As a developer, it is your job to communicate your reason why you have to change the style and keep an open mind. Sometimes it is worth changing a little bit of the style to save you tons of time in the development phase.
Next came the biggest unknown, implementing Shopify into the WordPress site. This took a lot of article reading, YouTube watching and guesswork. In the end, it wasn’t too bad with the guidance of the internet and lots of Shopify tutorials.
However, getting the Shopify store to fit in with the branding was another story. This is another case where custom CSS came into play. Chrome Inspect is your best friend!
Launch
Now the site it built, time to launch! Luckily I have a great team of developer co-workers to lead the way on this one. I did learn that launching is a heck of a lot harder than I imagined it would be. And for good reason! Security security security.
Think your business is too small to attract the bad guys? You’re wrong. Standard Beagle’s hosting platform provides the utmost security for all of its clients.
Once the site was launched, I went through the Yoast SEO plugin to make sure the site was optimized for search engines and social media platforms.
Lessons Learned
This article wouldn’t be complete without discussing learning opportunities. For starters, I wish I would’ve focused more on the content of the site. I developed a spreadsheet that outlined the services Fetch + Field provides, but I wish I had a better understanding or consistency in the content of the site. Having an outline of each page would have helped move the development along much faster.
What is the main takeaway from this experience?
I learned a lot and I feel even more confident about my next project. I am in no way an expert, but sometimes it’s OK to take baby steps to accomplish your big goal. My big goal is to develop an entire, custom WordPress website using PHP. It is easy to think you have to know everything when you’re coming out of a bootcamp and knowledge was just thrown at you constantly with the expectation of sinking in all that information like a sponge. Don’t get me wrong, I learned A LOT, but for me, nothing beats learning on the job and tons of practice. I am very happy with how my first site turned out, but I also learned about what not to do and how I can improve for the next one.
Thank you for taking the time to read our experience.
