Convenient Food Mart had been updating their site every week with the latest advertisements and promotions. That doesn’t sound bad at all – until you realize they were using a very old HTML website. Uploading PDF files and changing out links seemed like way too much work, that was not necessary. Em-Media had a new website in development. My job was to optimize the process – and I had to learn the in’s and out’s of a new drag and drop editor.

Finding the WordPress Theme

You would think the title implies that I needed to head out on the internet and start looking for WordPress Themes on themeforest.net. In all actuality, I had to find where the theme was located on the computer. The digital agency I was hired to work with had several web designers working in-house. There wasn’t a centralized location for all of the files. Most of the websites were created locally on the individual designer’s computer.

When the time came for me to take over the project, I have to find the actual WordPress theme and development website. The current website was a plain HTML site and was just accessed via FTP (with FileZilla). I did my fair share of searching and finally located the WordPress folder, along with the theme and everything that went with it.

Ready to Launch New Site

I liked the theme they picked. The website was nearly done. I have zero recollection of why this website sat on the shelf for over a year, but we needed to get this launched – fast. A few reasons why launching now was important:

• The old website was not mobile-friendly or responsive
• New website would allow for easier updates by non-coding employees
• Design and graphics looked outdated (from the early ’00s)

Normally I would recommend making sure the site was finished and everything was 100% functional. In this situation, we were doing the brand a disservice by having this outdated and clunky site on the web. Even from a project management perspective, the agency employees were taking 5x longer to do updates with the old site.

My goal was to talk with the management at the digital marketing firm and talk to the marketing director of the stores and get this launched ASAP.

Introduction to the Enfold Drag and Drop Editor

Up until this point, I was mostly handling hand-coded websites. I coded websites with HTML in high school, learned some PHP in college, and over the last few years started figuring out databases. I played with WordPress when my friend and I had a pretend advertising agency, but that was a long time ago (in web development standards). It was time to get my hands dirty with WordPress again.

Learning from Previous WordPress Failures

This was the fourth or fifth WordPress site I created/designed/developed for the Steubenville based web design agency. Over the last few projects, I learned that Free WordPress themes were nice but caused a lot more work. I also found out that you can add HTML code into the page editor, but the moment an employee wants to make a change – IT’S BROKEN. My goal is always to use these lessons to make sure that I adapt my game and skills.

I was also pretty stubborn when it came to drag and drop editors. The training courses I watched over the last several years made me believe that if you didn’t do it from scratch, you weren’t a real web developer. Turns out I read into the training wrong and being a Pro at WordPress is a highly sought skillset. Actually, if you are going to run a local web design company or web development service, you better learn a CMS if you want to complete more than one website a year.

I remember the owner of the digital marketing company asking me to get a website done in a month and I almost had a spit take. My ‘coding from scratch’ mentality would laugh at that request. Years later, my WordPress Pro Brain knows it can be done (but still not the best timeline to go by).

Typing Would Be Faster – My Struggles with the Drag and Drop Editor

The new Convenient Food Mart website was launched. It was being powered by WordPress and by a monster theme called Enfold. I stumbled upon this them with another website the design company created and monkeyed around with the theme a few months earlier. I am talking very minor tweaks – maybe changing a word here and there. This web development job required a bit more.

At first, I struggled to figure it all out. The whole concept of dragging an element from a toolbar to the page was tenuous. My hand would go from the keyboard to the mouse, mouse to the keyboard, over and over. How much wasted time was going on here?! I remembered the instructors saying that developers would much rather type and I felt this.

But the one thing that I didn’t credit at the time was the design work was being done for me. These elements I was dragging and dropping all had styles specifically designed for that element. Instead of opening up a CSS document and designing, the developers of the theme did all of the work for me.

Minor Tweaks Done – Now It’s Time to Design

The website was launched and I made the basic changes requested by the client. I had my feet wet with the Enfold Drag and Drop Editor and now I was ready to do the real work.

