Vancouver e-commerce website design and development, with a partial online catalogue, for a local family business

Building a WooCommerce website in a modern, customized Genesis theme, with Canadian talent

The backstory of this family business website in Vancouver was quite interesting. The company itself had been around for over 30 years. It was mainly a brick-and-mortar store, with a customer audience based in its neighbourhood. Or, it was known to those who were aware of the ‘design strip’ on Granville Street, where local art galleries and home stores existed for a long time, serving the ‘gem seekers’ of home decorators. While the retail store had a website, it wasn’t one that was doing justice to the company, or to the quality of products the company sold.

Three major events were happening with the business. Firstly, a new generation in the family was coming in, and taking on more of a managerial, executive role. Secondly, the South Granville retail stores had, for a while, begun to be ‘invaded’ by top-name-brand stores. And third: people were starting to buy furniture and home goods online – even the novelty stuff.

The local business websites were now competing with giants, many of which were based in the USA.

But, still, there is a quaint-ness about the ‘local-ism’ of a Vancouver store. There is certainly an audience of consumers who want to see what they’re buying, before it gets delivered. Plus, many of these high-end furniture options came with hundreds of customization options. True-to-colour swatches and fabrics can only be seen in-person, to know what’s being ordered.

This client’s Vancouver e-commerce web development required the best of both worlds. On the one hand, it needed to uplift it’s brand, to compete with giant retailers entering its market, with attractive online offers. But on the other hand, it needed to continue its physical store operations, encouraging customers to come in to the store to shop, after viewing products via their online catalogue.

The solution I delivered for this family would allow them to eventually transform themselves more and more into the 21st Century, as the company grew. It would allow for e-commerce orders of items that could be easily shipped. For the larger-ticket, ‘complex’ items that they preferred shoppers come in-store for, I gave them the ability to ‘disable’ the add-to-cart button. This way, they could use WooCommerce controls to allow filtering by price, display price ranges and variations, but prevent purchases.

Delivering on a Vancouver web design that communicated the practical attributes of a revitalized brand

The desired ‘mood’ for this design was based on the following adjectives:

Clean, Modern, Beautiful, Striking,  Vancouverite, local, eco-conscious, craftsmanship (wood, metal, cloth natural materials), high quality, fashionable, enduring, service, friendly.

The client didn’t have a defined branding guide that they used in-house for marketing materials. Mostly, they kept things simple (like so many designers do!). They used black-and-white business cards, and sometimes used a hint of silver. Their current logo had a ‘3D’ gradient effect, which needed to be ‘flattened’ as a vector, to modernize it for a new web design. And, lastly, they wanted an accent colour. Formerly, they were using a bright green. But in the end, they decided to go with a teal colour, to add to the ‘flair’ of their design.

In addition, the upgraded design of the site took into account multiple factors:

• The conveyance of their brand qualities and credibility.
• The ability to be found online through search engine optimization (SEO).
• The need to update content often, to promote sales.
• The ability of users to easily browse through a vast array of information, in an extensive catalog.

For that reason, I documented (in much more detail than what is written here), the following goals for their website. This was concluded on after doing a thorough discovery session with the client (which included competitor research):

Entice more people to come into the local store:

We included a home page promo section to showcase the company, and a map to locate the physical store. The header and footer also had contact information easily accessible on every page. And, product pages were designed with buttons to get people to book a consultation, or contact the store for details about a product.

Be findable on search engines and on social media

To help with this goal, I ensured the design would have enough text space on the each page, with heading tag opportunities, and various types of content (such as images). To solve the length and scrolling issue, I used an expand/collapse JavaScript feature, so that text could be ‘tucked away’ for the users who wanted more.

Importantly, I included a strong, Heading 1 tag on the homepage hero section, to emphasize an important keyword. It also had a call-to-action below it.

The WooCommerce system and the Genesis Framework also come with great features to enhance SEO, including with metadata (not just SEO meta tags!).

And, of course, I installed and specially-configured the Yoast SEO plugin for this site.

In the footer of the site, large social profile boxes were used to help emphasize that the company is on major networks – including Houzz. I also included a hashtag as a title for that area, so users could know how to interact with the company on social media.

I trained the client in basic SEO practices, including the importance of keyword-rich titles.

Load fast to keep users on the site

Fast site load time is such a big deal to me. It affects user experience, and SEO. This site was no exception. To go to the utmost degree possible to ensure a faster site load time (especially for a site that required so much imagery), I made sure:

There would be no slider on the homepage! Even though it was a visual type of company, I felt strongly that they could still communicate their value more effectively without a distracting slider. The slider would not only slow down the home page (a very important entry point for site visitors). It also had the potential to lower conversions, not be used, and distract people from the goal of getting to the product catalog.

We could use a classy font that didn’t require loading an unnecessary external resource. Given that the client themselves liked designs that were simple and modest, we went with Arial, which meant not needing to load any Google Fonts (or otherwise).

Resources would only be loaded on pages that needed them. This was done to the best degree possible in the back end of the site’s set up. That meant that, if JavaScript for a special functionality was not being used on the home page, it wouldn’t load there either. Believe it or not, many sites miss this step!

