Cogworks - dynamicvines.com

06 August 2021

The Cogworks team are renowned for their work in developing Umbraco websites, so when they turned their skills to pairing Umbraco with Vendr, a full bodied eCommerce solution was made.

Cogworks - dynamicvines.com

Who?

Cogworks is a collective of design, development and strategic experts based in distributed remote teams located between the UK, Poland and Colombia! We are specialists in cross-platform development ranging from the .NET infrastructure to Microsoft Azure and bespoke application development.

Since the beginning, we have always worked with Umbraco (not just because we were one of the first Gold Partners) but because we trust it. Umbraco is open source and fits with our ethos to collaborate with our team, with our partners and the wider open source community so we can absorb and release innovative ideas that solve real business challenges every day.

Our clients are our partners, and we work with them in close collaboration using Agile practices to find the best solutions to reach their full digital potential. (We love this way of working so much that we have condensed over 12 years of Scrum and Agile experience into one proven methodology, Cogworks Agile Workflow.)

Dynamic Vines are the UK’s leading importer of premium biodynamic wine, selling to the UK’s top restaurants and bars, as well as trade customers and the general public. A passion for storytelling threads through everything they do. For their connoisseurs, restaurant owners and new customers, it’s essential that both online and offline, the integrity and quality of their wines is protected through a fine-tuned educational experience.

Cog Works

What?

Dynamic Vines are wine importers with a story to tell. In one sentence, a wine label can tell a plethora of stories that those who love wine want to hear, like, where the grapes are picked, who the producer is and how they came to start their adventure biodynamic wine.

When you ask a leading wine importer about wine face-to-face, it won’t be long before you’re learning about the rich history of the area or why the lunar calendar is essential to winemaking. That’s the beauty of conversation, right? It is this natural flow from one subject to another that Dynamic Vines wanted to encapsulate with their digital experience.

Dynamic Vine’s existing site presented obstacles that made the intended user journey problematic for different users; trade, members and the general public. Built on Umbraco v7 and Shopify, the site lacked overall unification of user experience and brand continuity.

For content editors, the two solutions presented an inconsistent back office experience as both content (Umbraco) and ecommerce (Shopify) were managed separately from one another displaying different back office user interfaces that made it difficult for Dynamic Vines to navigate between content and shop efficiently.

For users, browsing between different areas of the site meant a disjointed user experience. This is because the Umbraco part of the site was initially intended for trade customers to order and learn about producers, while the ecommerce part of the site led to a set of product pages designed for the general public to purchase wines or a Dynamic Vines membership.

To sell wines, welcome new members and tell stories in a way that all users understand, Dynamic Vines wanted to clarify the ordering experience and create a clear membership sign-up system that yielded the correct discounts for purchases. It was also important to create alternative, educational user journeys (besides the typical shop entry route) that emulate the type of insightful experience a customer would receive in person.

In the back office, they wanted a friendlier way to edit and control their membership system, payments options and sizable catalogue of product data. The overall design and functionality of the site created a confusing user experience that worked against the seamless storytelling and educational browsing experience they desire for every user.

Cogworks took on a full redesign and rebuild using a blend of custom Umbraco v8 development and great out-of-the-box features from Vendr.

Why?

Dynamic Vines were already on Umbraco, so it made sense to upgrade them to the version with rich, flexible content-editing options.

As Umbraco Gold Partners, part of our ethos is to stay updated with Umbraco news, so we heard about Vendr as a discussion in the Umbraco community. Plus, we’d already worked with a very similar solution on Umbraco v7 projects, Tea Commerce.

For our Umbraco certified developers, Vendr is simple to implement, but flexible enough to extend. Working with a non-restrictive solution like Vendr (thanks to the friendly developer API with many extension points) we were able to get our custom development “hats'' on to meet our clients requirements.

Vendr offers a range of great ecommerce features out-of-the-box. By using the already configured checkout process (a well-developed feature that is easily integrable with external payment services) it meant that our team could focus on developing useful custom Umbraco solutions.

Vendr’s flexibility enabled us to deliver complex requirements required by Dynamic Vines to match their existing business model, without them having to change the way they work. It was exciting to confirm to our client that by pairing Umbraco and Vendr, the existing fragmented approach would be solved as both solutions work together seamlessly.

How?

The project was a blend of Umbraco’s flexibility and ready-to-go functionality from Vendr. With requirements including a complex membership and pricing functionality, better payment options and a seamless editing experience, it made sense to upgrade to a version of Umbraco that understands modern editing. Here’s how we implemented and extended Vendr to meet Dynamic Vines needs:

Product import. Vendr works well with other Umbraco packages, so we could easily import Dynamic Vines' entire product catalogue of nearly 1500 pre-tagged product pages using one of our favourite Umbraco packages for v8, CMS Import.

Though it did take some work to get the data ready for import (as Vendr requires a specific formula for importing the prices), it is worth it when the alternative is to either manually complete the content population or write a custom script to import data.

