Breaking the Code Barrier with CMS Implementation

How Order-In used Webflow's CMS stack to streamline content creation and automate the tedious parts, ‘eliminating the middle-man.’

Learn how a CMS can make design a breeze, save you time & increase your conversions.

What you’ll learn

How to break the code barrier between your teams

Nowadays,  your teams shouldn't be over-reliant on one another (e.g. marketing should not be reliant on tech for content changes). The process of hard-coding content tends to exist in companies with legacy tech, or startups still refining their infrastructure. We’ll show you how to instead make content management a one-step process, in the hands of those who manage it.

How to build a CMS engine & create personalised landing pages at scale

Hard-coded content is limiting once you go larger scale, let’s say—if your marketing team needs landing pages for a new campaign. Their request joins the dev backlog and competes for priority, which can be a big progress blocker. We’ll show you how to set up a CMS with landing page  ‘templates’ and easily edited content ‘modules.’ This will give your non-tech teams the ability to create and edit quickly, without engineering help. When done right this process is as easy as clicking, dragging and dropping on the actual site, or selecting content you want from a menu.

Best-practice CMS set-up: Webflow

In our experience, the best CMS tools are Webflow, Prismic and Contentful, but your development, pricing & deadline requirements will be the core deciding factors. In this case study, we’ll run through some basics of these platforms, then deep-dive into Webflow and how we set it up its CMS for our client Order In.

About Order-In

Order In is a B2B marketplace offering corporate catering to businesses across Australia. As a 20 year old company with hundreds of partners, they have plenty of content and plenty of traffic.

Industry: Technology / Food & Beverage
Employees: 60
HQ: Sydney, Australia
Founded: 2000

What we delivered

No complicated numbers,
just results.

20H+ month

A CMS stack streamlined content creation & editing by automating the tedious parts and ‘eliminating the middle-man.’ This let staff focus on higher value tasks (engineering could focus on building software, marketing could focus on optimising content).

%
conversion

Delivering more personalised content naturally improved conversion significantly. Customers were engaged with relevant content during all stages of their interaction, with a focus on acquisition in this case study (landing pages).

Growth Culture

Together with improved CMS tools and processes came the ability to shift culture towards hypothesis and data-driven experimentation at increasing velocity. Marketing was able to iterate quickly and act on their insights from every experiment.

Where Order-In Came From (the status quo)

Independence
With no self-service option for marketing to push new content, they were relying on engineering to hardcode content. Their custom, legacy site was powerful, but not accommodating to non-technical staff.

Experimentation
The dependence on engineering shifted focus towards pushing proven strategies, and away from experimentation with new content.

Personalisation
Limits on LP creation created gaps in content personalisation and relevance. For example, some campaigns for suburb-specific ‘corporate catering’ searches were pointing users to broad landing pages which shared much of the same content (copy, testimonials, images) and lacked targeted information (e.g. catering recommendations). They recognised that getting this right would amplify their SEO dominance, and increase campaign conversion.



Founded in 2000, Order-In has naturally accumulated a rich database of great content including imagery, copy, blogs and comms. Together with effective keyword use and strong brand equity, they have dominated google rankings historically. As the company matured into its 20s, management identified a few areas for improvement, specifically around independence of teams, their ability to experiment and optimise quickly, and their ability to push relevant content at scale.

They also recognised that many of their website's older UX & design elements were no longer best-practice, and similarly needed to be re-scoped and implemented.

Picking the Right Solution

It was important to avoid a gung-ho approach (i.e. just throwing a web building tool at their marketing team), as these tools tend to come with two problems:

  • You need to create pages manually (sometimes as monotonous & inefficient as hard-coding content) OR;

  • They can be finicky and dynamic (you need cross-team collab to get set-up, and the CMS structure will evolve over time)

If you are a fresh startup or your strategy does not involve content, you are better off accepting problem 1 and building pages manually. There are plenty of tools you can use, including Instapage, Leadpages, Unbounce and Webflow. A CMS engine is overkill.

If you are an established business or scale-up with a content-focused strategy (like Order In), you should avoid problem 1 at all costs. Instead, you will need to overcome problem 2.

Our blog post Choosing the best no-code artillery (LP builders vs CMS) provides a detailed guide into all the relevant factors to consider when choosing a tool. However, in general - the best three tools we recommend are Contentful, Prismic and Webflow.  Contentful is often the choice of more technical teams as you can deliver with the programming language and template framework of your choice, and its content editor is easy to use for non-tech teams. Prismic is great for similar reasons, giving you full flexibility for your content model, with some powerful, nifty tech that lets you handle ‘slices’ (i.e. optional content) with ease.