The client would be trained on how to size, crop and compress their images to the right format. Images are major ‘eaters’ of site load time. So this would be important. In addition to multiple Skype screen-sharing sessions, I also produced an extensive content-entry instruction sheet for them to follow and reference, should they have forgotten the finer details of how to update the site.

Allow customers to find and buy products more easily

To help with this, we used built-in WooCommerce widgets, such as product search, price range filters, category menus, and more.

We also utilized a mega menu to allow users to browse the product categories from any page, with a simple hover on the top navigation menu.

And, we had a site-wide search feature in the header of the site, to the right of the menu.

The e-commerce store was set up to show top-level categories, and sub-categories. Each top-level category was given a dedicated archive page, to allow for a ‘drill down’ of site navigation.

And, each product had breadcrumbs enabled, with the ability to set a ‘primary’ category. This would allow users to see where they had landed, and how to navigate their way back up the hierarchy of pages.

For the outlet store, which contained revolving products that would not be sold online, I came up with the solution to showcase an Instagram feed. This would allow the client to do social media marketing and easily update their images, without having to mess with the intricacies of the websites CMS.

Describe the history, reputation and legitimacy of the company

This was done with a homepage that would outlay the reasons for people to choose this company over others. We had icons to demonstrate top 4 values of the company, including that they sold local and eco-friendly products.

We also included, right on the home page, an ‘About’ section, that would welcome users, and give some personality to the company. Most images on the site were highly-staged supplier photos. These would not convey the warmth that one feels when walking into their store, or speaking with the family owners. While the client did not want any photos of their store on the site, having a welcome message, and company description, helped in this regard.

Of course, the typical ‘About’ pages were also set up to show photos of the team, and explain more about the company’s background.

We also explained the price-match guarantee the company had. This would help deter any reasons not to choose them for a specific designer piece they may have been looking for.

The original design also had credibility-boosters in the form of high-density, vector-format supplier logos. The top brands were showcased, to show that this company sold only top-quality products.

This company is also known for their very personalized customer service and knowledge on interior design. They offer design consultations. We made that a feature on their homepage, and on the sidebars of interior page templates. We brought in the ‘craftsmanship’ and ‘quality material’ design attributes by using a wood texture on the background of these spots.

I did the copywriting of major headlines on the home page, which helped with this a lot, too.

Publish e-commerce products with ‘extra’ info

Many of the company’s product lines were complex. They came with multiple configuration options, or several customization options. A table could come with a specific set of legs and top. A sofa could be ordered in a specific fabric. And so on.

On top of that, assembly instructions, detailed measurements and product media also needed to be displayed on the site. The client wanted to fully inform and educate web visitors, before they came into the store. It would help with the sale; they could learn as much as possible without the hassle of calling in to ask. But then, they could come in when they were ready to order, and staff would be ready to help.

To help with this, we added an extra tab on the e-commerce product pages, where the client could enter videos, downloads, or other information.

In the ‘regular’ description area, we made ‘highlight boxes’ for the client to use, as well as a custom horizontal rule, to divide information with a visual ‘touch.’

The design of file type icons was included, so that PDFs or other files would automatically show up with an icon next to their download link. This would indicate to users that they were about to download a file, instead of visit an external link.

Several photos could be uploaded to each product, of course. And, in typical WooCommerce fashion, each product was able to have select ‘related products’ or ‘cross linked’ products. So, if one product came with customizable add-ons, those would show on the product’s pages.

Features of this Vancouver e-commerce website design and development project

• Canadian e-commerce web design and development using WordPress, WooCommerce and the Genesis Framework. Fully responsive design.
• Site plan and content structure organization.
• Mega menu to showcase columns of product categories.
• Utility bar for pertinent information users would always need to access, such as their cart, or the store phone number.
• Overlay search bar in the site header, to show on all pages.
• Breadcrumb navigation feature on all product pages.
• Contact information visible in the header and footer of all pages.
• Strong social media promotion with large social profile ‘box-style’ links, icons, a hashtag headline and an Instagram feed.
• E-commerce area with complex search and categorization for specific products, including a price filter.
• Added tabs plugin for displaying extra information about products in an organized way.
• Ability to ‘turn off’ the ‘add to cart’ option on some products only.
• File-type icons as part of a retina-friendly icon font, to show for downloadable file links automatically.
• Custom form design, horizontal rule design, and ‘call out’ boxes. Custom blockquote design, call-to-action buttons and typography scheme.
• Customizable widget backgrounds, including a wood texture.
• Blog area, with an after-post widget area designed for a call-to-action.
• Newsletter sign up form and call to action.
• Vector-format map to display store location in a ‘welcome’ description area.
• Modernized, ‘flattened,’ revised logo to show in SVG format for high-density displays.
• Fast site load time and SEO efforts in the core of the site’s design and set up.
• Client training on image formatting for optimal site load time, SEO best practices, and other site content input instructions.

Accolades from the client:

We hired Joyce for a complete rebuild of our WordPress e-commerce website. We worked with her for several months as this was a massive undertaking. She was attentive, professional, timely with deadlines, and extremely knowledgeable throughout the course of this project. I would not hesitate to work with her again in the future and I would recommend her to anyone looking for a similar project (WordPress e-commerce developer, or internet marketer)!

-Julie Wilson, Operations Coordinator at Industrial Revolution