Building a scalable landing page system
Background
Landing pages play a key role in educating potential new users of Envato Elements, who are sent to them via paid streams such as display banners and paid search. The purpose of these pages is to highlight the products unique selling points as well as to showcase the large library of quality assets that Envato Elements has to offer.
In 2020 a page redesign sprint was kicked off with a deep dive into understanding the problems of the current landing page system as well as a strategy to improve it. I was brought on to develop a template library to help scale the redesign and production of our current and future landing pages.
Keeping scale in mind
It was super important that our templated sections could be easy to update and use in Figma and our landing page builder, as we needed all 200+ of our existing landing pages to be redesigned and rebuilt using these new templates!
First step was to conduct an audit of all the landing pages we currently had to identify which existing sections could be combined into larger, flexible sections in order to keep a lean library of templates. I collaborated closely with the Envato Elements brand design system team to create wireframes to turn into globalised components.
Building the templates
By reaching out for developer support and doing my own research, I was able to build out working templates in Elementor. It would take a few months of using these template to understand both the importance of responsive design as well as how to build these templates to be responsive.
Now I had the exciting task (not sarcasm) of bringing these templates into our page builder, Elementor! My largest blocker was that we didn’t have dedicated developers building templates for us and we were restricted by Elementors out of the box features. Meaning no custom code or plugins could be used!
Now make it pop ✨
It was important to me that these landing pages can not only educate potential new users of the product, but also to inspire them to create amazing designs with the wide collection of design assets Envato Elements has to offer.
The visuals I created on these pages aimed to showcase the breadth and quality of the items available while also demonstrating how our items can be used in real world projects.
Passing the knowledge
The intention of our chosen page builder was to enable anyone building pages to self serve. So the templates needed to be easily used by marketers or designers who were not familiar with the builder. I created a guide that documented how to build, modify and deploy landing pages using the templates I had created. To ensure that this shared knowledge remained clear, I periodically checked in with people using this guide to see if anything needs to be communicated clearer as well as identifying opportunities to add to the guide.
