Background
Invenda creates industry-leading automated retail solutions and were looking for a new industry-leading website to showcase their products which include vending machines, smart fridges and micromarket kiosks. They were looking for an agile partner that could create their site iteratively with a lot of self direction, and one that could do this with a modern stack utilizing a Headless CMS, static site generation while maintaining a stellar content management experience.
Dean Taylor
Head of Design
“The team at Makers' Den were incredibly helpful and friendly. They pointed us in the right direction many times and now we’re very happy with our marketing website. We are very happy to continue working with them on future projects!”
The first steps
After the initial outreach, we educated them on the necessities of marketing websites, aligned on the cloud environment with their tech team, and they produced an initial rough wireframes of their site structure, we created an estimate broken down by the foundations of the website, "building blocks" (i.e. unique sections on a web page), and each page to be published.
Pages are relatively cheap to produce, because it's just content management work in Storyblok. The foundations are also quite fast since we've built dozens of websites with the same stack and can leverage our previous work. The biggest cost is the unique "building blocks" which are unique sections on a web page - that can be re-used across the website. A marketing site will usually have 20-30 unique sections, and each can usually be heavily customized to have different configurations.
If clients do not know how many sections they're likely to need, we can make assumptions based on common requirements, since we have a lot of experience of implementing marketing websites for B2B companies.
When our estimate and initial offer was approved we could proceed and schedule the kickoff.
How we worked together
We started off with a 2-hour kickoff where the Invenda stakeholders and our team went through all the requirements, by walking through the initial wireframes and the plan for the page hierarchy. We set up our weekly sync meeting and created Slack channel for ad-hoc comms. We set the forecasted delivery date and milestones already based on our estimates and the team at hand.
In our weekly sync meeting we would walk through the new designs, as well as demonstrate the implemented pages in a demo environment and in the context of Storyblok. Afterwards we would prioritize the tasks for the next week.
Above the fold on the homepage
The technical setup
The website is architected using best practices for marketing websites:
Content organized in Storyblok in a way intuitive for the content managers.
Support live previews for Content Managers so they can see what their content will look like as they edit.
Intuitive ways to control all relevant technical SEO including page H1, meta title and descriptions and OpenGraph image data
Automatically generate SEO relevant data, like site maps and JSON+LD for breadcrumbs, article metadata, etc.
Easy to create lead pages, with performance marketing setups so the visitor is more likely to convert
Top notch performance with high scores on Core Web Vitals
Best performing GDPR-compliant cookie consent platform setup, integrated with Google Tag Manager, and setup to drive visitors to approve efficient re-targeting/re-marketing
The core technologies used were:
Typescript - We aim to do everything with Typescript, and it’s what we’re really good at.
ReactJS - The frontend framework of our choice. Usually a central part of all our projects.
NextJS - We don’t like re-inventing the wheel, so leveraging existing ReactJS frameworks is our preference. NextJS was a really solid fit for this case.
Storyblok - Our Headless CMS of preference. It’s great for managing content, usually for marketing websites, but since this showcase was presenting marketing websites, it was a stellar fit.
TailwindCSS - Among the most popular styling solutions currently. It’s also a really good fit for marketing websites due to it having no runtime as most CSS-in-JS solutions do.
Traditional Feature Section
The results
Invenda launched an industry leading marketing website, with an intuitive content organisation, easily managed by their content managers and marketers, and that out-performs their competitors' websites. It incudes integrations to their CRM, marketing tools and will allow them to elevate their online marketing to generate high value leads, propelling their business to the next level.
