let your website do the work: create a viewbook from your online content

58
Let your website do the work: create a viewbook from your online content Marc-Olivier Ouellet, coordinator NAGAP April 2015

Upload: marc-olivier-ouellet

Post on 29-Jul-2015

102 views

Category:

Education


2 download

TRANSCRIPT

Let your website do the work: create a viewbook from your online content

Marc-Olivier Ouellet, coordinatorNAGAP April 2015

admission.umontreal.ca

How many of you:– Print copies of your viewbook / catalogue?– Consider that they spent too much resources on it?– Feel confident that your effort is worth it?– Can measure the effectiveness of this tool?

Questions

admission.umontreal.ca

Learn how to build a rich database to store all the data about your programs from various sources, including PeopleSoftDetermine innovation ways to leverage your online content to build powerful toolsCreate a dynamic and personalized viewbook/catalogue that builds upon your online database

Learning Objectives

admission.umontreal.ca

ABOUT US

UNIVERSITÉ DE MONTRÉAL

Université de Montréal at a Glance

UdeM’s campus, comprising some 40 buildings, is clustered around the majestic Art Deco tower of Roger-Gaudry Hall at the heart of beautiful city of Montréal

admission.umontreal.ca

+66 000 students in 16 faculties and affiliated schools

Université de Montréal at a Glance

admission.umontreal.ca

2 600 professors-researchers465 chairs and research units37 affiliated health institutions$526M in research revenue

Université de Montréal at a Glance

250 undergraduate programs (74%)350 graduate programs (26%)16 750 graduate students7 870 international students

admission.umontreal.ca

ABOUT OURGUIDE D’ADMISSION

admission.umontreal.ca

We produce annually our Guide d’admission : – Hybrid between University catalogue and a

Viewbook– It contains descriptions of all undergraduate

programs offered at UdeM, including :• Admission Requirements• Program Structure (courses)• Career Prospective• And more…

Admission Guide

admission.umontreal.ca

Admission Guide 2014-2015

admission.umontreal.ca

As of before 2014, it was a print publication of about 350 pages, printed in 29 000 copiesDistributed to students and high school counsellors throughout the province of QuébecTime consuming to produce, assemble and validateCostly to produce– About $70 000 CDN each year– For design, printing, and shipping – Excluding HR costs

Admission Guide

Lenghtly process

In-house system

Done by an external firm

Manually assembling

4 to 5 months to accomplish

admission.umontreal.ca

New system = end of an era

Peoplesoft Legacy systems

PeopleSoft Current websites

X

A broken process

X?!?

We had an opportunity: – To reflect on our publications and consult with our

partners (high school counsellors)– To build a strategy that would allow us to improve how

we push information to our prospective students and to measure the impact of our communication tools

– To get up to speed with new technologies to simplify the way we work internally

An opportunity

AnalysisFeedback

Trends &Technology

Effective strategy

Successful change

admission.umontreal.ca

OUR STRATEGY

admission.umontreal.ca

Program is the most important factor for a prospective student when choosing a university*

It is therefore important to keep program information current and attractive. And distribute as widely as possible: – online – mobile – print

Key Factors in Decision-making

*EDge Interactive – SchoolFinder Group, « What Students Want », Group Canadian Student Survey 2011

What types of communications do student prefer?

Students habits have changed

Via the 2014 Noel-Levitz E-Expectations Report

Transform our focus and activities

Traditional recruitment Inbound recruitment

Field activities

Travelon the road

Web et new

media

Promotion and ads

Wrriting content/

multimedia

Promotion and ads

Analysis

Guidance, follow-up

Field activities

New media

Web

Take control of our recruitment funnel

Public

• I discover UdeM (notoriety)

Prospect

• I am interested in programs at UdeM

Contact

• I collect information on programs at UdeM

Candida

te

• I apply for admission at UdeM(and possibly at other universities too)

Admitted

• I’m admitted at the UdeM (and possibly at other universities too)

Enrolled

• I enroll at UdeM

Conv

ersi

ons

AnalysisNeed to develop

metrics and dashboards

ReactivityProactivityBusiness

Intelligence

admission.umontreal.ca

Make content about programs available on Web pagesTransform our viewbook into an online documentCapture information about our prospective students when they come to get the online documentDevelop a single platform for distributing the content (Web and print)

Our goals

admission.umontreal.ca

Our idea

WebsiteDatabase

HTML

PDFPDF

PDFGuide?

Develop a single platform for distributing the content (Web and print)

admission.umontreal.ca

We gathered all public content regarding our programs– Current catalogue / viewbook– Current websites, HTML pages, CMS, …– PeopleSoft: reports, tables, extractions, …– Legacy system, databases, web services, …– Publications: PDF, word documents, InDesign, …

We made an inventory of all our contentWe built a database and entered the content

Build a new website with rich database

Example of our Program detailed page

admission.umontreal.ca

Our first attempt: Adobe XML Import

WebsiteDatabase

XML

HTML

admission.umontreal.ca

Export your database in a special XML format, readable by Adobe InDesignImport your XML into an Adobe InDesign file and map your content elements with design elements

Using Adobe InDesign XML Import Function

admission.umontreal.ca

Pros:– Can produce great results because its flexibility. Once the

content is imported, you can design all elements as you wish inside Adobe InDesign

Cons:– Need to have a developer to export your content into the

