Swap a €30k Budget for Just 5 Days Worth of Dev Time: Relaunching Fresco Cooks.

Fresco Cooks is a B2B SaaS brand that powers seamless cooking experiences for the world's leading appliance brands and home cooks. They originally came to Mawla in 2022 because they needed a new marketing site as part of their rebrand to reflect the company’s growth.

This year, Fresco came back to us because they needed to restructure the information architecture of their website. Above all, they wanted to focus on the B2B segment of their market and highlight how Fresco helps them power better experiences for their customers. This involved removing pages, restructuring how information was presented on the site, and changing the relationship between pages to improve the site’s UX.

The Challenge (well… sort of)

Changing a website’s information architecture involves major changes to a sitemap and that equals a lot of development work. To top it off, it would require the content team to wait for the development team to have all the changes ready, dragging the launch date on and on.

They also asked for our help in updating the website’s design to reflect the new creative direction of the company’s branding. On a monolithic CMS you would usually have to redesign pages or templates from the ground up, adding on to the development time they’d need to buy.

But we originally built Fresco’s site to be highly flexible, so the team didn’t have to worry about any of that.

The Solution: Meet the Mawla Engine

We understand that scaling SaaS companies need their sites to be flexible so they can make these types of major changes within budget and stay agile. That’s why we built the Mawla Engine, aka the framework of all our clients’ sites.

A dynamic site structure is core to the engine. This means that when it changes there’s no loss of SEO value, no broken links, and an adaptable sitemap.

Fresco’s site has an open site structure that can be changed without development effort. It also has a list of flexible content blocks (e.g. “text and image”, “hero section” etc.) in a variety of styles that can be applied to any page and any position, freeing up the marketing team to implement changes effortlessly.

Let’s take a tour of the core stack that makes up the engine. This isn’t the full stack, but we’ll cover the biggest hitters that allowed us to take this project to completion so quickly.

Sanity CMS

Fresco’s site uses Sanity as their headless CMS which means they can change the page structure by just changing a page’s parent. Because we use parent based routing, a change in page structure is as easy as selecting a different page to place the node under. For example a page like https://frescocooks.com/appliances/ and all its children, like https://frescocooks.com/appliances/appliance-partners/get-demo can easily be moved to something like https://frescocooks.com/platform.

This requires 0 development effort.

Sanity’s real time collaboration feature allows the content team to see where other teammates are working. This means developers can work closely with the content team when issues arise and smooth out communication issues.

(No more “hey did you see that Slack message 16 threads ago?”).

The live preview feature also means the content team can make changes to the content and see the result on the website as they type, boosting productivity.

And as for design, Sanity makes updating changes a dream.

Presets in the CMS allows us to define a content block once and insert it in all the places we need, meaning the content team can publish content without developer assistance.

Changing the styling of modules is also simple due to our elegant styling solution. Most styles are not hard coded, but integrated in the CMS. Using smart defaults, any block looks good out of the box. The marketing team can layer in decorations to liven up pages as they want.

In a nutshell, using Sanity as their CMS means Fresco can keep changing content while code changes are made (if needed at all). This means no hard stops, and fast time to market 💪.

Next.js

Next.js is a flexible React framework that gives you the building blocks to create fast web applications. It’s a minimalistic framework ideal for making structured online content and developing a quick-loading website that powers conversions.

Next.js is central to the work we’ve done with Fresco to restructure their site’s information architecture.

• Pages are linked up and routed so they’re infinitely nestable
• A sitemap is auto-generated as you go
• Pages are rebuilt without any manual deployments
• Buttons are then set up to internally link to any pages by name, so your users don’t hit any 404s

In other words, it makes updating your sitemap or information architecture a breeze, Louise.

Vercel / Sanity / Staging Environments

Now we bring it all together.

Vercel is a cloud platform that makes the front-end development process a dream and is used by some of the world’s lesser-known companies like IBM, Apple, and Deliveroo. It enables developers (like us) to host websites that deploy instantly and scale automatically. As a managed service it gives us peace of mind in an area that use to be all risk and complexity.

