Skip to content

There are several program page templates available across the DCE multisite ecosystem, but they’re tailored to specific brands and only available on each site as needed.

Below you’ll find details around each template available for Harvard Extensions School, Harvard Summer School, and Professional & Executive Development, as well as how to use the pages the way they were designed to be used.

Extension

Harvard Extension School has a single Program Page template that can be used to power program pages for:

  • Undergraduate Degree Program (1 with subpage for joint program)
  • Undergraduate Certificate Programs (many)
  • Graduate Degree Programs (many)
  • Graduate Certificate Programs (many)
  • Pre-Medical Program (1)

Here’s an example of a graduate program.

How to use the standard template

Most blocks are optional, so use them in a way that best suits a program. That said, consistency across similar programs, like all graduate degrees, can help with users who are comparing across options.

Topper

The basics! A dense set of quick facts that address key users questions and allow for easy comparison

  • Key Stats: Up to 4. Try to use the same key stats across a set of programs at the same level, like all Graduate Certificates.
  • Photo
  • Intro headline/body 
  • CTA Override: Only use this if you want to override the default CTA which is powered by Program Options
    • If you do override, remember you’ll need to remove this if you want it to once again by controlled centrally.

Outcomes

Help students understand what they’ll gain from this program/experience.

  • If applicable, include here the heading Your Harvard Degree and write out the degree title people will earn.

Student Snapshot

Give prospects insights into who is in this program. How old are they? Do they work full time? How do they approach coursework? Are they successful?

Requirements & Admissions

Preview the Earn Your Way In admissions process if applicable, or outline what it takes to get started or complete simpler programs, like certificates. The optional CTA for this section allows you to link to a degree requirements page if needed.

Faculty

Tease some of the top program faculty so students can see who they’ll be learning from.

Cost & Aid

Speak to the cost of the program and whether or not any financial assistance is available. Note: This cost area is not tied to the universal cost options, so you’ll need to update any hard figures included here when costs change.

The Why

What sets this experience apart from others out there in the marketplace? This block is kind of like an in-house ad. It can speak to Harvard Extension School at large or to the program itself. Site ads are managed by a WordPress template so you can create a few ads and reference them on many pages — and any updates will be pushed to every page they appear on.

Related Programs

Introduce users to other programs that might align with their interests.

Courses: Optional!

This second is collapsed by default when you build new program pages because it’s optional. It could be used to tease some interesting courses that are available as part of a program that could entice users to keep exploring this program. They’re not tied to the course catalog so something to keep in mind.

Flexible Content: Optional!

  • First Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!
  • Second Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!
    • Registration Message: If default settings are available for programs, this block will prioritize those settings first. However, you can use this block to add a custom registration message that will be displayed on a card.”
  • Third Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!

 

Program options

Program Options are where you can centrally manage program-related content that changes frequently and is consistent across pages.

Program Call to Action

  • Switch the main CTA on the program pages based on time of year, from Request Info or Register Now, or other options.
  • You can override a program CTA by editing it on the program page itself. But you’ll need to remove it to revert it back to the centralized version.

Undergraduate and Graduate Course Cost

  • This is used, in combination with the number of courses associated with a program, to calculate the cost across program pages.

Program Registration Message

  • This is used to set default registration message that will be displayed when you add a “Registration Message” layout in the second flexible content block. You can set default registration for the following EXT programs:
    • Graduate Certificate
    • Undergraduate Certificate

Summer

The Harvard Summer School site has two program templates, a standard template (same as used for Harvard Extension School) and a Study Abroad template. The standard template should be used for each of the high school programs, and the study abroad template should be used for each Study Abroad city/program.

Here’s an example of a study abroad program.

How to use the standard template for high school programs

Most blocks are optional, so use them in a way that best suits a program. That said, consistency across similar programs can help with users who are comparing across options.

Topper

The basics! A dense set of quick facts that address key users questions and allow for easy comparison

  • Key Stats: Up to 4. Try to use the same key stats across a set of programs at the same level, like all Graduate Certificates.
  • Photo
  • Intro headline/body 
  • CTA: Set the appropriate CTA for the time

Outcomes

Help students understand what they’ll gain from this program / experience.

Student Snapshot

Give prospects insights into who enrolls in this program so they can start imagining themselves there.

Requirements & Admissions

Explain who is eligible to apply and the various sessions available. Use the CTA to link to the admissions detail page for the program.

Cost & Aid

Speak to the cost of the program and whether or not any financial assistance is available. Use the call to action to link to the detail page on cost and aid.

Courses 

Tease subject areas or interesting courses that are being offered to entice users to explore more. Also use the introduction to link to the course catalog.

The Why

What sets this experience apart from others out there in the marketplace? This block is kind of like an in-house ad. Site ads are managed by a WordPress template so you can create a few ads and reference them on many pages — and any updates will be pushed to every page they appear on.

Related Programs

Introduce users to other programs that might align with their interests.

Faculty: Optional!

Tease some of the top program faculty so students can see who they’ll be learning from.

