Zeke Franco

A Case Study

The Companion Quarterly Newsletter

Company: VPI Pet Insurance

Screenshot of the Companion online newsletter

Project Background Information

The Companion is a quarterly newsletter that is created for over 500,000 VPI policyholders. The Companion features topical and seasonal pet health information, tips related to being a VPI policyholder, and exclusive discounts from third party pet related companies.

My role was to take the print version and adjust and supplement the content structure, graphics and layout to suit an online experience. To do this I created a section of the Web site dedicated to the Companion newsletter and an email to provide a summary of contents of the newsletter for policyholders and to drive traffic to the online newsletter.

Goals Achieved

  • Improve policyholder retention by providing relevant content
  • Increase engagement, page views and time spent on site
  • Bring a magazine style feel to the Companion
  • Improve the usability of the newsletter
  • Increase click through rate in Companion newsletter

Opportunities for Improvement

Newsletter Homepages

Before the redesign
Original — 2008
After the redesign
Redesign — 2010

The VPI Policyholder Companion newsletter, previously titled the Retriever, was redesigned in a series of iterations. The Retriever was a simple table-based design containing limited imagery and a simple linear layout. Due to the lack of a navigation menu, moving between articles meant the user would have to keep clicking the browser’s back button to return the newsletter’s homepage and then find the next article of interest.

The visual design of the Newsletter section and email was very limited and had no sense of brand tie-in with the corporate identity. I think the biggest loss of opportunity with the old newsletter was that it didn’t brand itself.

Setting Design Goals for the Redesign

Design Goals

  • Navigation
  • Design around the content
  • Branding

The Companion had plenty of room for improvement, but like any project it was restricted by time, resources and infrastructure (CMS). I started the project by building three lists: a list of business goals, a list of reader’s (user’s) goals and list of best practices that I felt weren’t being implemented in the current version.

Features that would meet the goals on all three lists were placed on the top of the feature list, since satisfied readers will visit the site repeatedly. Readers’ goals were given more weight then business goals. I always use best practices for any feature I work on so they didn’t need to be given a specific weight.

Navigation Improvements

Usability is always the first goal of any design I create. The first step was to tackle how a user navigates through articles. The obvious solution was to add a secondary navigation section to the current VPI consumer CMS layout. The problem was the default CMS template had a navigation section that had to occupy the right sidebar. Making edits or adding to a CMS layout can a multi-month process. I was able to find a way to use a stripped-down CMS layout to build upon without having to go through the company’s traditional lengthy opportunity proposal process.

screenshot of default layout
Default CMS Layout Structure

While the two column layout would have been a faster solution, it wasn’t an elegant solution. Having the consumer navigation section on the page would slow the reader’s ability to navigate. The readers of the Companion are already policyholders so showing them a prominent navigation section aimed at new customers would be a waste of the reader’s time.

The information architecture (which was influenced by the goal lists) helped decide the contents of the navigation. Articles, Archives and Policyholder Perks became the three main categories. Each of these are drop-down menus so that the user can easily jump to the section or article they are looking for.

Companion newsletter masthead and navigation

Design with Content in Mind

Because the newsletter content can be vastly different between issues and articles, I wanted to open up the full 960 pixels available in the stripped down CMS layout. The wider canvas allows for a more immersive design and really lets the content stand out. Because the content is written and presented as a newsletter, I wanted the design to feel like an online magazine rather than a standard webpage or blog template.

Companion Article Summertime Posioning Dangers Companion Article Traveling with Pet Passengers in Tow Thank You, VPI!

Visual Branding Within a Brand

The goal was to visually brand the newsletter as a subset of the overall VPI brand. I wanted the user to still see VPI influence on the design of the Companion, but with a twist that is specific to the newsletter. The difference should be able to convey: “this isn’t a marketing brochure, but interesting content.

Companion Branding

The VPI brand generally consists of red and brown. For the newsletter I chose to go with a darker red and used white to give a fresher feel. Considering the demographics of the Companion, a modern design would be best received. To add a bit of modernism, a strong grid was used to lay out the content in every article. Furthermore, Univers and Helvetica Neue were chosen to be the typefaces, Univers for large headings and Helvetica Neue for smaller headings and body copy*.

Creating a distinct and separate section of the site also went towards creating a branded experience. I gave the Companion its own section in the site with a custom navigation that contained a prominent Companion logo and removed the irrelevant consumer related navigation bar.

*I implemented Univers by using CSS image replacement (FIR/Phark method). Helvetica Neue was specified with the following font stack: 'Helvetica Neue', Helvetica, Arial, Tahoma, sans-serif;.

Email: the Primary Traffic Source

Email Designs

Before the redesign
Original — 2008
After the redesign
Redesign — 2010

Nearly all traffic that comes to the newsletter is brought in by way of this email. The email must be very informative about the contents available in the issue. I decided to make the email more about the titles and blurbs of the articles rather than photos. The business has a hard time finding compelling images quickly that can get users to click through. The idea is to make sure the user scans the title rather than just stock photos, as the titles get a better click through rate than our old image based design.

Every issue has a featured article, so this article is given imagery and two columns of space to create visual importance around this article. The Policyholder Perks section of the email also uses images since products are often better represented by images.

The design of the email follows the design of the Companion section: large masthead, grid based design, whitespace and Univers for the largest headings.

Front-end Development

I built the Companion with the same considerations I take for every page. I used best practices and web standards to semantically markup the content. The navigation menu is nested unordered lists that work with just CSS, but jQuery is used to create an animated slide down and slide up effect when a menu item is hovered over.

Sample Code: xHTML
xHTML
Sample Code: CSS
CSS
Sample Code: jQuery
jQuery/JavaScript

The content is laid out with the 960.css grid system, which is what the entire consumer site uses to lay out content into columns. 960.css provides CSS for basic positioning so everything else was custom written by myself.

Responsibilities

Research, strategy, interaction design, visual design, xHTML, CSS, jQuery development, and CMS integration. Launched summer 2010.