We are an upscale business and are looking for an upscale design.
We get a lot of clickthrough and traffic to our website, but when people come to our site from Facebook and Google advertising, our conversion to new customers seems really low.
We have a lot of information that we need to show. Instead of removing critical information, my strategy has been to divide that information into bite size chunks and make it easily accessible, always one click away. My goal now is to keep our division of information, but make the site appear more polished, professional, and compelling. I am asking for your help on the overall template, and any effective and compelling ways of displaying content on individual pages (such as the landing pages of each main section for our services). I welcome you to introduce new or different plugins, fonts, colors that tie into our scheme, and design ideas. I know that we need more videos, and we are working on those.
It is important that any designs can be implemented relatively easily. For example, the accordion menu mentioned below should be readily available, not needed to be built from scratch.
I like our site, and want to build upon it to take it to the next level, not necessarily start over with it with an entirely new design and structure. I personally like the blue background and overall color scheme (these are our company colors), and how each section is structured via the navigation menu so the user can get to relevant information very quickly without needing to hunt for it. You'll notice that the site is also responsive, with left and right navigation menus that appear on the mobile page size. Any designs submitted need to be responsive.
One major area of improvement is the side navigation menu. Because it is directly on the page, it limits the ability to divide pages into panels and sections that go all the way across the page horizontally. It also limits the width of the main section, so we can't easily add a multiple-column responsive block of content.
In addition, when going through certain sections, the navbar shows your progress, and it's very important to keep this functionality so users know, at a glance, where they are in the process. For example, go to Tools | New Customer Forms and see the nav menu on the left. This shows why the navbar cannot be hidden - users find it helpful to know where they are in the process, especially in cases like this where there are lots of pages to go through.
My first thought is to have an off-canvas sidenav with the following characteristics:
- ALL the way to the left of the main section, not within the main section. If you have a better idea, I am open to it. The menu could be a different shade of blue, or potentially dark gray or something similar. I would not think it would be the same color as the main section. I created an example at http://www.tuckerpups.com/index.php?the_menu=1 . This sample does not have accordion functionality and is not necessarily the font or colors that I would want. It was just a placeholder to communicate the idea.
- Always visible when the screen is bigger than the tablet size. Again, we have divided each section into numerous pages, and would like for them to always know where they are at a glance and to be able to get to other content in the section. This is especially true when going through a multiple step process such as new customer forms as mentioned above. I know the sidenav could be hidden, and displayed when they click a button, but I would think that many people wouldn't realize they should do this, so having it always visible seems the better choice to me.
- Potentially freeze that pane so the menu content is always visible as the user scrolls down
- Multi-level accordion functionality, where when you click on a level, it isolates on that level and hides the rest. As an example, please see our sidenav in the mobile version and go to Our Services | Training.
- In this accordion style, I would like the arrows to be on the right, indicating that there are levels beneath. I like them better on the right than the left.
- Clicking the menu item could be animated (for example, twirling the arrow), although this is not necessarily a full requirement. It should definitely not have an undue delay when clicking.
- The menu could potentially have a photo or other graphic at the top of it that ties to the section you are on. A main icon could be used when a photo doesn't make sense (for example, on the home page).
- We need to keep the feature that highlights the current page you are on
- Because we would highlight the current page you are on within the navbar, I don't believe you would do a mega menu.
- Because there are so many navigation items (and potentially more in the future), I would not think this could be a horizontal nav bar.
On the right side of the screen in the desktop size, it currently shows a "Reserve" button and a large phone number. I am open to displaying this better, as it seems a little strange to have the button above the phone number. It seems good to reveal an off-canvas sidenav when clicking the button that would potentially say something like "Reserve / Contact Us". See our mobile screen size for what I mean. Our business will have new locations in Chicago and eventually in other cities, so this sidenav could show the phone number for each location, in addition to giving the links above that for submitting requests and feedback through the website.
We use the mmenu plugin for mobile sidenav. I would think that both the left and right sidenavs in the desktop size would use the same plugin as the mobile size, so it is not loading two plugins and adding page load time. If you have a better solution than mmenu, I am certainly open to it. If they need to be two different plugins (one for desktop, one for mobile), that could be fine if not causing slower page load. But having only one is helpful so I don't have to maintain two different menus and have them get out of sync (which happens now and is frustrating).
If doing the left nav bar, it could potentially be possible to remove the top menu and incorporate those directly into the sidenav. I could go either way on this. One reason to keep it at the top is to enable the user to always see the top level menu items no matter where they are.
If keeping the top menu, I would like to improve upon its look. For example, the lines between each word are taller than I would like, and the items below are a little blocky and plain. I am thinking the overall menus that appear underneath could have round corners (not each individual item, but the overall menu, like the way the current sidenav works) and the highlighted word in the top menu ("Services", for example) would have rounded corners, not square. The background colors could potentially be gradient as well, but I look for your guidance on these items.
You will also notice that the right hand menu ("Social") doesn't properly overlap the phone number - I tried different z-index combinations but couldn't get it to work properly.
In the main section of each page, I am envisioning full-width, edge-to-edge horizontal sections that possibly alternate in background color, and that have responsive content inside. There are obviously many examples of this for other pages, such as on http://www.dogvacay.com.
In these sections, it would be interesting to have some more flexslider-style functionality, such as customer testimonials that you could scroll through horizontally, and that potentially blur the one to the left and right of what you are looking at. Photos in these sections could be shown in this manner, although we would still have a Photos page that you could go to in each section. I like how the slider bleeds off the page in dogvacay.com, but am open to other better ideas if you have them.
You will notice that I have tried some different colored backgrounds, such as argyle and one that looks like stars. I was trying to not just do flat colors throughout the site. Feel free to introduce different themes like this. I found these at http://lea.verou.me/css3patterns/ but am not fully sold on argyle. Several of the ones on that page don't work in certain browsers due to limitations with linear-radius. But I do like the idea, especially when the texture is subtle, such as "Carbon" and "Starry Night."
The overall blue background color throughout the site could potentially add a little texture, but I am open to your suggestion. If there is texture or some pattern, it should be subtle.
In the sections on each page, I would like your best recommendation for multiple-colum responsive content, again such as on http://www.dogvacay.com. It would also be interesting for the main photo on each landing page to go edge-to-edge (the left edge being to the left sidenav).
I have a minor problem right now with the flexslider plugin. The menu at the top of the page (Location, Services, etc.) wasn't layering over the top of the flexslider until I changed various z-index values. In some cases, it would work in Firefox but not Chrome. I tried and tried, and now the z-indexes are messed up so the user can't advance manually to the next photo. If you can remedy this situation and ensure it works across all browsers and operating systems (including on mobile phones), that would be appreciated.
In each section of our services, there is a page called "Why Tucker Pup's." There is a lot of information to cover, and it is very dense. Wondering if you have ideas for making these more readable and possibly adding some graphical elements. Previously I showed a photo next to each point, but there are a lot of points, and the page was loading too slowly.
In the footer:
- I believe that each page should probably have a sitemap, so am interested in your idea for this
- Our social media icons could be improved upon (especially in the mobile view, where they appear really small).
- I also think we should probably be capturing peoples' e-mail addresses in the sitemap, such as in digitalmarketer.com
I also want clever ways to show offers / coupons and cross promotion. For example, on the boarding pages, you will see a green box beneath the navbar - this would need to be displayed differently if the navbar goes off canvas. It could include a graphic or photo, and should be eye catching.
Please keep in mind that I am trying to keep page load speeds under one second, so can't overload a page with too many scripts.
In addition, I have tried to incorporate many SEO techniques into the pages, and want to keep these intact, such as the first paragraph having text that can easily be found by Google.
The template should be able to incorporated across each line of business and similar type of page. I am not asking you to recreate page after page that would use the same template.
I know this is a lot of information to process. Please feel to call me at 773-456-3967 with any questions.