I was part of a handpicked group of subject matter experts tasked with migrating our decade-old homegrown CMS to Contentstack, a modern, headless CMS. This ongoing project aimed to streamline content management, improve SEO and ADA compliance, and create a scalable design system for future growth. My role has been primarily bridging the gap between the marketing, UX design, and development teams.
Over the course of the migration, I dove into learning Contentstack, the new CMS, to really understand its capabilities and how we could make the most of it. I teamed up with the UX design team to build components in Figma that would work seamlessly within the new system. At the same time, I worked closely with the development team, picking up React along the way to understand how we could use escape hatches for custom, one-off components—necessary for those unique pages that need a little extra design flexibility. It has been a really collaborative process where I've been able to bridge the worlds of design and development, ensuring everything was both functional and consistent with the new digital design system.
The challenge
Stuller's website was outdated, with a sprawling 400-page structure, redundant content, and inconsistent branding. SEO issues abounded: improper HTML title tagging structures, multiple or missing H1s, and poorly indexed pages. The lack of ADA-compliant components and content pages limited usability, while the company's disjointed color guidelines created a fragmented brand experience across marketing and UX.
Beyond technical challenges, there was significant resistance to change. Teams were deeply familiar with the old CMS, and transitioning to a new platform like Contentstack required training and morale-building. The migration presented an opportunity to not just modernize the platform but also redefine how teams approach design, content, and brand consistency.
↑ Various old CMS pages
↑ Various old components
Website audit
The first step of the migration involved a detailed audit of the company’s sprawling website. Each of the 400 pages was evaluated for relevance, performance, and design consistency. Working closely with the UX team, I identified outdated patterns and proposed updates to enhance usability and functionality. This effort resulted in the reduction of content to 240 optimized pages. We worked together to ensure that each redesigned component adhered to ADA compliance standards, which not only improved accessibility but also set a higher benchmark for the company’s digital presence.
↑ Figjam screenshot of design audit
Supporting the migration
To assist with the migration, I became certified in Contentstack’s End User Training, which gave me a solid understanding of its features, like dynamic content models and modular components. This knowledge helped me better understand the new CMS, teaching me how to improve workflows and ensure Contentstack was fully optimized for our needs.
As we audited the site, we recognized the need for custom components within the new design system, both for one-off instances and recurring campaign landing pages. With support from the development team and regular check-ins, I learned React and how escape hatches work to create flexible components that meet digital marketing's needs.
↑ Contentstack End User Training certification
↑ React escape hatch testing
Before updating our website's components, we addressed the discrepancies between the branding guidelines of the marketing and UX teams. I advocated for a unified color system that bridged these two worlds, selecting ADA-compliant colors that worked seamlessly across all marketing and e-commerce touchpoints. This alignment not only improved brand consistency but also enhanced accessibility for users with visual impairments.
Through close collaboration, I facilitated updates to the branding guidelines and ensured these were implemented within the new CMS. The result was a cohesive visual identity that supported both marketing campaigns and the overall user experience on the website.
↑ Updated brand guidelines, 2024
Building the components
I collaborated with the design and development teams to ensure each component was functional, flexible, and adaptable for use across PDPs, landing pages, and campaigns. My input focused on making the components scalable for evolving business needs while maintaining design consistency. By prioritizing functionality, branding, and ADA compliance, I helped create solutions that met both user expectations and business goals.
↑ Examples of new components created over the first phase of our migration cycle
↑ New top-level category page designs, view them all here
Outcome
↑ Before and after component designs
Next steps
Looking ahead, I plan to collaborate further with the development team to refine custom components and integrate emerging technologies like AI for dynamic content generation. By leveraging the success of this migration, the company is well-positioned for scalable growth and innovation in digital marketing and e-commerce.