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 two program templates, a standard template and a Flexible Extension Program 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 using the standard template.
Here’s an example of a flexible program template
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 Degreeand 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!
How to use the Flexible Extension Program Template
The extension program template provides a simple, structured, block-based editor using layouts to act as a black canvas to which you can create and manage content for programs with total control. All child program pages should continue using the default template with the gutenberg block editor.
Topper
The basics! A dense set of quick facts that address key users questions and allow for easy comparison
- Intro Headline
- CTA buttons: multiple CTA fields with the options to set a default button in the program options page
- 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.
Flexible layout options
Layouts available when editing content. Most layout will include the following (exempt: site ad and registration message):
Heading Level. The heading that uses an H2 will appear in the sticky nav. If the heading is an H3, the title will not appear in the sticky nav.
Layout Anchor. By default, the anchor will use the layout heading unless a Layout anchor has been added.
Accordion
Each accordion item consists of a title (visible heading) and content (hidden text that expands when clicked).
Blog Posts
Allows editors to feature blog post(s). Each blog post will include a post title, a thumbnail (if one is assigned), and categories. The style is responsive based on the number of posts.
Columns
The text editor content can be displayed in one, two, or three columns, with options to choose background colors and add dividers between columns (divider option applies only if you select 2 or 3 columns). You can add as many columns as needed, as they will wrap onto a new line when necessary.
Custom HTML
Allows editors to add custom content, including HubSpot embed codes, HTML elements, or plain text.
Faculty
This layout gives editors the option to manually enter faculty content or select from the Faculty post type.
Icons
This block allows editors to create a content section with icons and accompanying text.
Media and Text
This block allows editors to create a content section with a mix of text, media, and call-to-action buttons.
Registration Message
Program registration messages can be set in Program Options. The registration message will display based on the level assigned to the program. If no registration message is set for the selected level, nothing will render on the front end.
Related Programs
Editor has the option to manually select related programs
Stats
Editors can add a heading, introductory text, and multiple statistical figures with descriptions. If an image is included, the layout adjusts accordingly, positioning the image on the left or right based on the selected option. When more than two statistics are added without an image, the block automatically switches to a multi-column layout for better readability. Additionally, editors can enable a “stat card” style for individual statistics to enhance their appearance.
Site Ad
Editors can select a site ad from the Site Ads post type. The site ad title will be used in the sticky navigation as well as the default anchor. However, editors can still customize the layout anchor if needed
Student Stories
This block dynamically displays student stories based on the selected content source. If “Auto” is chosen, stories are pulled from Student Stories Post Type, while “Manual” allows editors to input custom stories.
Text Editor
Editor can use this layout to add a content editor that allows for both text and multimedia.
Videos
This block allows editors to add multiple videos with an optional introductory text and a heading. Optional grid styling is available if 3 videos are added.
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 three program templates, a standard template (same as used for Harvard Extension School), a Flexible Summer Program Template and a Study Abroad template. The standard template or the Flexible Summer Program 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!
How to use the Flexible Summer Program Template
The Summer Program Template offers a simple, structured, block-based layout. It acts as a blank canvas, giving you full control to create and manage content for Summer programs. All child program pages should continue using the default template with the gutenberg block editor.
Topper
The basics! A dense set of quick facts that address key users questions and allow for easy comparison
- Intro Headline
- CTA buttons: multiple CTA fields with the options to set a default button in the program options page
- 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.
Flexible layout options
Layouts available when editing content. Most layout will include the following:
Heading Level. The heading that uses an H2 will appear in the sticky nav. If the heading is an H3, the title will not appear in the sticky nav.
Layout Anchor. By default, the anchor will use the layout heading unless a Layout anchor has been added.
Accordion
Each accordion item consists of a title (visible heading) and content (hidden text that expands when clicked).
Blog Posts
Allows editors to feature blog post(s). Each blog post will include a post title, a thumbnail (if one is assigned), and categories. The style is responsive based on the number of posts.
Columns
The text editor content can be displayed in one, two, or three columns, with options to choose background colors and add dividers between columns (divider option applies only if you select 2 or 3 columns). You can add as many columns as needed, as they will wrap onto a new line when necessary.
Custom HTML
Allows editors to add custom content, including HubSpot embed codes, HTML elements, or plain text.
Faculty
This layout gives editors the option to manually enter faculty content or select from the Faculty post type.
Icons
This block allows editors to create a content section with icons and accompanying text.
Media and Text
This block allows editors to create a content section with a mix of text, media, and call-to-action buttons.
Related Programs
Editor has the option to manually select related programs
Stats
Editors can add a heading, introductory text, and multiple statistical figures with descriptions. If an image is included, the layout adjusts accordingly, positioning the image on the left or right based on the selected option. When more than two statistics are added without an image, the block automatically switches to a multi-column layout for better readability. Additionally, editors can enable a “stat card” style for individual statistics to enhance their appearance.
Site Ad
Editors can select a site ad from the Site Ads post type. The site ad title will be used in the sticky navigation as well as the default anchor. However, editors can still customize the layout anchor if needed
Student Stories
This block dynamically displays student stories based on the selected content source. If “Auto” is chosen, stories are pulled from Student Stories Post Type, while “Manual” allows editors to input custom stories.
Text Editor
Editor can use this layout to add a content editor that allows for both text and multimedia.
Videos
This block allows editors to add multiple videos with an optional introductory text and a heading. Optional grid styling is available if 3 videos are added.
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:
- Go to the appropriate
Programstab in WordPress and selectAdd New - Look for the
Page Attributesbox on the right side of the editor interface. - Select the
Parentfor which you want the subpage to live under. - Click
Save Draft - 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
Defaultor 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 theProgramstab 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.
