BlackLine’s journey towards scalability and security
Key facts:
- 30% increase in performance
- 4 months of migration
- Cut down development time by 40%
About BlackLine
BlackLine is a cloud provider of solutions to manage and automate financial close, accounts receivable, and intercompany processes. Their financial operations platform and market-leading customer service help large enterprises and midsize companies across all industries unify their data and processes, automate repetitive work, and drive accountability through visibility. More than 3,800 companies trust in BlackLine to help them close faster with complete and accurate results.
Jason Pike is BlackLine’s Senior Web Performance Manager, leading a team of 5 people, consisting of 3 developers, 1 SEO personnel, and 1 handling site optimization. Jason’s journey at BlackLine started 8 years ago, when he oversaw the entire site development.
The Project: Finding the right CMS for scalability
Initially, BlackLine was set up on a WordPress site, eventually migrating to Expression Engine. As headless CMSs started becoming more popular and prevalent on the market, Jason and his team started looking into different options within that scope.
Their search started in 2018 when they moved to an alternative headless CMS and had to learn Javascript framework with Vue.js and Nuxt.js, with Jason helping lead the push to migrate to a headless CMS. At the time, Jason moved into the web performance side of things, while a new developer joined with the headless set up and started the build of different components and site development. Since then, Jason moved back into the development side of things and is key to BlackLine’s development.
Having been on their previous headless setup, they quickly realized that they were outgrowing the system as they continued to scale. This caused them to take a step back and go back to the drawing board of their initial list of headless CMSs they had looked at prior, for an alternative that could fit their needs, scale as they grew, bring more functionality internally from the CMS, and allow innovation and optimization amongst their development team and beyond. This phase took 6 months for Jason’s team to wire down and see what would cost and the adoption and migration entail from their current headless setup to Storyblok.
On top of that, there was a growing frustration on heavy component development - this meant that any little change would require a full rebuild of a new component, adjusting the component that was already built, and having to rewire its coding in order to fit with the update BlackLine’s creative team wanted. Jason’s team found themselves continuously building new components that overfilled their component library. For example, if a simple column had to be added to their site, a duplicate of the existing component would need to be recreated just to accommodate for the extra column and continuously be duplicated to add another column. This meant that any existing component seen on their site would consequently have multiple duplicates of the component for just a simple change such as adding spacing, logos, rows, columns, and more. Likewise, any current components that were being used across the site had to be modified or entirely rebuilt in hopes of not breaking what already existed in multiple areas of the site.
In the end, this created a static workflow amongst Jason’s Web team, where the developers would ultimately have to continuously build or recreate new components for even minor and small changes, revisit duplicated components, and focus just on such tasks rather than directing their time and focus towards bigger projects such as enhancements or optimizations they actually wanted to make to the site.
Making the decision to Storyblok
Storyblok ultimately became BlackLine’s headless CMS of choice in 2021, but not without a few points to clarify - BlackLine assessed Storyblok’s fit based on pricing, the ability to build and edit components easily, the migration process from their previous headless setup to Storyblok’s, and an easy learning curve for new users to easily access and start development within the system as BlackLine scaled.
Having tried Storyblok out, and playing around with the building process, BlackLine was fast to realize Storyblok’s unique component features, such as reusability, folder-based structure, and nestable content blocks, as well as collaboration, which sealed the deal for BlackLine’s team. Overall, this took 4 to 6 months from trying out Storyblok, to the decision-making point to migrate.
The main pointers that BlackLine found within Storyblok as a fit towards their internal processes and desire to grow were:
- The ease of development for developers to use their own programming language
- SSO authentication for their team to sign on to the application
- ISO Certified (Storyblok was in the process of being certified at the time of BlackLine’s adoption with Storyblok)
- Unique user permissions for content authoring
- The ‘pipeline app’ allowed the team to separate their staging and production deploys, so that each appropriate content was deployed to appropriate environments
- Having the ability to see any changes as you went along with Storyblok’s Visual Editor
When it came to building in Storyblok, one of the main concerns was BlackLine’s previous immense component library. As they continued to build components during the migration to Storyblok, they actually found the library becoming bigger, through entire components being broken down into individual components (nestable components). While their library did become bigger, it became more structured and organized for their teams to access, edit and organize their components.
BlackLine’s decision-making process was quite straightforward. Jason’s boss gave the final approval, as well as feedback from Jason’s team after their trial inside Storyblok. They found it a fit in their experience with the simplicity of building and managing components, and a fit with their own programming language.
Once the development team was able to work together inside Storyblok, and get to know the codebase a bit better, it really took off and made our lives easier.
About adopting Storyblok
Currently, BlackLine’s main page, BlackLine.com, is served with Storyblok. Jason’s Web team are currently the main key players working inside the system. While BlackLine’s creative team currently does not work within Storyblok, they have brought new ideas to the table such as creating an integration component for Storybook and Figma, allowing them future access to easily change and build content.
BlackLine’s creative team mainly works in Figma, providing all the layouts of any pages that need to be updated or redesigned. From there, the Figma file is handed over to the Web team. With the migration to Storyblok, BlackLine had in mind to build according to Storyblok’s atomic design model, making development and UI easier in changes and adaptation. Consequently, the creative team also provides the entire structure and layout of BlackLine’s site - with the migration, BlackLine also migrated to Tailwind as their CSS. This involved collaboration between the Web and creative team on the migration from the bootstrap CSS framework, giving the creative team more freedom when it came to designs and structure to the new site on Storyblok and Tailwind CSS.
BlackLine’s newly launched website
BlackLine recently published its site in early May 2022. Looking back, BlackLine was able to cut down on development time by 40% with just the ability to have the Visual Editor and component reusability.
The biggest benefit for us has been the ease of development on the component side. When building a page, you can see how easy it is to copy a section or component within the visual editor and paste it anywhere on the same page or even on a different page. This has made page building a lot easier inside the CMS.
)
More importantly, BlackLine was able to achieve the following optimizations in just 30 days after publishing:
- 30% increase in performance
- Reduced their total blocking time of scripts by 600ms
- First interactive load from 3.8 seconds to 1.1 seconds
With their eyes on the future, BlackLine is looking to expand their Storyblok efforts to other sites, and projects such as their upcoming user conference.
Key Takeaways
When asked what was Jason’s favorite feature within Storyblok, data sources were a key feature mentioned. BlackLine has given its components extra features to allow people who wouldn’t usually have access to the CMS, have access to change things such as font styles, colors, images, and so on, using their brand library. BlackLine built such a library within Storyblok’s data sources, allowing them to control it in one location rather than going component by component to change specific items. This has provided BlackLine a compiled and organized location to store their brand assets that can be used across multiple pages on their site while giving people the control to make simple changes without needing code changes.
We love the advancements Storyblok is making and really look forward to how it’ll grow.
BlackLine was able to maneuver the headless CMS market to find a system that best met their needs towards scalability and usability while keeping the importance of security in mind as they grew. With Storyblok, BlackLine was able to build and migrate from their previous setup within 4 months, cutting down development time by 40%, while innovating towards building new components that fit with their internal processes, as well as integrations for their creative team in the future.
