Degree About Pages Documentation

About Pages are meant to serve the same purpose that off-site Organic and Paid Landing Pages do, but on the edX.org domain. The typical 2U strategy is to create an Organic Landing Page, which is indexed by search engines and includes more information about the product upfront, and a Paid Landing Page, which is used in paid media and focused on driving lead conversions. edX Product About Pages accomplish both purposes: it is a content-rich information repository and a powerful conversion driver. Creating About Pages on the edX.org domain is the final step in bringing all 2U products under the edX brand.

The Product About Page is the heart of the discovery experience on edX. These critical mid-funnel pages are where learners land once their interest in a particular product is piqued and they want to know more, and must play a dual role as a repository of information about the product as well as a conversion-generating tool. They also play an important SEO role, as many learners find them via search engines without going through the top of the edX funnel. Simply put, without Product About Pages, edX doesn’t work.

Mega-Spec: Product About Pages

How to Build an About Page

Pro Tip: Try opening a live page in Contentful to mirror the page set up as you build a new page! Here’s an example page to see how the page looks live!

    1. Open the following Global reference docs that you will need when creating the page:
    2. And open the following program-specific docs from your Jira ticket
      • Copy doc: Please review the copy doc. If there is anything highlighted RED in the doc, this sometimes means that you should NOT include it. Reach out in the jira ticket to your assign and cc Elvis to confirm.
      • Assets Folder (download the two images in this folder)
      • Determine your page’s final URL and add it to the tracking doc:
    3. Open “Contentful” via the OneLogin Portal
    4. In a new window, navigate to https://compose.contentful.com/
    1. Starting on the Compose main page, click “Create Page” and choose “Degree Detail Page” as the page type.
    2. Enter the Internal Page name and UUID.
      • In the “All 2U Degrees doc, we recommend finding your program by first doing a text search of the University, then finding the row that corresponds with your program, since program abbreviations are not included in this doc. Sometimes the title in the copy doc is slightly different than the program title that is in the “All 2U Degrees doc”
      • The Internal Page name should be in the following format [PROG-ABBR] Program Title. The program title can be found on column B in the “All 2U Degrees doc”
        Example: [UCB-CYB] Master of Information and Cybersecurity
      • UUID can be found in column A in the “All 2U Degrees doc”
    1. Under the Hero section, click the + button and select “Product Detail Hero” under “New Content”
      • Enter the internal name of [PROG-ABBR] Hero.
      • Lead Form URL is blank
      • Under Organization Logo, click the + button and select “Add New Media”. Upload the logo you downloaded from the “Logos for edX” folder. If you know you’ve already uploaded the logo for another page, you can instead click “Add existing Media”
      • Enter the Subheading – this corresponds to the “description” in the copy doc.
      • Text List is blank
      • Under Background Image, click the + button and select “Add New Media”. Upload the hero image you downloaded from the “Design Assets” folder. 
    2. You will be adding multiple Factoids – these correspond to the Factoid/Stat Section of the copy doc
      • Click the + button then click “Factoid” under New Content. 
      • For Internal name, enter [PROG-ABBR] Factoid 1
      • Heading text corresponds to the bolded stat in the copy doc
      • Value and Citation are blank
      • In the Text field, enter the copy that is below the stat. Do NOT include any footnote number.
        • If your text has a footnote: within the text module, click the + Embed button > Inline Entry. Click the “Create new Footnote” button
        • Click the three dots next to Untitled with the red bar, and click Edit. A new window will open.
        •  For Internal name, enter [PROG-ABBR] Footnote 1
        • For Text, paste in the footnote copy from the copy doc. Links and formatting will carry over automatically. Delete any extra paragraphs that get pasted in.
        • Click “Publish” within the footnote module. You can then close this page.
      • Repeat steps above for additional Factoids  (changing name to 2, 3 etc.).
    1. Scroll to the SEO module section. Click the + button, then select New Content > SEO.
      • Enter the Page title (h1 in copy doc) and page description (description in copy doc)
      • Set Language code to “en”. All other fields are blank for this section.
    1. In the modules section, click the + button and select “Sticky Nav Entry Module”. We will be adding the first On-Page Nav item from the copy doc. Enter the Link text: This is typically “Overview” for the first item.
    2. In the modules section, click the + button and select “About the Program Module”
      • For Internal name, enter [PROG-ABBR] About the Program
      • For Heading, check the copy doc to see if you will be using the default text, otherwise paste in the appropriate h2 value under the Overview Section
    3. Under Checkmarked Items, click the + button and select new “Text List Module” – this is for the Value Props in the copy doc
      • For Internal name, enter [PROG-ABBR] Value Props
      • Keep the theme as background-white, and Header is left blank.
      • Under Text List Items, click + button and select New Text item module
        • For header, enter the bolded text (no emdash)
        • For description, enter the non-bolded text. Do not include the emdash or any footnotes
        • If you need to add a footnote, you can follow the steps noted above in step 4e, Hero section.
        • Repeat for additional value prop items.
    4. Scroll to the Content section, and paste in the h2 and content from the copy doc that is right after the value props. This is typically about the program.
      • Select the heading and change the text style from Normal Text to h2. 
      • Superscript, Lead Form URL are left blank. Display Checkmarked Items First should stay set to “yes”
  • Note that some programs do not have this section in the copy doc- this is because the copy is in a separate global doc.

    1. Next, scroll down to right above the Taxi form and click the + button and select “Statistic Icon Module” to add the Tuition content.
    2. For internal name, enter [PROG-ABBR] Tuition and fees
    3. Enter the heading and body text from the TUITION copy doc – note that there is a separate, standard tuition copy doc that was noted above. Do NOT use the blurb in the main copy doc if this was provided.
      • Link the words “Tuition and fees” in the body text to the program-specific tuition page that was included in the Jira ticket or copy doc.
    4. In the icon section, click the + button and click “add existing media. Then search for the “dollar” icon and add.
    5. Under Icon label, enter “Tuition cost” or “Tuition Range” depending on what tuition you were given
    6. Under Statistic, enter the tuition cost or range that was provided in the jira ticket. If different amounts were given in the copy doc vs jira ticket, please use what was given in the Jira ticket.
    1. In the modules section, click the + button and select “Add Existing Content”. 
    2. In the content dropdown, select “Disclaimer Module”, then search for “Technology and services powered”. Click “Insert 1 entry”. Leave all fields as-is.
    1. Next, scroll down to right above the Taxi form and click the + button and select “Sticky Nav Entry Module”. We will be adding the next On-Page Nav item from the copy doc. Enter the Link text: that was noted in the copy doc. Sometimes this is different than the Section name (eg. “Course Spotlight” rather than “Curriculum”)
    2. Scroll down and click the + button and select “Featured Products Module” to add the Curriculum content.
      • For internal name, enter [PROG-ABBR] Curriculum
      • For heading, you may need to replace the default copy “Featured courses”. Enter the h2 under the Curriculum section of the copy doc. 
      • For introduction, paste in the paragraph(s) below the curriculum’s h2.
    3. To add the individual course descriptions, click the + button under the Product List section, and click New > Text List Module
      • Under Title, enter [PROG-ABBR] Courses
      • Theme can be left as background-white. Header is blank.
      • Under Text List Items, click the + and add a new Text List Item
        • For Header, enter the bolded course name from the copy doc (don’t include colon)
        • For Description, ad the non-bolded course description from the copy doc (don’t include colon)
        • Repeat for all courses.
      • CTA Label and Theme values can be left as-is.
    1. Next, scroll down to right above the Taxi form and click the + button and select “Sticky Nav Entry Module”. We will be adding the next On-Page Nav item from the copy doc. Enter the Link text: that was noted in the copy doc in the Sticky Nav section. 
    2. Scroll down and click the + button and select “Admissions About Section Module” to add the Admissions content.
      • For internal name, enter [PROG-ABBR] Admissions
      • Enter Heading from h2 and Description from paragraph below h2 in the copy doc
      • For the Checklist, paste in all of the items noted. You will then need to delete the check icons, and set the copy to be an unordered list.
    1. Next, scroll down to right above the Taxi form and click the + button and select “Sticky Nav Entry Module”. We will be adding the next On-Page Nav item from the copy doc. Enter the Link text: that was noted in the copy doc in the Sticky Nav section. 
    2. Scroll down and click the + button and select “Placement About Section Module” to add the FLEX content (typically Immersions).
      • For internal name, enter [PROG-ABBR] Immersions
      • Enter Heading from h2 in the copy doc
      • For Image, click the + button and select “Add New Media”. Upload the flex image you downloaded from the “Design Assets” folder. 
      • Add body text paragraph(s) from the copy doc. You may need to delete extra paragraphs.
  • Note: Some programs are not using an FAQ section – so if your copy doc does not have one, you may skip this section!

    1. Next, scroll down to right above the Taxi form and click the + button and select “Sticky Nav Entry Module”. We will be adding the next On-Page Nav item from the copy doc. Enter the Link text: that was noted in the copy doc in the Sticky Nav section. 
    2. Scroll down and click the + button and select “FAQ Module”
      • For internal name, enter [PROG-ABBR] FAQ
      • Enter Heading from h2 in the copy doc
      • For Title Emphasis enter “questions” (not in quotes)
      • Under FAQs click the + button and add a new FAQ
        • Internal name is [PROG-ABBR] FAQ 1
        • Enter the question and answer from the doc
        • If you need to add a footnote, you can follow the steps noted above in step 4e, Hero Section.
        • Repeat for all FAQ items in the copy doc (changing name to 2, 3 etc.)
      • Scroll down to the bottom of the FAQ section and replace “default” with  “accordion” in the Appearance section.
      • Next, update the Theme to “background-light”
    1. Next, scroll down to right above the Taxi form and click the + button and select “More Info CTA Module”
      •  For internal name, enter [PROG-ABBR] More Info
      • Under link, click the + button and add a new link. Enter “#requestmoreinfo” as the URL 
      • For “is external” select ‘no’
      • All other fields can be left as-is
    1. Next, scroll down to right above the Taxi form and click the + button and select “Footnote Module” – this is to add our footnote references
      •  For internal name, enter [PROG-ABBR] Footnotes
    1. Next, scroll down below the Taxi form and click the + button and select “Taxi Form”.
      • Enter the form ID and Post-submit URL (TY URL) provided in the jira ticket.
        Note: that you may need to open the OLP link referenced in the jira ticket to find the Form Grouping.
      • Enter the following for title and subtitle:
        Title: “Request More Information”
        Intro text: “Answer a few quick questions to get more information about the program”