The reason I was brought in to the mix and hired as a freelancer for the digital marketing company was my expertise in website structure and search engine optimization. Granted, I was not a tenured pro at the time. I was still more educated than 99% of the people in the Ohio Valley. Having me work on your website would give you a better chance to rank and was more cost-effective than using some of the expensive SEO firms in the Wheeling-Steubenville area.

I had to sit down with the marketing director of the franchise and find out what they wanted in the new website. Just because the website was easier to navigate, mobile-friendly, and modern wasn’t enough. What goals did we have?

Creating a Plan and Executing with the Design

Sitting down with the client was easy. The marketing director had a good understanding of what he wanted. He was working with a group of store owners and had to manage all of their personalities and wants. After a few meetings and emails, we had a list of items that we were looking to accomplish.

• Provide each location/store their own individuality with images, videos, and content.
• Maximize the local community vibe (feeling) of each store.
• Create a consistent look for the entire website.
• Make it easier to apply for a job or contact an individual store.

Taking a Look at Our Current Situation and Wireframing the Plan

Almost every goal was dealing with consistency and helping out the individual stores. I have no idea how the process worked for being a store owner. My guess is that each store has their own motivation for increasing sales. One way to increase sales was to increase the level of being found on search.

The old location pages had one image, your basic NAP (name, address, phone) and a very generic paragraph. This information could all be found on Google My Business. Why would anyone need to go to the website? By focusing on the user, we could also get the attention of Google and Bing.

Content First

Always focus on the content. The content is king and I am sure there are a million stock photos saying it. Go ahead and share it on your social media page. Joking aside, if you focus on design over content, you will likely miss the point. Search engines need content to index. Users need content to consume (or get the information needed). If you want your location to have a personality, we need to create content showing that your store is better or more unique.

After talking with several of the store owners, it was very apparent that not all locations had the same offerings and items. Some locations were known for their morning coffee. Other locations had slot machines or gaming rooms. I knew from experience that the Martins Ferry location had awesome hot food (I used to go there on lunch every day in high school). A one-size-fits-all location page wasn’t going to work.

A New Way to Wireframe – Using the Drag and Drop Editor to Design

I have designed websites on paper and I have also used PhotoShop. This time around, I tried something new. I pulled up a blank page in started working with the Enfold theme. I set aside plenty of time and started to drag and drop. The editor was tricky and clunky at first. But soon I got into the rhythm.

Mind you, I didn’t go entirely all digital. I used my paper to block out where I would like everything to go. I had a list of items we should have sections. It was important to be flexible – some locations don’t have all of the same selections. And of course, I had to make versions for several screen-sizes. Mobile First!

Drag and Drop Editor Worked – Presenting the Plan

After several hours of playing around, I created a very detailed page template. Enfold allows you to create templates so you can just open up a new page and hit template and all of the pieces fall right into place. Sure, I would have to use the drag and drop editor to make some changes to placement on some pages – but having a template made life so much easier.

Normally I would just send over an image of the wireframe to the marketing director. There are some nifty tools out there that allow you to create wireframes with functionality, but for most clients, an image is enough. In this case, I could send a link with the sample page. I used a nice Chrome Extension to grab the entire website screenshot.

I made sure to send the link, the screenshot, and also informed that he should be looking at it on several screens (mobile, tablet, laptop, and desktop). Although the website didn’t look tremendously different, there were slight variations based on the device.

We got the go-ahead and it was time to start talking to the individual store owners.

Meeting with the Owners and My Sample Store – Wheeling, West Virginia

The marketing director gave me a list of stores and owners. He had a team meeting and informed everyone of the direction we were moving in. Over the next few weeks, I would be working with one specific store to get the media needed to create a real sample page.

I met with the owner of the 16th Street location in Wheeling, West Virginia. This location was right across from the television news station WTRF and also the Social Security building. They had a gaming room called Ma’ Ducks – named after the owner’s mother.