Flexible Content: Optional!

  • First Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!
  • Second Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!
    • Registration Message: If default settings are available for programs, this block will prioritize those settings first. However, you can use this block to add a custom registration message that will be displayed on a card.”
  • Third Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!

How to use the study abroad template

Most blocks are optional, so use them in a way that best suits a program. That said, consistency across similar programs can help with users who are comparing across options.

Topper

The basics! A dense set of quick facts that address key users questions and allow for easy comparison

  • Key Stats: Including program dates, application deadline, cost and housing
  • Photo: Set by featured image
  • Intro headline/body
  • CTA Override: Only use this if you want to override the default CTA which is powered by Study Abroad Options
    • If you do override, remember you’ll need to remove this if you want it to once again controlled centrally.

Program Details

Help students understand what they’ll gain from this program / experience and give an overview of how the program is structured.

Courses 

Outline the courses or course options for this study abroad program.

Housing

Explain the accommodations this program uses and include more details or interesting selling points about the city. .

Application

Explain who is eligible to apply. Use the CTA to link to the admissions detail page for the program.

Cost & Aid

Speak to the cost of the program and whether or not any financial assistance is available. Use the call to action to link to the detail page on cost and aid.

Flexible Content: Optional!

  • Third Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!

Study abroad options

The study abroad call to action and the application deadline can be controlled via the Study Abroad Options in WordPress, so you can control that key data across all SA programs at once. The CTA can be overridden on a specific page if needed.

Professional & Executive Development

The Professional & Executive Development site has a custom program template that can be used to power all of its programs. Here’s an example of a P&ED program.

How to use the template

Most blocks are optional, so use them in a way that best suits a program. That said, consistency helps users who are comparing across options.

Topper

  • Intro headline and body

Date Group Content 

The content below is all tied to the date the program is being offered on. You can add as many additional dates as needed.

  • Date
  • Call to Action Link: Registration or waitlist. Remove if program is closed.
  • Length, Format, Cost and Registration Deadline. Remove registration deadline is program is closed.
  • Instructor
  • Program Details/Schedule: Really any info that’s date-specific

The rest of the content in the template/on the page is shared across dates.

Outcomes

Speak to what students can expect to learn and gain from this program.

Student Snapshot

Describe who this program is best suited for and include any stats about past program participants.

The Why

What sets this experience apart from others out there in the marketplace? This block is kind of like an in-house ad. It can speak to PDP at large or to the program itself. Site ads are managed by a WordPress template so you can create a few ads and reference them on many pages — and any updates will be pushed to every page they appear on.

Flexible Content

  • Third Flexible Content
    • Content section: You have a title, description, and optional image. You can add a few if needed!

Related Programs 

Introduce users to other programs that might align with their interests.

 

Adding Subpages to Programs

In order to keep program subpages in the same area of WordPress as their program pages, we needed to build something that’s a little weird at first but it’s super easy to get the hang of.

Here’s how to start a program subpage:

  1. Go to the appropriate Programs tab in WordPress and select Add New
  2. Look for the Page Attributes box on the right side of the editor interface.
  3. Select the Parent for which you want the subpage to live under.
  4. Click Save Draft
  5. Voila! When the page reloads, you’ll be brought to the Gutenberg editor and able to create a page using all the options available on the Default or basic page template and the breadcrumbs will lead you back to the parent program page. You’ll always be able to find this page in the Programs tab moving forward.

Subpages are available across all brands and program templates.

User Testing Findings: Fall 2020

In the Fall of 2020, we did some initial testing on the program pages. Pages tested included an Extension graduate program, a Summer high school program, and a PDP program. Here are some top level takeaways that should be kept in mind when developing content for programs:

  • Make CTAs clear and focused — When testers noted that “Get Info” wasn’t clear to them, that resonated with us. This could be about adding context on the form page to describe what exactly the person submitting the form is getting in return. You might also consider updating some CTAs to be more reflective of that outcome, like “Talk to an Advisor.” Users also noted the number of CTAs on the page, so it’s important to remember that more CTAs mean more confusion around what the best next steps for users to take is. 
  • Spell out key program information more explicitly — The key points of confusion for Extension School were around the “Earn Your Way In” application process and the on campus requirement. Consider adding more details around these topics right on the page, before clearly pointing users to where they can find all of the details elsewhere on the site. 
  • Include more context around the degree — Almost every Extension tester had questions about how their degree would be perceived and whether it was a “real Harvard degree” or not. This might be something worth expanding on in the area where you include the degree name, or explicitly linking to another page that talks about that topic. 
  • Clarify some language around aid — Consider using “Cost & Financial Aid” instead of “Cost & Aid” so it catches the attention of prospects looking for that key info. 
  • Users appreciated proof points around the success of the program — Build on these stats and fill gaps where needed.
  • Invest in representative photography — Consider including more imagery that shows the spaces students occupy and how they interact with each other. 
  • For PDP, include schedule breakdown on more programs — Users liked the inclusion of the schedule breakdown in our test program. Consider including more details about what each day of the program will be like for more of your programs.