Giving Olive Oil Site a Tasty Makeover

Giving Olive Oil Site a Tasty Makeover

ecommerce

Last summer a relative was visiting and we decided to go into the local olive oil store. It was an eye opening trip for me and I’m always looking for local businesses in need of a Web site. When I got back to the office, I gave their existing site a look and knew that I could be a big help to them. Below is a screenshot of the top part of their old home page.

One of the first things I typically do with a site is see how it works on a phone. This one didn’t work well at all as there was no navigation. It was about the fifth time I looked over the site that I realized it had a store and you had to click on the credit card icons to get to it. Plus, it just needed a design makeover.

Once we were done, the top of the home page had a new look and it works great on mobile. The very first elements are the phone number and email address. On a phone, a visitor can click the phone number and it will dial the store. Menus have a cleaner look and they translate well to a phone. While not shown on this screenshot, there are also featured products and a box for signing up for their mailing list.

Social media was barely visible on the old site with a somewhat hidden Facebook icon. The new site features prominent icons for Facebook, Instagram and Pinterest as well as recent posts embedded throughout the site.

Some visitors to the site and store will be very knowledgeable about olive oil. While I know it tastes good and has health benefits, I don’t know much more. That’s a perfect reason for the site to have a section labeled Learning Center. On the old site, it wasn’t very inviting and it was easy for me to overlook. Below is an example.

Everything was stuffed on a single page. We broke out each topic into an individual lesson and gave the page a more appealing look. Not shown in the screenshot below is the sidebar promoting other parts of the site or the navigation shown in the earlier shot.

Now visitors can easily see the title of each lesson and click on it to learn more. Now learning about olive oil is more appealing and can help direct visitors to products they can purchase.

One of the most popular types of site on the Web are recipes. The old site had some recipes though they weren’t presented in a way to draw in visitors. Below is a screenshot of the old site.

Just as with the learning center, all recipes were on a single page. We felt it important that each recipe be laid out similarly to the popular recipe sites. The main recipe page simply has links to each of the individual recipes as shown below.

When you click on one of the recipes, it takes you to a detail page. Having all of the distinct pages also gives search engines more content to rank so the site will be found more often. Below you can see how the recipe is laid out and we even included links for purchasing the products needed by the recipe.

What isn’t shown in the screenshot is a slider that links to all other recipes so that visitors can easily navigate through all of them if they like.

Of course the ultimate goal of the site is to provide a way for visitors to purchase products. While the old site had a store, it wasn’t obvious to visitors. Once you got to the store, you were presented with links to some general categories as shown below.

Clicking on a category led to another page with products and more clicks were required to add a product to the shopping cart. This was a very inefficient process and their online sales weren’t living up to their potential. We truly integrated the store into the site as you already saw on the recipe page. Below is the main store page also showing the sidebar.

In addition to the main store page, we also have dedicated pages for each category of products. Some of the products are added directly to the shopping cart, while others have options to select. Below is a product page that allow you to select the gift bag and bow color.

Early in the project I was asked by the owner if I felt this would increase their sales by 10%. I smiled and said I would be very disappointed if we only saw a 10% increase. I’m fully expecting their online sales to double with the new site.

Want to see all the changes? Visit the Cave Creek Olive Oil site and pick up something tasty while you’re there! Want our help in designing a site for you or giving your site a makeover? Send us a note and tell us how we can help.

Tea Site Makeover Fit for the Queen

Tea Site Makeover Fit for the Queen

makeover

For those who aren’t familiar with our area, Cave Creek and Carefree are two small suburbs that often blur into a single location. You’ll find the English Rose Tea Room on Carefree’s Easy Street and it is a fixture who those who want to enjoy tea time. Their Web site was in need of a makeover, especially to make it work better on mobile devices. The biggest need was a menu that could be read on a phone.

Prior to the makeover of the site, several items had been added to the home page without integrating them into the site. You’ll see the old home page below.

It was important for include links to the various sharing platforms such as Yelp, TripAdvisor and Facebook; though we tried to do it in an elegant manner that even the Queen herself would love. You’ll see the new home page below.

One of the biggest changes to be made was to the way menus were presented. Prior to the makeover, you could download a PDF of the menu or large images of each page were available. But they weren’t something you could easily read on mobile devices. You’ll see the previous menu page below.

