Headless Website Migration & Launch in 7 Weeks
Highlights
- We migrated a leading trading firm’s website to Stackbit and Next.js in just seven weeks, without disrupting content production.
- We enhanced website speed to under 1 second.
- Moving from Hugo to Next.js enabled advanced JavaScript capabilities, making the website more dynamic and responsive. We introduced new tooling for enhanced developer workflow and visual testing.
- Content authors were seamlessly onboarded to the new CMS. We incorporated iterative development and user feedback to build a user-friendly authoring experience.
The challenge
A US-based trading firm needed to continuously publish new content while migrating off of Forestry.io CMS that was being sunsetted in less than three months.
Our client’s content authors were experienced CMS users and expected the new experience to be just as good, if not better, than the previous platform. It was also critical to maintain their fast website performance; their website had a site speed of 1 second.
With a large amount of existing content (more than 500 pages) that needed to be migrated from their existing CMS to the new one, it wasn’t feasible to migrate it all manually, especially given the compressed timeline.
Beyond the main objective of migrating to a new CMS, this migration presented an opportunity to modernize the client’s tech stack, moving from Hugo to Next.js.
The process
We immerse ourselves in our clients’ teams to co-create end-to-end solutions – we don't just build them and hand them off.
We worked directly with the client’s teams, from day one, to model best practices, provide in-depth training, and support with upskilling. Our goal was to equip their teams with the knowledge and confidence to operate and take full ownership of the platform we’ll have created together.
We worked iteratively, showing our work every step of the way, starting with a working MVP from the very first week, to deliver value to the business and its users as early as possible.
Choosing the CMS
The client was on Forestry.io, and had a hard deadline of migrating off their CMS before it would sunset in April 2023.
We worked with the client to pick the right CMS for their needs. They were looking for a git-based CMS, like what they had before and needed a good authoring experience.
We chose Stackbit because of its git-based functionality and best WYSIWYG on-the-glass editing experience. Plus, it’s a framework-agnostic headless integrator that offers maximum flexibility and portability. Learn more about Stackbit here.
Working in Stackbit is a night and day difference from our old CMS, Forestry. The WYSIWYG editor both on the glass and within the side pane make web edits streamlined and easy. The whole platform is very user friendly and I appreciated how Rangle engaged us early in the project to make sure it worked as we expected.”
Jen, Marketing Team Lead
Migrating to Stackbit and Next.js
We began by auditing all the components that needed to be migrated within seven weeks before the hard launch deadline, with a net total of over 80 components. In order to hit our tight deadline, we prioritized which components were critical prior to launch, and which ones could wait until after the launch.
With over 500 content pages that needed to be migrated, the client’s content authors still needed to ship new content during the migration. By the second week, we had a work-in-progress migration script in place. And as we started to migrate more components, it was critical to maintain and update the migration scripts so that they work with the new components that were being built.
Thinking about migration early is important so you don’t run the risk of not being able to move your content in time or at all to your new platform.
Modernizing the tech stack
Moving from Hugo (a Markdown framework) to Next.js brought more complex JavaScript capabilities to their site. For example, in the process of the migration, we were able to upgrade their job board filtering capabilities by making it more dynamic and responsive.
As part of this partnership, we also introduced their team to new ways of working and to new tooling. For example, we introduced Storybook and Chromatic to the developer workflow. Implementing new tooling enhanced their developer experience and added visual testing, which they didn’t have before. Whenever there are changes to the codebase now, the developers can build and visualize components in Storybook with the updated code, while regression tests are run automatically in Chromatic. This was also a huge win because the client had previously created and manually maintained a separate component documentation site.
Onboarding content authors
From the first week onwards, our team had a fully demonstrable product to showcase every week, allowing for direct feedback on a week-to-week basis. This helped the client’s content authors visualize what the experience was going to look like from the very beginning, while concurrently learning how to use the new system as it was being built.
- Taking an iterative approach and incorporating user feedback as we built helped anticipate the content authors' needs and address any issues that only become apparent during user testing. This results in a more usable and effective authoring experience.
- We also had a formal training session, co-presented by Stackbit, to onboard content authors.
- Learn more about our best practices when architecting authoring experiences.
The outcome
In just seven weeks, we migrated the client’s website to a fully functioning platform while maintaining a similar authoring experience to empower their content authors to continue updating content. Overall, this partnership was incredibly collaborative and supportive.
My experience with Rangle has been remarkably rewarding. Their team, radiating profound expertise, has consistently showcased exceptional communication and unwavering transparency. I eagerly anticipate our next collaboration, drawn not merely by their unparalleled professionalism, but also by the substantial knowledge gleaned from their highly sophisticated organization and proficient teams.”
Erik, UX Design and Engineering Team Lead
Their existing website performance before we started this engagement was already very fast, but we managed to improve this even more after the migration.
Not only did we deliver a new platform in seven weeks, but we also conducted successful pair programming with the client’s teams to ensure they would be successful at the end of the engagement. Our client now has a fast, new site, and a better authoring experience.