Mobile First Landing Page and Email Template Development

Customers and prospects for the Citrix SaaS division were consuming our communications on multiple devices and increasingly on mobile. It was imperative for the program elements on the Marketo engagement platform to work within each context — so that customers get a delightful experience and our programs perform optimally.

The primary goal of the template development was to improve customer experience on mobile devices, which would lead to better conversion and engagement. The new template also needed to be able to accommodate various content types and most importantly, align with customer experience across touch points for brand and product user interface.

Once the the new template system was deployed, improvement in usability and customer experience boosted conversion rate by 26%.

Mobile First Landing Page and Email Template Development
The final Landing page template designs for various content types The final Landing page template designs for various content types The final Landing page template designs for various content types The final Landing page template designs for various content types The final Landing page template designs for various content types

The final Landing page template designs for various content types.

The Groundwork

Old template inventory

Inventory of existing templates revealed usability flows, inconsistent branding and user interface designs, as well as ineffective copy directions across the board.

Old template assesment

Existing templates were further dissected and assessed in great details.

Wireframes Wireframes

In order to convince customers to attend webinars or engage in more content offerings, it was important to provide them with more information about the offerings than a few simple bullet points. It was also critical that both registration form and content description appear in the initial viewport in mobile view.

Wireframes

Tabbed panels, tabbed buttons and accordion UI concepts were further explored in high fidelity wireframes.

Visual Design

Visual design process Visual design process

With high fidelity wireframes defining all the elements in the right places and dimensions, the focus then turned to the visual design. Scalable visual styles that are consistent with the brand guidelines were explored for the masthead, the most visually expressive component in the layout.

Multiple presenters Multiple webinar offers

Various edge-case scenarios such as multiple presenters and an option to offer additional webinars were also considered during this phase.

Email Template

Email template wireframe Email template design exploration

Existing email template was also re-evaluated and redesigned to align with the new landing page template design and branding.

Final Deliverables

GoToMeeting landing page and email templates GoToWebianr landing page and email templates GoToAssist landing page and email templates GoToTraining landing page and email templates

The new templates provided unified brand experience not only to customers but also to internal marketers.

Guidelines

With the final template in Marketo, detailed guidelines were created to help product marketing managers create landing page and emails.