Learnings from migrating static marketing page to CMS
Billie has a marketing page with beautiful illustrations which was built with Jekyll. As our company grows, we are starting to realize that our current marketing page is not scaleable both from marketing point of view and a technical point of view.
In order to have a scalable marketing page, we decided to migrate static pages to CMS (Content Management System).
During the journey of migration, we faced several issues and learned a lot of things. In this article, I would like to share them with you.
Big pain of Jekyll
One of the big pain of using Jekyll was a YAML file. Whenever the marketing team wanted to change the text on the marketing page, they had to edit them in the YAML file and push the change.
So many times the FrontEnd team had to do it for them as some of them didn’t have a development environment on the computer. It was painful and time consuming for both parties.
Which CMS to use?
When this topic of migration came up, first of all, we collected the requirements from the marketing team.
Requirements from the marketing team
- Must have — Everyone in the marketing team can change the content and publish by themselves without touching code.
- Must have — Keep all components from the current marketing page including API in use.
- Nice to have — an editor or admin panel which enables them to modify sections of content easily.
- Nice to have — Adding, deleting or moving blocks and sections, creating another marketing-related page by themselves
Then we did a bunch of research about CMS and we picked up a few candidates.
Candidates for a new marketing page
We had a meeting with the marketing team and decided to try webflow and SQUARESPACE as the first step because both of them are User-friendly, for marketing team members to be able to easily create content and see them.
First Prototyping was failed
So FrontEnd team created prototypes with webflow and SQUARESPACE. We showed them to people who is involved in this project like marketer, designer and product manager.
During the meeting, we found out that either of webflow and SQUARESPACE is not scalable as we wanted even though both of them fulfilled the initial requirements from the marketing team.
Because it will be hard to create several similar pages in webflow and SQUARESPACE. Our marketers need to be able to create pages without having the help of engineering team.
However, either of webflow and SQUARESPACE doesn’t have this feature and they are easy to create a page but not to generate similar pages with different contents.
So, in the end, we decided to go with Contentful which we discarded in first place because Contentful allows us to create content on their admin panel and we fetch them through graphQL. It’s scalable as we want.
FrontEnd team created another prototype using Contentful and all of us were happy with the result this time.
Advice (1) Don’t create prototype until all requirements are clear and consider requirements from marketing point of view and technical point of view.
Lack of consideration about Architecture
Once we agreed on Contentful, FrontEnd team started to play with Contentful and create new sections for a new marketing page. We watched some tutorial videos and blog posts provided by Contentful. We discussed how the new architecture should be brief and we thought we are ready to code.
We finished creating the main page out of several pages existed on the current marketing page. The page is consists of several sections and they should be reusable for other pages.
However, we created a section that is specific to the page and not reusable as much as it should be. We realized that the architecture was not well considered.
We stopped developing at this time and arranged a meeting to discuss the architecture.
During the meeting, we talked about what kind of section to be created and we agreed on creating a section so-called ListSection which contains several sections to handle a section with other sections inside it.
Now we have a clear definition of each section we want to use in order to create pages and how the architecture should be. After this meeting, we could manage to write better code and create cleaner content in Contentful.
Advice (2) Don’t start writing code until having clear understanding of architecture
Don’t overlook SEO! never ever.
So we created all the required pages and we thought that we are almost ready to release. Then the Marketing team came over to us that our newly created marketing page doesn’t support SEO at all.
Yes, we didn’t consider SEO until the last moment. So we immediately started to improve our SEO.
Gatsby offered several useful SEO related plugins and they saved our life. We installed gatsby-plugin-sitemap and gatsby-plugin-robots-txt.
We managed to add all necessary meta tags like Title, Description and index/no-index using ReactHelmet. ReactHelmet is a component to help to modify the document head.
After all these changes, our SEO score ranked 100.
Overlooking SEO issues was happened mainly due to the lack of communication between Engineering and Marketing. Improving SEO was not a hard task to implement, however, as we didn’t estimate it in the beginning, it delayed our release date.
Advice(3) SEO is very important for marketing page, estimate it properly and communicate with Marketing team closely to avoid misunderstanding.
Wrapping up
Even though we made several mistakes, we have full command of Contentful now. This is our marketing page using Contentful.
The learnings that I introduced are not a new idea/concept but it’s easy to commit these mistakes while actually the project is going forward.
So I hope our learnings give you heads-up for your next big project!
