MasterControl: Website Migration & Design System

Overview

MasterControl's marketing website was undergoing a major transformation—migrating from Sitefinity to Storyblok while modernizing the company's web design system. Rather than simply recreating existing pages, this initiative established a scalable component library, refreshed the visual language, and created a consistent foundation for thousands of future website pages.

Role

UX Designer & Front-End Developer

Industry

Enterprise SaaS

Timeline

Ongoing

Team

Marketing, Product , Demand Gen, Creative

The design system refresh in Figma

The Challenge

As MasterControl continued to grow, the marketing website had become increasingly difficult to maintain. Components had evolved independently, typography and spacing lacked consistency, and the visual language no longer aligned with the refreshed branding being developed by the creative team.

At the same time, the company was migrating from Sitefinity to a headless CMS using Storyblok, creating an opportunity to rethink how the website was built. Rather than moving thousands of pages as-is, we wanted to establish a flexible design system that would support long-term scalability, improve consistency, and make future page creation significantly more efficient.

The updated color palette for our design system

My Role

Working closely with stakeholders, I helped define the next generation of MasterControl's marketing website by contributing to both the design system and front-end implementation.

My responsibilities included:

Auditing and consolidating the existing design system
Updating typography, spacing, colors, and reusable UI components
Creating web brand guidelines aligned with Creative's refreshed visual identity
Designing and updating key marketing pages, including the homepage and industry pages
Building reusable components within Storyblok
Front-end implementation using Astro, Vue 3, HTML, and CSS
Collaborating with stakeholders to establish standards for future website development

Updated typography for our design system

Homepage redesign within the new design system

The Process

The project began with a comprehensive audit of the existing website and component library. I cataloged our existing atoms, molecules, and widgets to identify inconsistencies, remove outdated patterns, and define the components that would become the foundation of the new system.

Working alongside the Creative team, we refined typography, updated our color palette, and established consistent spacing, heading styles, and reusable design patterns that better reflected the evolving MasterControl brand.

As pages were migrated into Storyblok, each became an opportunity to improve—not simply recreate—the existing experience. Components were rebuilt with scalability in mind, allowing marketing teams to assemble new pages while maintaining visual consistency through atomic design principles.

The Solution

The migration resulted in far more than a new CMS—it established a scalable design system capable of supporting thousands of marketing pages while creating a more cohesive brand experience across the website.

By standardizing reusable components, typography, colors, and layout patterns, the new system allows teams to build pages more efficiently while ensuring consistency as the site continues to grow. Although the migration remains an ongoing effort, the foundation is now in place to support future expansion without sacrificing usability, maintainability, or brand integrity.