Project Details
Situation
When I was in the product marketing analytics team, the marketing manager was struggling to get help from engineering to develop her emails. She decided to go with the Marketo service in the hope of bringing email and landing page development within our team so we can ship projects quickly.
Marketo has their own ready-to-start templates for businesses to use but it’s not flexible. It's hard for other team members to modify and customize the template even with Marketo’s WYSIWYG tool. Therefore, I decided to rebuild a dynamic template from scratch which is extensible, customizable and reusable so other team members can use the Marketo template easily using the newly developed WYSIWYG.
Tasks
The goal is to build a reusable component based template that’s intuitive and easy to use for creating landing pages dynamically. Also, the goal is to get projects done efficiently so we can see SEM campaign impact quickly.
Action
I started out by looking at our top performing landing pages, listed all the most used similar site elements on those pages and started to redesign those elements into reusable components.
Next, I started developing the responsive template with those components on my local machine using SASS, Bootstrap and Gulp. Then, I moved it to the Marketo environment, and replaced SASS variables and other page elements with Marketo syntax to make it dynamic. I also added tracking and made it ADA compliant.
Result
Instead of waiting for at least 3 hours for the developer to finish the landing page, the new template allows the business people to create landing pages in 20 minutes by swapping out modules, images, videos, icons, text, colors, SVG colors, backgrounds etc on the fly with the newly developed WYSIWYG system. It saved 90% of development time and we were able to run A/B tests to see campaign impact quickly. Also, the height for each panel and site elements is dynamic so the team members don’t need to worry about the copy limitation, the image height etc because the height grows or shrinks with the copy, image or any elements.
The new 20% off promotion landing page using the newly developed dynamic system made the following improvements compared to the old version:
- No code errors.
- Scoring 100 on an accessibility audit index compared to 44 on the old version.
- 140% increase on the page speed score.
- 53% decrease on the page load time.
The performance review data is based on the following sites:
- Google Page Speed Insights
- Nu HTML Checker
- Lighthouse Audit from Google Developer Tool
What the Principal consultant at Marketo says about my work on LinkedIn:
"When she introduced her designs to me, I was blown-away by the thoughtful layouts, modern looks, and astonishing flexibility. Her work is top-of-the-line, and I can't wait to see what else she comes-up with in the future. FICO is very lucky to have her, and benefit from her enthusiasm and quality work!" -Nicole Mossinger