In most cases, we recommend Webflow as the preferred solution, especially if ownership will fall with your marketing/growth team. It is significantly cheaper, very intuitive and delivers an equally powerful CMS, with little dev help required. This was the tool Order In chose.

Building static & landing pages, & content blocks

Order In saw the migration to Webflow as an opportunity to refresh the structure and design of their pages.

The first thing we did was create static pages with new designs (home, about us, contact us pages etc. ) in Webflow using their updated style guide, as well as best-practice UX & UI.

This was a seamless process, as we could work together quickly with their team. Webflow has an ‘editor access’ mode which allowed marketing to log in directly into the platform from the new pages we created by adding ‘?edit’ to the end of the URL. From here, they can simply click and edit, and replace copy & images on the site itself.

The finicky part of the CMS set-up came next with dynamic landing pages. 

The first step was to put together a list of all possible sections, or ‘modules,’ that they wanted in their landing pages. We then broke this down into the elements that made up each module.
We kept it very simple at this step - a google sheet was fine. This is an excerpt from our first draft:


Which modules you choose and their design should be guided by a combination of best practice UX/UI, competitors & your own creativity. Having an experienced UX designer is always highly recommended.

We then designed each of these modules in Webflow (with placeholder content), creating a ‘master page’ with all of them for marketing/management to review. Depending on your timeline and capacity to familiarise yourself with Webflow, you may choose to build these modules yourself, engage a contractor like ikaros to work with you to build it, or outsource it to a freelancer online.

Next, we came up with the structure of their ‘boilerplate templates.’ A boilerplate template is a page with a set module structure. This means one template creates dozens of pages with exactly the same modules, the idea being that you then simply select/edit the content elements you want within them.

These templates were split based on Order In’s services, their business objectives and industry best-practice.
‘SEM templates’ were shorter pages focused on conversion, featuring less dense modules and an emphasis on imagery & CTAs. We split these into multiple templates based on different services offered (e.g. corporate catering vs kitchen supplies required slightly different modules).

‘SEO templates’ were longer, containing more informative modules and focusing on engaging content that effectively used keywords. ‘SEO location’ templates were duplicates with an additional ‘recommendations’ module that would show specific, nearby catering options.

The result is a template that, in draft form, looks like this:


Now, we were ready to start building out the CMS engine. We did this by turning the modules and templates we strategized into what Webflow calls ‘collections.’ This case-study will provide a general overview of the process, but Webflow itself has fantastic documentation to guide you deeper through the set-up: https://university.webflow.com/article/cms-collections

This may seem confusing at first, but it is very intuitive once you get your hands on it practically. The best way to understand the general set-up we did for Order In is to watch this quick overview below.



First, we created module collections. For each of our dynamic modules (benefits, testimonials, recommendations etc.) we defined the elements that made up each ‘content block’ within it (name, image, copy etc.). We then started building our collection database by adding entries (e.g. A ‘Great Variety’ entry to the benefits collection featured its name, a unique icon & copy).

Then, we created our boilerplate template collections. These collections are for entire landing pages, so we had to allocate the modules that made up each page. This means that when defining content, all we have to do was select the entry we want (e.g. Select ‘Great Variety’ as the benefit you want from a drop-down menu, Webflow then auto-fills the icon and copy on the page you create). 

You can look at this page as an example. The structure of this page is consistent across other SEO location pages (i.e. this is a SEO location template collection), however we have created a unique page for Sydney by picking-and-choosing predefined content blocks in webflow (e.g. we picked relevant imagery, benefits, testimonials & services; most importantly picked relevant recommendations from the recommendation collection and so on). 


Reaping the Benefits: Personalised LPs at Scale


With this infrastructure set-up, creating landing pages was a breeze for the marketing team. They could log into webflow, create a new entry in their boilerplate template collection, and simply pick the content they want from a drop-down menu. Adding new content was as easy as editing on the live site, or adding a new entry to one of their module collections. 

The dynamic nature of these modules meant they could create hyper-personalised pages. Location-specific landing pages had targeted copy and targeted recommendations. Industry-specific landing pages had targeted testimonials.  In reality, the CMS allowed them to create every possible landing page they wanted hyper-personalised, to even the most nuanced detail. This meant that customers reaching the page were immediately engaged with highly relevant content. The bottom line, it saved A LOT of time, gave their marketing team a lot of independence and best of all—increased conversion.

A CMS engine is an invaluable asset for any business or scale-up that produces a lot of content as part of its strategy. You can make ongoing improvements and create campaigns without relying on engineering. In the end, your terms will be able to focus their talents. Devs can focus on building your product, and marketing can focus on getting it in front of customers.

Leave it with us.

Can't wait for us to get in touch? Call us on 02 8311 8689.

Let's Chat
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.