EducationHow Mindvalley cut down development time by 50% for their multilingual websites

Mindvalley is a subscription-based platform aimed at personal growth, where users can subscribe to courses, masterclasses, and content to develop their personal skills. With over 20 million students worldwide, Mindvalley’s primary target audience is anyone interested in self-development and personal growth. Most of its customers are based in the United States, ranging from all ages (teens to older adults). 

Mindvalley’s acquisition team is at the forefront of maintaining the organization’s website and pages and was part of the Storyblok implementation of the website. Part of Mindvalley’s acquisition team is Prosper Chiduku (Software Engineer), Fann Saw (Senior Product Designer), M.Saad Siddiqui (Engineering Lead), as well as the original implementors, Aaron Myatt (User Acquisition Technical Lead), Saquieb Ansari (Senior Dev) and Ali Azwad (Senior Dev). 

The Project & Origin Story

Mindvalley’s pre-Storyblok journey can be broken up into three phases: The monolithic era, building their own CMS, and consequently trying to build their own headless CMS. Mindvalley used many different CMSs, such as WordPress and Drupal, where they found a lack of customization to components. This brought the brand to seek to build its own system called Ignite. The issue with Ignite over time was that there was no interface, making it difficult for any new hires to learn the code catered to Ignite and hindering the company’s scalability and growth. This meant there was a heavy learning curve for any new colleagues joining, who would need to learn coding from scratch, leading to heavy maintenance in upkeeping the system. 

On top of that, any user would need to dive into each small detail and make changes to a page code line by code line. Ignite was not component-based as Mindvalley would have liked, with everything built-in Git Repos, making it challenging to update anything. For non-technical users, making any changes meant having to learn coding to keep up and make those changes with having to go through an entire code markdown to find an element that they wanted to change. Even then, there was a fear amongst developers whether any changes made by marketers were correctly managed and implemented in the code, such as a missing closing bracket on the code, that could have detrimental effects on a page. When such an issue occurred, a developer would need to come in to find and fix the issue.

Throughout this ordeal, Mindvalley then decided to try and build something similar to a headless CMS called Site Builder. While the company continued onwards with Site Builder, they still found that there was still heavy maintenance work in the upkeep of the system that continuously needed to be done, which diverted the attention of their developers instead of working on much-needed projects. 

While Mindvalley kept using Site Builder, over time, they realized that a change needed to be made to fix the issue at hand from its roots. Site Builder was also built heavily on PHP, additionally to the fact that nobody at that time knew PHP, and with any errors, developers had to scramble to find a solution online. This meant looking for a headless CMS that could handle any heavy lifting and maintenance for them and, in return, give back the freedom to their developers to work on their own projects. Their main requirements were: 

• Find a component-based system that allows the reusability of components as a feature to ensure their pages could be uniform following their brand guidelines 
• An easy learning curve for developers that could cater to the language their developers were familiar with (in this case, Javascript and Vue.JS) - allowing developers to spend more time actually customizing and creating components rather than trying to maintain the CMS
• A system that could allow designers and marketers to be independent and make any content changes easily, without the need for coding or the help of a developer 
• Easy deployments across a multilingual page setup and across various products and verticals 

Why did Mindvalley choose to bring on Storyblok as their CMS? 

Mindvalley started its search for a headless solution at the end of 2017, at the same time that they were trying to migrate more projects to Site Builder. This was delayed as there were not enough hands on deck for such a large migration. 

At the beginning of 2018, the general opinion company-wide leaned towards the move to a new system - yet, 90% of the company’s revenue was still occupied on Ignite. Throughout the entire C-Level executives, there was a deep fear that such a significant change of systems could jeopardize their revenue. It was around then that Aaron was the one to discover and recommend Storyblok at the end of that year. After seeing the struggles across the company build-up over the team, he took the lead in rolling out Mindvalley’s content from Ignite and Site Builder, gradually and safely, product by product, to Storyblok. It was mid-2019 when Mindvalley migrated multiple pages to Storyblok.

Making the move to Storyblok was a company-wide agreement that things needed to change. Their developers and marketers were at the tipping point where they needed a new system and one that they could benefit and learn from, which could be beneficial for their career growth in the future.