We kept the ability to download a PDF of the menu and also the images of each menu page, though we tried to display them in a more attractive manner. The biggest change was creating an online version of the menu that would easily adapt to all devices. Even in the downsampled screen shot at right, you should find it easy to read each of the menu items. Yes, that is a real screenshot from a smartphone!

Word of mouth is extremely important for this type of business and there were a lot of nice reviews on the old site. The display of them left a bit to be desired and so we also redesigned that page.

Knowing that new reviews come in regularly, we developed a system so it was easy for anyone, even the client, to add a single review and it would automatically flow into the appropriate locations on the site. Displaying too many reviews makes the site cluttered so we set it up to randomly grab a limited number each time the page is loaded. So if a visitor refreshes the page, they should get a whole new set of reviews.

Blog posts on the original site didn’t look bad, though they did include some extra information that wasn’t necessary. We gave the main blog page a redesign that really makes the new posts pop. See the screenshot below for a current example.

Now that the main makeover is complete, there will undoubtedly be some ongoing tweaks to keep improving the experience for site visitors. Unleashed will make some of the changes, but we’ll also work with the client so they can make some of the changes themselves.

Is your site looking outdated? Does it work well on mobile devices? Don’t continue to lose business to your competitor’s sites! Tell us a little bit about your project and we’ll work a little magic to get your site performing well on all devices.

Makeover of Embroidery Web Site

Makeover of Embroidery Web Site

makeover

Recently we were asked to makeover a site for a company that does custom embroidery. While there were some aspects of the old site that the client wanted improved, some of the requested changes were related to security.

Let’s go through some of the visual changes. The company certainly wants to show off their past projects. On the home page, they had quite a few graphics depicting projects and it was somewhat difficult for them to update what was shown.

Not only was it hard to update, it took up a large amount of space. The graphic above does not show all of the projects. We decided to simplify it by putting the projects into a slider. This took up a lot less space and cycled through all projects. If you hover over any of the projects (as shown below), it tells you the name of the project and a click takes you to a page of project details.

They also have dedicated pages for each type of project. These pages were also difficult to update. Below is the old page showing bags.

While the new page doesn’t look drastically different (see below), it updates automatically as new bag projects are added. Once again, hovering over any of the bags will show the name of the project and clicking on one of them takes you to the details of the project.

Many Web sites included frequently asked questions (FAQs). Unfortunately visitors rarely read them. This site had just such a page, but it was a wall of words that could be easily ignored (see below).

We cleaned it up so that each of the questions was prominently featured (see below). Clicking on a question expands just the answer for that question. This makes it easier for visitors to find just the information they need.

There were numerous other changes made behind the scenes to make the site faster and more secure. Best of all, it will be easier for either Web Design Solutions Unleashed or the client to make future updates. Does your site need a makeover of either looks or functionality? Visit our Contact Us page and let us know how we can help!

Quick Makeover of Delivery Financial Web Site

Quick Makeover of Delivery Financial Web Site

makeover

A friend called and asked if I could fix a couple of things on his Web site. The first issue was an error message in the sidebar where news should appear. There was also a problem receiving information submitted by the contact form. As I hadn’t built the site, there were some unknowns in first finding the errors and then correcting them.

I gave the site a quick look and noticed that it was not the least bit mobile friendly. This is a big deal as 64% of small businesses have a Web site, but only 33% of them are optimized for mobile viewing. Yet it is the way that the majority of visitors see most sites. There wass a great article in The Wall Street Journal recently, The Key to Making a Mobile Site Customers Want, that should be read by anyone with a Web site.

I proposed that I could give the site a quick makeover in about the same amount of time it would take me to diagnose and fix the errors on the site. So that was the direction we took. First, let’s look at the old site and one of the ugly errors.

delivery-before-01

delivery-before-02Above you can see the entire home page from the old design and at right is just the sidebar with the big, ugly error message. The best part about the error message is that it provides the address of the feed that should appear. I tested the feed and it worked perfectly, so clearly there was a coding error.

The original site was not build with WordPress so I first set up a brand new WordPress site and copied all of the content from the old site. As there were only five pages, it didn’t take long to build a replica site. One of the tougher challenges was creating a background with the “binary numbers” on top of tiles.

