• Design

  • UI/UX

  • Development

  • Digital

Marketo Webinar Template

Dynamic Template

Laptop showing the an example webinar landing page. A countdown and live status appears on the sides.

Creative Breif

Chatsworth Products’ Drive Forward series is a string of educational webinars geared towards deepening the knowledge of industry professionals. Initial promotion of these webinars included a social post that took you a register form through their hosting platform. It was plain and gave little detail into the topic being presented. I was tasked with creating a reusable template in Marketo to better market these webinars.

Tools

  • Marketo icon logo

    Marketo

  • Visual Studio Code icon logo

    Visual Studio Code

  • Adobe Photoshop icon logo

    Photoshop

My Role

Lead Designer & Developer

Deleverables

1 Template

Challenges

  • Marketo’s landing page builder was not as user friendly as their email builder.
  • Template needed to be easy for other team members to utilize.

Process

  • 01

    Wireframes + Mockups

    Icon of box divided into 3 sections
  • 02

    Review

    Icon of a chat message bubble
  • 03

    Development + Testing

    Icon of a computer monitor
  • 04

    Template Launch

    Icon of a paper airplane

Results

  • Built a custom, fully responsive template from scratch
  • Used variables to create editable blocks and sections for the team to populate through an easy form.
  • Documentation and training were done to set the team up for success on their own.

A fully responsive template was built with Marketo variable integration that allowed the team to populate the page with a simple form.

I coded a template from scratch using HTML, JavaScript, and Marketo developers documentation to create variables. These variables would show on a side panel for the team to easily input the webinar’s information.

The template is now much more appealing and features a cover image to represent the topic, webinar description, a countdown in the use’s local time one, key topics being covered, registration form, and speaker bios. Additionally, I added logic for when the webinar is live/past due, the countdown is replaced with content around registering to catch the replay.

I created documentation on how to use the new template and did a training session with the Marketing Automation and Content teams. They were able to self serve and apply the template as needed. I of course was available for guidance or troubleshooting along the way. The team was absolutely thrilled to have this new template.

Final Layouts

Full template design mocked up in a browser


Webinar details mocked up on mobile device Registration complete message mocked up on mobile device Form confirmation mocked up on mobile device
Webinar details and form section mocked up in a browser Registration confirmation screen mocked up on a laptop
Group of tablet, phone, and desktop screens showing how different sections from the template scaled for each device