Unified user experience

We built custom Umbraco templates for individual wines, wine boxes and gift vouchers. Vendr does come with a basic shop structure, but due to the nature of Dynamic Vine’s products, with many variants, complex tagging and cross-linking to other pages, we built custom Umbraco templates linked to the Vendr workflow through price fields.

The templates work to bring trade, members and the general public a consistent user experience. Building custom block editors with Umbraco allowed us to add rich content to product pages without disrupting page’s core information and calls to action. For Dynamic Vines, new Umbraco templates mean content editors can select from an adaptive range of modules for future content creation that won’t negatively impact the overall user experience.

Alternative user journeys

Dynamic Vines wanted to capture the storytelling experience throughout the rest of the site without missing any profitable opportunities. We developed a custom Umbraco module for related products using Examine to query and filter items stored in their index. Dynamic Vines understand what their customers look for in a wine, so we could create sophisticated filtering that pulls through products in order of importance, first by related wine box, then producer, region and finally grape.

We used the same type of advanced Umbraco filtering to create an alternative user journey aside from the normal “shop” route. So that Dynamic Vines could tell the full story behind every product, producer and place we placed the same type of advanced Umbraco Examine filtering for related products throughout the rest of the site so that users could make their way through interesting stories and not miss out on any wines they might like.

We reimagined Dynamic Vines membership sign-up process, discount offerings, payment methods and payment management to appeal to every end user using a combination of custom Umbraco and Vendr implementations:

Clearer sign-up process

To ensure a smooth onboarding process we adapted the standard Umbraco membership functionality and integrated this with a custom registration form. We also integrated this with Stripe, so once they had signed up they were automatically charged and registered for the monthly paid subscription.

Specific shipping discounts

Using Vendr we were able to apply the specific discounts that Dynamic Vines required for the different levels of memberships that they offer, which is ‘friends’ or ‘family’. Vendr’s flexibility meant we could manage discounts to suit Dynamic Vine’s business model. Their out-of-the-box discount offerings made it easy for us to generate automatic and one-time discount codes such as a 10% discount with a specific start and end time available to new Dynamic Vines website visitors who had signed up via email.

Although Vendr gives you great manageability and choice of discount options, we extended Umbraco to connect specific shipping discounts to the correct membership type, one of the more complex parts of the project as it required applying custom logic to influence development.

Custom payment providers

Vendr does give you some great out-of-the-box payment options but if you need something a little extra, it’s completely pluggable. Dynamic Vines needed a payment processing platform to take care of both shop transactions and recurring monthly membership payments. So with requirements on this project a little more complex, we opted for a custom implementation of Stripe (the API that not only accepts payments but helps to set up recurring plans and send invoices).

Vendr’s ability to connect with external APIs like Stripe, means much more freedom to explore different technology stacks, resulting in more personalised and rich front-end experiences for users.

Stripe customisation

So that Dynamic Vines could manage their memberships in the best way possible, we introduced custom payment views for Stripe. Getting a more well-rounded status of each customer subscription status was an important aspect for Dynamic Vines, so we developed a view that assigned specific subscription details to specific members that would let the team know if there were any issues to resolve. Though it was important to get it right in the CMS back office, we wanted to make the user experience easier too. The development team also implemented custom automation that partially filled in any signed-in member details to ensure a faster time to checkout for Dynamic Vines customers.

We also brought Stripe into our DevOps practices at Cogworks to ensure optimum levels of security in all environments, enabling more control over passwords and configurations, preventing them from ever being stored in the Umbraco back office.

Results

Vendr’s flexibility and friendly user interface gives Dynamic Vines the tools to manage memberships, view analytics and update discount rates going forward with the chance to get creative. With the out-of-the-box gift card editor available from Vendr, Dynamic Vines can now create and issue gift cards. This functionality from Vendr understands the face-to-face nature of their business too, with the option to manually amend the remaining balance on the card in the event of an in-store purchase.

Following the launch of the new website, clarifying the membership system from both a back office and frontend perspective has contributed to Dynamic Vines exceeding the target they had set pre-launch to achieve more membership sign-ups!

For the future, Umbraco v8’s extensive capabilities for content-editing means that the Dynamic Vines team can now create layers of complex content from adaptable templates without getting lost in the user interface. What’s more, the right data is fed through to Vendr through its workflow so that their team can view their analytics dashboard easily from the same back office.

Final Thoughts

As an Umbraco Gold Partner, we’re always looking to contribute to the open source project and well written packages, like Vendr. The flexibility of Umbraco and Vendr together can help smooth business operations whatever the requirement.

For future ecommerce projects we have a few ideas such as creating a custom view for each specific member that will help businesses gain a more informative view of each customer. Vendr is a fantastic standalone ecommerce solution, but its flexibility and integration with the Umbraco backoffice UI is something we will definitely use again on future ecommerce projects.

We look forward to the future with Vendr.

Cogworks.