Publishing and Previewing

Once you have added all content, its time to hit the big green “Publish” button. This doesn’t actually make the page publicly available on the site. Once you’ve hit publish, you’ll need to wait for engineers to run a Contentful “build”. This happens a few times a day. You can monitor when this happens in Slack on #project-website-deploys.

Sometimes this works and sometimes it doesn’t, but if you replace https://www.edx.org with https://prospectusmaster.gatsbyjs.io/ in your URL, you may be able to preview your page ~15 minutes after publishing the changes.

Once you think a build has been done (this can sometimes take 24 hours, you can preview your page.

If you made changes to a live page:

  • They will appear on the live URL

If you created a page with existing catalog integration (i.e. cards on edx.org)

  • Previewing a new page in the CMS requires a ?redirect=false tag added to the URL
  • Your page URL will be in the following format: edx.org/[category]/[slug]?redirect=false
  • Example: https://www.edx.org/masters/master-of-science-in-computer-science?redirect=false 
  • The category is either masters, bachelors, doctorate, certificate or license. (found in Column c in the All 2U Degrees doc)
  • The Slug is found in column L of this doc: (DRAFT) Degrees Catalog Data Sheet (search by UUID) 
  • After stakeholder review, you will then need to reach out to Steve’s team about publishing and removing the redirect

If you created a page for a net-new program (e.g. programs that need a new UUID created on the edX side)

  • To review previews, only the page is the CMS should be published. This will build the page behind the secure-preview flag at edx.org/secure-preview/[product]/[slug] 
  • With a login u: program-viewer p: teachevery1everywhere
  • The category is either masters, bachelors, doctorate, certificate or license. (found in Column c in the All 2U Degrees doc)
  • The Slug is found in column L of this doc: (DRAFT) Degrees Catalog Data Sheet (search by UUID)

Once you’ve finished building your page and published, update the tracking doc with the URL and new status, and include any notes/questions you have

De-Coupling From FLEX Detail Page (Usually MVU pages)

For some pages, we will need to de-couple the new page from either the FLEX Detail GRAD page, or the FLEX Detail UG page. You will know that you need to do this when your new URL redirects to a page like this. To de-couple the pages, you will:

  • Go into Contentful
  • Search for the FLEX page (type in MVU)
  • Select either the Grad page or the Undergrad FLEX page
  • Find the UUID of the page you just built
  • remove the UUID from the list on the page
  • Publish the FLEX page
  • Go back and re-publish your new page (this is necessary to do)
  • Wait for the next build

Video Training

Edyta’s work-along of building edX page from existing page

Our workshop session recording is here.

As you are building the page, you may follow along with Steve’s training video

I’ve outlined different sections of the video for quick reference:

  • 00:00 Overview
  • 20:50 Creating a new “Degree Detail” page
  • 25:12 Page name and UUID
  • 26:33 Hero Section
  • 32:30 Factoid/Stat Section
  • 39:10 SEO Content
  • 41:27 About Section (About the Program Module)
  • 49:52 Legal Disclaimer (this always goes below the Tuition section)
  • 51:54 Curriculum (Featured Products Module)
  • 56:30 Admissions (Admissions About Section Module)
  • 58:14 FLEX aka Immersions (Placement About Section Module)
  • 1:02:41 FAQ (FAQ Module)
  • 1:09:15 Final CTA Box 
  • 1:10:57 Tuition and Fees (Statistic Icon Module)
  • 1:14:53 Taxi Form