Setting up Storyblok within Mindvalley’s numerous product pages

Part of the acquisition team on the frontline of Mindvalley’s Storyblok migration was Prosper Chiduku (Developer), Fann Saw (Senior Product Designer) acting as the bridge between the design and technology teams, as well as Saad Siddiqui (Team Lead working on Storyblok).  

A big part of Storyblok is used to create Mindvalley’s content and product pages, divided into pre-login and login segments. The acquisition team is part of the pre-login process (hosted on mindvalley.com). Following the customer journey, any new customer that comes through the pre-login pages (their storefront) shows the available products, courses, masterclasses, descriptions, etc. This can be seen through one of the acquisition team’s custom builds. A plug-in was written to consolidate a few of the plug-ins to easily manage various product pages and sites. The plug-in is able to help pull data from their GraphQL API, whereby all their backend data can be easily filtered through an easy-to-use drop-down on the frontend. Once a user decides to sign up for Mindvalley, they proceed to the post-login segment that lets them access those elements. 

Storyblok comes into the picture here in simplifying the process of streamlining the customer journey and the development of pages that act as the brand’s DNA for non-technical users to manage content easily. Non-technical users, such as marketers and designers, are able to simply duplicate different courses or products easily and change content elements on the go throughout Mindvalley’s various multilingual sites. Hand-in-hand, the drag-and-drop capabilities within the Visual Editor were exactly what Mindvalley “needed the most.” 

Storyblok has helped Mindvalley as well with easier deployment. While previously, teams had to go through a service called ‘Mission Control’ within Ignite to deploy; teams are able to click publish and run deployment there easily. When it comes to also building new components inside their Storyblok setup, the process comes from a page design coming directly from the designers and marketers to the acquisition team. There, they detect which pieces of content can become a building block so that new components can be built on it as a foundation.

Setting Mindvalley up for success

Storyblok was able to set Mindvalley up for success for developers, but mainly also their marketers and designers. The team wanted to keep in mind how beneficial a proper system could cater to everyone’s needs towards their career growth at Mindvalley. Not all developers wanted to learn to code with Ignite to create new pages. This consumed a lot of time and took away the focus and time on their core development responsibilities and projects.

Making the move to Storyblok has given back freedom for marketers and designers to invest more time back into their projects rather than having to learn code to make changes. Nowadays, non-technical users can simply go in without any coding and make changes to the pages and campaigns whenever they want. Today, the acquisition team’s main goal is to build new components that the marketing and design team can use that are both functional and flexible. Because of this, the design team has been able to dedicate more time to their own projects, with their design system and style sheets now fully integrated and built on Storyblok. 

Internationalization also at Mindvalley covers the brand’s eight language sites worldwide. In the past, languages existed in a repo per language, whereas now, everything can be translated across all sites and updated on each page simultaneously. Using a field type, marketers can easily go into Storyblok and input the relevant language per page easily, without switching back and forth between different systems or setups to manage their multilingual landing pages. 

Across the entire company, development has become more user-friendly. Onboarding new people, both with technical and non-technical backgrounds, has been streamlined and improved - where documentation is written to new colleagues to easily learn about Storyblok and its functionalities in the easiest way possible. An example of this is used by teams, such as the Media & Web Designers, who use Storyblok to create internal documentation such as Mindvalley’s design style guide and typography. 

Bringing Storyblok to Mindvalley was a big win for their development team as the CMS was relevant to their industry and technical language, allowing them to grow and progress in their careers by devoting their time to working and mastering their skills. With their previous system, Ignite, this was not possible and, in turn, damaged the retention of developer, marketing, and design talents. 

Key Takeaways

In all, Mindvalley was able to go to market and launch two times faster compared to their previous setup and cut down development by 50%. Today, the acquisition team has become less of a blocker to the marketing and design team, where they can seamlessly collaborate together in parallel within Storyblok while being independent in their own projects. 

At Storyblok, we strive to create the best headless experience possible, made for both developers and marketers alike. With Mindvalley, the team was able to bring a headless CMS to the table that could cater to the needs of their developers, designers, and marketers, while having the perfect sync between managing multilingual product pages at just the touch of a button.