Reimagining Their Digital Experience
The Manitoba Harvest online experience, no matter the device type, stifled the brand. The digital experience had to be reimagined and road-mapped. All of it.
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.
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.
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.
The Outcome
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.
Progressive Image Loading
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.
One-page Checkout
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.
Product Selector
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.