We could use the old binary graphic as it was only two strips for each edge of the main content area. The new design had to be setup so that it would scale to all screen sizes. It was easy to keep the tiles and I created a new binary overlay so the entire background was seamless and would scale to any size screen.

While it may have been quicker to fix just the two items mentioned, it didn’t take much longer to makeover the whole site. The result is a site that is without the errors of the previous site and it works on all devices. Should any future changes need to be made, they can be easily integrated. Below is a screen shot of the new home page.

delivery-after-01

Do you need a site updated, made over, fixed or changed in any way? We’d love to help! Please visit Web Design Solutions Unleashed for more information and then send us a note telling us something about your project.

Makeover of Christmas Festival Web Site

Makeover of Christmas Festival Web Site

makeover

When we were contacted about making over the site for a local Christmas festival, it was easy to see things that could be improved. The site had used one of the popular do-it-yourself “Web site builders” which limited the look of the site (shown below).

carefree-christmas-before

The first thing we noticed was the large number of menu items across the top of the site. It is simple enough to put them into sub-menus so they aren’t so small and crowded. It also seemed odd to be dominated by colors that aren’t associated with Christmas. Our mission was to rebuild the site using WordPress while giving it a facelift at the same time.

A huge challenge was having a very limited budget and thus very little time to spend on the makeover. So while it is easy for us to see ways the site could be even better, we had to focus on doing everything we could in the limited time allowed by the budget. Below is a section of the home page after the makeover.

christmas-after

This particular event is made up of a series of events with different organizations leading the sub-events. Of course each group feels their portion is the most important part of the overall event and we tried to give them all equal billing on the site. As with many projects, getting photos, text, logos and other content was a challenge.

The best sites, and those that easily come in under budget, are those where clients are very active in providing content for the site. Even pulling photos from the previous site wasn’t a great answer because they were of a low quality. Trying to feature them on the new site showed they were low resolution and less than optimal.

Another heavy focus of any site makeover is to make sure the new site works great on mobile devices. Why? Because around 65% of all visits are coming from mobile devices. If you only view a site on a computer, you aren’t seeing what the majority of visitors will see. In many ways, the new version of this site looks better on a phone than it does on a computer!

Do you have a site that is overdue for a makeover? Please contact us with an overview of your budget and needs and we’ll get your site looking and performing great!

Mobile Makeover for JC Printing Web Site

Mobile Makeover for JC Printing Web Site

makeover

With more than half of all Web traffic coming via mobile devices, it is increasingly important to have a site that works well on mobile. Google also encourages mobile-friendly sites by giving them higher ranking than sites that aren’t mobile friendly.

The JC Printing Web site was originally created by another designer and Unleashed took over the site a couple of years ago. It was already an established WordPress site and the company was very happy with the theme chosen by the original designer. We had run into a few bumps with the old theme, but it made the site at least functional on mobile. That all changed with a recent update to WordPress and the theme developer was in no hurry to release an update.

When the owner of JC Printing contacted us about the site failing Google’s mobile-friendly test, we knew it was time to give the site a makeover with a different theme. Before we get into the changes, let’s take a look at the site on a phone before the makeover. Notice the menus and other content go off the right edge of the screen.

jc-printing-phone-before

We knew the makeover wasn’t as simple as just installing and configuring a new theme. Numerous pages on the site were dependent on specific features of the original theme. This meant the makeover came in two major parts. Each of the pages needed to be rebuilt without the old theme’s features. Once the pages were all rebuilt, then we could install the new theme.

Divi WordPress ThemeEarlier, we had installed Divi Builder on the site to use its pricing table feature. Therefore it made sense to use Divi Builder to rebuilt each of the pages. Then the site would only be dependent on its features rather than those specific to a theme. While rebuilding the pages, we also did our best to make the pages more attractive and also more functional and informative for visitors.

Once the pages had all been rebuilt, we installed the Divi theme and configured it to the preferred settings of the client. Even though we had to edit all pages of the site, the makeover came in under budget! Below is the site as seen on a phone after the makeover. To fully appreciate the functionality of the site on mobile, get out your phone and visit JC Printing!

jc-printing-phone-after