They needed to migrate and overhaul 2,500 pages while replatforming to a new CMS, and enact a comprehensive site redesign under a total rebrand—in just three months.

Riotters, an agency that thrives on innovation (and, evidently, ambition), had a solution: Payload.

THE CHALLENGE

A complete digital overhaul

This project was, in a word, daunting.

Migrating 2,500 pages to a new domain demanded more than a mere data transfer; it required a complete overhaul—rebranding and redesigning within a narrow timeframe.

Challenges were magnified by previous CMS limitations with HubSpot, with issues like struggling web vitals, troublesome codebase maintenance, and ineffective version control.

Riotters required a solution that not only facilitated swift and seamless execution but also the ability to offer a best-in-class performance for a best-in-class client.

A migration marathon

Riotters needed to manage the migration of 2,500 pages—without compromising SEO or user experience, a monumental task even under the most forgiving of deadlines.

Overcoming roadblocks

Riotters struggled with the Bizee's existing CMS, requiring a more robust solution that provided enough flexibility to build what they needed—without limitations.

Design to development workflow

Given the condensed timeframe, the new design would need to be built at light speed, and delivered in a way that allowed editors to manage content effectively, collaboratively, and with immediacy.

Bizee CMS showing field types such as hero variant, page title, hero image, links, etc

THE SOLUTION

The power of a great developer experience

Enhanced by TypeScript, Payload was transformative in ensuring error-free, maintainable code and streamlined design integration.

Efficiency with migration

Payload's robust architecture provided Riotters with the tools necessary to efficiently migrate all content to the new domain.

Component flexibility

Roadblocks were mitigated by Payload’s limitless nesting capabilities, allowing Riotters to build complex data structures with ease.

From Figma to Payload in record time

Riotters transformed their design workflow, bridging Figma concepts to development—eliminating the barriers between ideation and execution and accelerating the project timeline.

1const HomeHeroDefinition = (condition: Condition): GroupField
2=> ({
name: 'homeHeroVariant' 
interfaceName: 'homeHeroVariant', 
type: 'group',
admin: {
condition,
8},
fields: [
  richText ({
    name: 'title', 
    label: 'Title',
  }),
  richText ({
    name: 'description', 
    label: 'Description',
  }),
  {
    label: 'Image', 
    name: 'media', 
    type: 'upload', 
    relationTo: 'media',
  },
  {
    label: 'Mobile Image', 
    name: 'mobileMedia', 
    type: 'upload', 
    relationTo: 'media',
  },
  {
    name: 'button', 
    type: 'group', 
    fields: ButtonDefinition.fields,
  },
], 
36});
37
38export default HomeHeroDefinition;
                

1import { Block } from 'payload/types';
2import thumbnail from ' ./thumbnail/reveal-hero-thumbnail.png';
3import richtext from '@/payload/fields/richText';
4
5const ReveaHeroDefinition: Block = {
6  slug: 'revealHeroBlock', 
7  interfaceName: 'RevealHeroBlock', 
8  imageURL: thumbnail.src,
9  imageAltText: 'Reveal Hero Block Thumbnail', 
10  fields: [
11    richText({ name: 'title', label: 'Animated Title' }), 
12    richText({ name: 'subtitle', label: 'Animated Subtitle' }),
13  ];
14};
15
16export default RevealHeroDefinition;
17                  

1const VideoAutoplaySectionDefinition: Block = {
slug: 'videoAutoplaySectionBlock', 
interfaceName: 'VideoAutoplaySectionBlock', 
imageURL: thumbnail.sc,
imageAltText: 'Video Autoplay Section Block Thumbnail', 
fields: [
  {
    type: 'radio', 
    name: 'chooseVideoType', 
    options: [
      { label: 'Upload Video', value: 'upload' }, 
      { label: 'Use Video from link', value: 'embed' },
    ],
  },
  {
    name: 'video', 
    type: 'upload', 
    label: 'Upload Video', 
    relationTo: 'media',
    admin: {
      condition: (_, siblingData) => siblingData.chooseVideoType === 'upload',
    },
  },
  {
    name: 'videoLink', 
    type: 'text',
    label: 'Link to Video uploaded on Youtube/Vimeo or other platforms',
    admin: {
      condition: (_, siblingData) => siblingData.chooseVideoType === 'embed',
    },
  },
],
33};
34
35export default VideoAutoplaySectionDefinition;
                

By the numbers: The impact of Payload

When it came to demonstrating the impact of Payload on operations, Riotters had receipts.

Schedule a Demo

Website Performance

Core Web Vitals scores increased from of 50 to 90 (out of 100).

Ownership and Accessibility

Code and content shifted from CRM servers, where access was limited, to a self-managed environment of AWS and MongoDB–enhancing security and efficiency.

Time Savings

Adopting Payload's TypeScript-based architecture led to a 40% reduction in time required to develop new features.

Cost Reduction

A significant decrease in maintenance costs when comparing combined expenses of MongoDB, Vercel, and AWS to previous content management systems.

Accomplishing the (almost) impossible with Payload

Daunting in scope and complexity, the project involved not just migrating to a new domain but entirely reimagining Bizee's digital presence.

To deliver on their promise to Bizee, Riotters relied on Payload for its clean, TypeScript-driven architecture, which proved transformative, streamlining the design integration and ensuring error-free, maintainable code. This accelerated the content migration, preserved SEO and user experience.

It even facilitated the design-to-development process—helping Riotters translate Figma concepts into live implementations.

Crucially, Payload’s natural synergy with Next.js catalyzed cross-functional collaboration among developers, designers, UX professionals, QA teams, and marketers. This not only made the ambitious redesign and migration feasible but also fostered a more inclusive and efficient project environment.

Through this collaboration, Riotters not only met but surpassed Bizee's objectives, setting a new benchmark for digital transformations and showcasing the power of innovation and teamwork.

Payload was created because agencies needed a better solution.

It was built from the ground up to give developers a platform they enjoy working with, and an admin experience that clients will love to use.

Become a Partner

Schedule Enterprise Demo

Visit Riotters