Adobe XML file required (not as easy task!)– Not a lot of documentation online– Not a lot of developers that master this technique, and not a

lot of designers know how to manage this type of document– Adobe Import function is picky and somewhat buggy– Does not handle HTML properly

Pros and cons for using this technique

Return on our first attempt

2 to 3 months to accomplish

We produced our Guide d’admission 2014-2015 using this techniqueWe saved 1 to 2 months, and 20 000$ doing it

admission.umontreal.ca

Make content about programs available on Web pagesTransform our viewbook into an online documentCapture information about our prospective students when they come to get the online documentDevelop a single platform for distributing the content (Web and print)

Did we meet our goals ?

admission.umontreal.ca

Create a print version of our guide for high school counsellor onlyCreate a personalized online version for students– Students would come to our site to build their guide

and choose the content they wanted– Allow students to order a customized print copy of their

guide that the University would ship them for free

Our refined strategy

admission.umontreal.ca

Our second attempt: Generating PDF files

WebsiteDatabase

PDF

HTML

PDFPDFPDFPDFPDFPDF

Generating PDF directly from the Web

Create Web page template dedicated for printCreate a specific style sheet for print (CSS file)– @media print { … }

Adjust the styles of your Web elements (fonts, images, colors, texts) to show nicely in print– You can hide elements, like videos, headers, footers,

menus using special CSS code • Ex: .video { display: none; }

How to – Step 1: Create print-specific page

How to – Step 1: Create print-specific page

Convert your HTML directly to PDF using open-source library like PhamtonJS (http://phantomjs.org/)– Programmatically capture web contents and create web

site screenshots in PDF.– You can specify paper format (Letter, A4, …), margins,

orientation (portrait, landscape)– You can have custom footers and headers– You can have page numbers

Learn more: http://jsreport.net/learn/phantom-pdf

How to – Step 2: Convert HTML to PDF

How to – Step 2: Convert HTML to PDF

HTML page PDF document

To make our print Guide d’admission publication, we had to create a “light version” of our PDF– Full PDF contains too many pages

We created a light version of our HTML print-specific page with only the content that we wanted in our print publication– No header– No footer

We converted these light HTML pages into single PDF documentsWe assembled them into a larger InDesign document

How to – Step 3: Create light-version PDF

Result

Return on our second attempt

1 to 2 months to accomplish

We produced our Guide d’admission 2015-2016 using this techniqueWe saved another month doing it, and 10 000$

admission.umontreal.ca

Personalized guide

Our plan to create a personalized guide

PDF

PDF

Guide configuration

stored in a user profile

Cover page

Other documents

Generated PDF from the Web with PhamtonJS

(http://phantomjs.org/)

Merge of all PDF fileswith PDFtk Server

(https://www.pdflabs.com/)

Need to automate this stepPDF

In order to create the personalized version, we need to build a system to allow students to create a profile

Creating the online version – Step 1

Allow students to add programs to their guide

Creating the online version – Step 2

Allow students to customize their guide

Creating the online version – Step 3

Allow 20 programs by guideNo limit on the number of guidesMandatory and optional documentsDescription of all courses inside the programs selectedContent based on type of students (foreign vs local student), cycle (undergrads or grads), etc.Allow to name the guide, delete, modifyAllow to order a print copy

Options for students

Preview

Let students from Canada order a print copyWe created a form to collect their postal addressWe built a daily batch process that generated all personalized guides– with a special front page– merged them into a zip file– sent an email notification

Order a print copy at home

To encourage students to create a guide, we launcheda contestSimple rules:1. Create an account2. Create a guide3. Submit an application

Get a chance to be reimburse your application fees

Contest « Collect your possibilities »

Personalized guide on Instagram

admission.umontreal.ca

RETURN ON OUR EFFORTS

admission.umontreal.ca

Make content about programs available on Web pagesTransform our viewbook into an online documentCapture information about our prospective students when they come to get the online documentDevelop a single platform for distributing the content (Web and print)

Did we meet our goals ?

admission.umontreal.ca

16 400+ accounts were created4 100+ personalized guides were generated– Only 140 orders for a print copy

Results after 6 months…

admission.umontreal.ca

Reduce time to produce our admission guideReduce our cost of producing our guideMaintain good relation with our high school counsellorCollect data about our prospective studentsOpen our publication to foreign and graduate studentsMeasure our recruitment efforts

Outcomes

Tool to measure

Contact database

Create a guide

Login / Registration

ERP

Applications

Link your data

Period of September 15th 2014 to March 31st 2015 :– 23% of students who created an account filled out an

application• Compared to 3,5% of our Website visitors

– 38% of students who created an online viewbook filled out an application• Compared to 19% who did not

– 43% of students who created an online viewbook and downloaded it in PDF filled out an application• Compared to 36% who did not

– 35% of students who created an online viewbook and ordered a print copy filled out an application

Analysis

Plans for our 2016-2017 guide

2 weeks to accomplish

This summer, we will produce the Guide d’admission 2016-2017 using the same technique, with automated mergeWe can generate about guide in less than 10 min!

admission.umontreal.ca

DISCUSSIONS

admission.umontreal.ca

Any question?Slides are avaiable on Slideshare– slideshare.net/marcolivier_ca

Contact me :– Marc-Olivier Ouellet– Email: [email protected]– Twitter: @marcolivier_ca– linkedin.com/in/mouellet

Discussions