I grabbed one of the videographers from the digital agency and we made a nice day trip to Wheeling. The owner gave us access to all of the grounds. I talked with Gabe from Em-Media (the photographer) and told him what I was thinking. I showed the mock-up wireframe with my sample stock photos. He and I walked around and snapped images.

I worked with the owner and had a list of potential questions about the location. I tried to identify his main clientele and his perfect customer.

Some sample questions:

• When do you see most of your store traffic?
• What are your popular hot food items?
• Name a hidden gem item that you can buy at this location.
• What does your average customer look like (demographics and occupation)?

After plenty of questions about his needs and goals – and some very store specifics, I had everything I needed. We took off, Gabe sent me the images, and I was ready to create the test page.

Putting It All Together on the Drag and Drop Editor

Now that I had some real information and images, I was able to put it all together. I used all the answers to the questions to write specific content to motivate and attract his ideal customer. These answers also helped decide what images we would use on the banners and display graphics.

Of course, I had to make some general tweaks to the template. I created some template files in PhotoShop with the correct image sizes. I made sure to organize and label.

A few hours later, we had ourselves a website ready for the public.

New Owner, New Conversation, New Page

With our template page approved, it was time to convert all of the other pages. This not going to be an easy task. We had locations all over the Ohio Valley. There were eleven locations in all:

• Martins Ferry, Ohio
• Wheeling, West Virginia (three stores)
• Steubenville, Ohio
• St. Clairsville, Ohio
• Weirton, West Virginia
• Barnesville, Ohio
• Beallsville, Ohio
• Flushing, Ohio
• Shadyside, Ohio

One by one, I sent out emails and made calls. It was decided that the marketing director would go out and grab the pictures instead of hauling out Gabe.

I created a basic checklist for the store owners – asking about specific items in the store. More or less, I asked the same questions I did to our Wheeling owner but put in digital form.

A few weeks later, I had enough information to start transforming each location page. One by one, we were giving ourselves a fighting chance to convert and attract customers/search engine robots.

Drag and Drop Editor Won’t Help with Jobs

We accomplished our goal of creating better individual location pages. We also had to tackle the problem with their paper employment forms. You could print out a job application from the website, but this just wasn’t happening. They would have to keep stacks at each location. More importantly, they weren’t always hiring for every location.

The individual store location pages had the option to highlight if they were hiring, but how can we make this job easier?

Contact Form Not Included (or at least not pretty)

The Enfold Drag and Drop Editor has an element for the contact form, but the styles were awful. There are several form builder plugins out there that make it easy to pretty up the design – but I wanted to go back to my development roots a bit. I decided to use the default form builder and use some custom styling (with Bootstrap).

Not to bury the lead, but the easiest solution was to create a job application form. With a few backend tweaks, I could make the user pick a location from a dropdown and that owner (email) would be the only one to get the submission. This solved our problem.

The main problem with our form was the layout. I had to take the paper copy and translate that into a digital form. Having a single line for each item would make this application 10-miles long. But the default would not allow several items on one line. The drag and drop editor wouldn’t even give you an option to make changes to the form.

Without going into tons of details, I found the best way to fix everything was using some actual HTML and CSS code. It would still be protected from any Convenient internal employee from changing the code (unless they were really looking for a way to sabotage). After a few long hours of hand coding the entire application, we had an online job application that worked.

Final Thoughts – Drag and Drop Editor: Pro or Con

The overall website project went smoothly. Now, there were some hiccups along the way and some locations that were a little more forthcoming with information than others – but we accomplished the task. We created a much better, user-friendly website.

I also had a new appreciation for the Enfold Drag and Drop Editor. I might not have ever jumped aboard if the theme wasn’t already made and using it – but I am glad that I did. The developer in me would rather type everything. My design brain would rather code everything in CSS and do it element by element. But, the practical Eric Hersey knows that having a drag and drop editor helps speed things along and still makes a darn good website.

Maybe we will talk about the impacts of speed another day….