Vercel & Sanity hand in hand allowed us to test everything we were building and designing in a sandbox environment. Using Sanity datasets we could have one for prod and one for staging. Then on Vercel using their environment variables and github branch deployments we had environments! These allowed us to test functionality, designs on different screen sizes, and fix any bugs before we published the new site. Having all the pages published so you can actually click around is the truly only the sane way to test.

Let’s not forget password protection, being able to protect the whole staging environment and allow password or logged in user access - chef’s kiss 🤌.

Collaboration between Mawla and the Fresco team was made even easier by Vercel’s Preview Deployments which allowed us to preview changes and give/receive feedback on them via comments.

All in all, the staging environment that Vercel makes possible allowed us to take teamwork to a whole new level and collaborate seamlessly with Fresco’s internal team.

Once it was all done it was as simple as copying the staging dataset to prod and voila!

Tailwind CSS

Tailwind CSS is a utility-first CSS framework designed to enable users to create applications faster and easier.

With Tailwind CSS you can build custom designs without writing CSS, keep your CSS files small (to improve your loading times), and it allows you to make styling changes without breaking the design system.

The build size is tiny, it’s really easy to customise, and it adapts to any design. It allowed us to update the design on Fresco’s page’s much faster and implement very specific design and styling requests they had because it’s a framework that offers incredible flexibility.

The Result - Better, faster, cheaper.

TLDR;

• Fresco were able to: make major structural changes to their website in just five days
• Their team was empowered to make these changes with our guidance
• Oh, and they saved themselves around €28,000 because their site was originally built to scale and evolve.

Let’s break down the whys.

Budget - Fresco Saved Around €28,500

Major structural changes to your website involve a lot of development time, and that doesn’t come cheap. The average budget for a project of this size would have cost the Fresco team around €30,000 if they had built their site on a monolithic CMS like WordPress.

We were able to deliver the project in this budget because during the original build we designed Fresco’s site with an eye to the future. Leveraging JAMstack and a Headless CMS made these changes easy for their team to implement with our help and guidance, so we didn’t have to charge for a ton of development time.

Risk-Free With Right Staging Environment & A Team You Trust

Another scary thing about a huge informational redesign is the risk of it all blowing up. This might look like users hitting a lot of 404 pages, broken links, bad redirects, losing key pages, and your SEO taking a nosedive.

But Fresco chose the most risk-free method possible thanks to using the right staging environment and relying on a team they already trust.

Staging is when you produce a copy of your existing website that isn’t actually live to the world yet. This allows you to implement and test out all the changes you want to make in a safe environment before deploying them.

Fresco were able to test everything they were creating through their staging environment so we could catch bugs, make design tweaks, and test the designs on different devices to make sure everything was working perfectly.

And as Fresco is already one of our retainer clients, they didn’t have to face the uncertainty and long process of investing in a new agency. Our goal with all our clients is to feel like an augmented part of their own internal teams. That means we prioritise communication, collaboration, and being on-hand when they need us most.

We’re not an agency who is going to disappear for weeks while we build and leave you in the dark; our job is to be responsive and agile.

From Discovery to Launch in 2-3 Weeks

Fresco, like most series B startups, moves fast.

They don’t have time to go through 2 months of discovery then wait around for another 3 months while their build is being taken care of. That’s why they decided to invest in a modern JAMstack website architecture in the first place: so they can experiment quickly and make the changes necessary to adapt as they scale.

Had they gone the opposite route they would have been waiting for about 2-3 months minimum to deploy all the changes they wanted to make. We were able to go from initial discovery (understanding what they wanted to achieve), to the build itself (5 days of development time), to deployment in just 3 weeks.

When we say JAMstack sites are built to scale and be flexible to your changing needs, we mean it.

Your Scaling SaaS Company Needs a Site as Agile as You

It’s no accident that we work with fast-growing, innovative, SaaS companies: it’s because we don’t just create websites, we build scalable engines. You can’t afford to sink €40k on a website that can’t rapidly adapt to your evolving needs. We’ve seen companies build and scrap websites time and time again because they didn’t invest in a scalable website to begin with.

Don’t make that same mistake. Take the lead from Fresco and ensure your site adapts as your company scales.