|Project:||Marketing & Ecommerce Website|
|Categories:||Strategy, IA, UX, Design, Development|
Manitoba Harvest is literally the pioneer and global leader in branded, hemp-based foods. In the mid 90s, the founders researched and then successfully lobbied the Canadian Government to change legislation to legalize production of industrial hemp as an edible food product. Since 1998, they have never looked back. They have grown their production, suppliers, product lines, team, retailers, consumers and sales. The Manitoba Harvest name is virtually synonymous with the hemp food industry. They dominate the category in Canada and US and are available in over 7,000 retail locations.
Manitoba Harvest is literally the pioneer and global leader in branded, hemp-based foods.
All was not so rosy with their digital. Their digital and e-commerce experiences had become dated and out of step with consumers expectations. The Manitoba Harvest digital experience, no matter the device type, stifled the brand. Site performance was poor - as can be expected from falling behind with technology. They were missing a critical opportunity to educate prospective consumers who often had misconceptions around industrial, edible hemp. Just as importantly, internally there were manual and redundant processes in operating their growing e-commerce business.
The digital experience had to be reimagined and road-mapped. All of it - the messaging, imagery, structure, organization, education, technology, e-commerce flow, platform selection, integrations with 3rd parties and more. And not just for today, but as a foundation for continued growth and optimization in the future. As big a task as this was, we knew from their passion, overall ambition and collaborative way of working that our client partners were up for it. We certainly were. After all, there is nothing better than solutioning for awesome clients, a killer brand and amazing products.
There was a significant strategic component to our work which was expedited through a number carefully constructed collaborative sprint workshops. These included role definition, project phasing, sharing data on current state, understanding internal pain points, goal / KPI setting, crafting personas, use cases, exploring navigation options, reviewing inspiration, and sketching key wireframes. This created a powerful joint team understanding, alignment, speed and momentum.
From there we provided sales analysis, budget scenarios and business cases for a variety of potential e-commerce solutions. Our UX and UI designers worked collaboratively with the in house design team and content team - creating not just the site but an HTML style guide to be leveraged ongoing. We jammed with their educational team to create a unique and branded hemp education experience named and branded - Hemp Academy. Here users could become a hemp expert after passing a skill testing quiz.
The new responsive Manitoba Harvest site was built on an innovative combination of WordPress and Magento, which allowed for unprecedented customizability, updating and ease of use that was second to none. One that gets the best of both respective platforms - content management system (CMS) and e-commerce.
We worked with the internal IT team, customer service and 3rd party vendors Ebridge Connections, Avalara Avatax and CyberSource to integrate into their ERP system and to automate some of the more tedious internal jobs like tax calculation, order import and export, and shipping notifications. All abiding to PCI DSS Level 1 compliance and Sarbanes – Oxley recommendations.
We had to go further. We weren’t settling for a wonderful designed site with great user and client functionality. A remarkable digital experience only takes place when the site is performing. Perceived speed is everything and there’s a growing body of research charting loss in traffic and sales at just slightly slower site speeds. We meticulously poured through our site performance to ensure every best practice was leveraged to enhance, not detract from, the performance and experience.
The result is a lightning fast digital experience no matter the task or the device. The brand has a stage where it can thrive - big, bright, bold and beautiful. More than cosmetics, the experience caters to a growing number of consumers and helps them understand hemp, easily discover products and explore ways to integrate hemp into their household diet. Should they want to buy online, the ecommerce experience is seamlessly intertwined with the marketing experience and is invisible to the consumer - seamlessly integrated with Manitoba Harvest internal operations.
While still early and being mindful of client confidentiality, the high level results include significant site performance levels, a ridiculously low bounce rate and high engagement levels.
With such a large scale project with so many moving parts, it’s easy to miss the little details that make the user’s lives that much better. We are always searching for the perfect user experience and to us, that means nailing the micro-interactions that elevate good user flows to remarkable ones.
Progressive Image Loading (Lazy Load)
No one enjoys waiting for content to load so they can use a site, and with this solution, you don’t have to.
Lazy loading takes high fidelity images and serves them up initially as blurry low-quality images based on the user’s connection speed. Once the baseline content is loaded and the site is useable, it goes about the job of upping fidelity of images, starting with the visible ones first, until they hit their highest resolution.
The result? A blazing fast site even in those pesky image heavy recipe centers.
We combined all of the following elements into one page:
- 3 step checkout, including shipping and tax calculations
- Running total displayed and updated as you select options to make users aware of the total price they were going to pay
- Guest and signed in checkout.
Why did we do that? Simple... FOCUS. We want to keep the user focused on executing the task at hand and let them do it as fast as possible.
Converting online is about many things but mainly it’s about instilling a sense of confidence in the user. Users want to be sure that the size they pick is the size they want. So, we helped.
We designed a product detail page that updated all of the relevant product information in real time. Not sure what size to get? We’ve got you covered. On top of displaying the size measurement, we displayed an icon of the packaging, changed the image to match the size and changed the nutritional information too.
The result? A buying experience that feels so much like your local grocer that you may find yourself wondering where the bread aisle is.