Home – Programs Options (DO NOT DELETE)
NOTE: Mockups below were updated 11.15.23 to showcase the different homepage options. Cases will need to be reviewed on a partner-by-partner basis. SEO will denote the approach in the content matrix. Please do not delete. Details below:
| Options | Details |
|---|---|
| Programs Display | Option will be used if 2 to 6 programs are on the site. Featured Programs include 2 display options: program slider or cards. This option will be denoted in the content matrix with the template selection of [template names]. Note: A featured program section for partners with more than 6 programs will not happen at this time. This will need to be tested before implementing. Reach out to Allyson with questions or potential testing candidates. |
| Level of Study Display | Option will be used if 7 or more programs are on the site. This includes 1 display option: cards with buttons. SEO guidance will determine when Level of Study (LOS) is used. Recommend using the option with the least amount of groups reduce number of cards needed on the homepage. Note: other category not used on the homepage may appear in the main menu. If a partner has an extensive number of LOS, CAT has the ability to use more general buckets or create different buckets from that on /programs/ page. CAT can grab the hyperlink URL by multiselecting the options on the /programs/ page. Recommended if dealing with a lot of groups or an off number of groups. Example: Can use undergrad & grad on homepage, while /programs/ page can have it more granular LOS like associates, bachelors, etc. This option will be denoted in the content matrix with the template selection of [template names]. Live examples from 2023 launches: https://online.baypath.edu/ & https://online.brenau.edu/. |
| Field/Area of Study Display | Option will be used if 7 or more programs are on the site. This includes 1 display option: image cards with buttons. SEO guidance will determine when Area/Area of Study (FOS) is used. Recommend using the option with the least amount of groups reduce number of cards needed on the homepage. Note: other category not used on the homepage may appear in the main menu. If a partner has an extensive number of FLOS, CAT has the ability to use more general buckets or create different buckets from that on /programs/ page. CAT can grab the hyperlink URL by multiselecting the options on the /programs/ page. Recommended if dealing with a lot of groups or an off number of groups. Example: Can use Business on homepage, while /programs/ page can have it more granular FOS like Marketing and Financial etc. This option will be denoted in the content matrix with the template selection of [template names]. Live example from 2023 launch: https://online.smsu.edu/ |
CAT NOTE: If using cards option, background color should be applied to the 1 column to prevent the cards from blending into the background.
Online Programs Heading (flexible heading), H2
Content uses the default font size.
OPTION 1 – Program Slider: Slider should have 3-6 programs only. Program selection will be “All.” For more details, refer to details in the table.
OPTION 2 – Cards: Cards should have Less than 3 programs only. Cards must include featured program name as denoted by SEO and the secondary button below. CAT will need to update the ‘X’ in the “Screen Reader Label” to include the program name; however the other button wording is standard “Explore Program.” For more details, refer to details in the table.
Featured Program 1
Explore ProgramsFeatured Program 2
Explore ProgramsFeatured Program 3
Explore ProgramsLevel of Study Heading (flexible heading), H2
Content uses the default font size.
OPTION – Cards: LOS option will be used if there are 7 or more programs on the site. Cards will show LOS per SEO guidance. Cards must include level/field name as denoted by SEO and the secondary button below. CAT will need to update the button to include the LOS name. For more details, refer to details in the table.
Level of Study 1
Explore [LOS Name] DegreesLevel of Study 2
Explore [LOS Name] DegreesLevel of Study 3
Explore [LOS Name] DegreesField/Area of Study Heading (flexible heading), H2
Content uses the default font size.
OPTION – Image Cards: FOS option will be used if there are 7 or more programs on the site. Cards will show FOS per SEO guidance. Cards must include level/field name as denoted by SEO and the secondary button below. CAT will need to update the button to include the FOS name. For more details, refer to details in the table.
Image recommendations: Centered and zoomed out images work best for the image cards below.
NOTE: These mockups were created 04.18.23 to showcase options for replacing the program slider on the homepage. More details below. Please do not delete until you’ve received confirmation from Allyson and Ariana to do so.
| Options | Details |
|---|---|
| Feature Programs | May or may not be needed based on Brand needs and SEO guidance. Can use program slider or cards (with or w/o images or buttons). |
| Field or Level of Study Hyperlinks | SEO guidance on which to use (field or level). Recommend using the one with the least amount of groups to not take up too much space on the homepage (also, both of these are usually listed in the mega nav main menu anyways). Also have the ability to use more general buckets or create different buckets from that on /programs/ page. Ex: Can use undergrad & grad on homepage, while /programs/ page can have it more granular like associates, bachelors, etc. We can grab the hyperlink URL by multiselecting the options. This is recommended if dealing with a lot of groups or an off number of groups. Can use icon content or cards (with or w/o images or buttons). |
| Feature Programs AND Field or Level of Study Hyperlinks | Combo of the above; however, if cards is used for one, recommend using a different component for the other. |
| Other | Cases will need to be reviewed on a partner-by-partner basis to see which of the proposed options will work best. Unfortunately, this won’t be a one size fits all, but at least we have standards to select from to help with this. We’ll need SEO’s guidance on this approach. Might be worth having a task in new partner project to decided or a instruction note added to an existing SEO task to work on. Need a task to test post launch? |
Featured Programs Heading (flexible heading), H2 w/ h3 class
OPTION 1 – feature program slider: Slider should have 3-6 programs only. CAT would use a Custom program slider. This will allow Brand to highlight programs. Better alternative than manually ordering /programs/ page.
OPTION 2 – cards: Cards should have 2–6 programs only. Cards can have or exclude an image (can use existing overview images from site), must include featured program name, and can use a button or hyperlinked text. Some variations are displayed below.
Featured Program 1
Explore ProgramsFeatured Program 2
Explore ProgramsFeatured Program 3
Explore ProgramsField or Level of Study Heading (flexible heading), H2 w/ h3 class
OPTION 1 – cards: Cards should show field or level of study per SEO guidance. Cards can have or exclude an image (can use existing overview images from site), must include level/field name, and can use a button or hyperlinked text. Some variations are displayed below. Multi select can help if we have an off number/too many, allowing us to group multiple fields or levels into one hyperlink.
Field or Level of Study 1
Explore ProgramsField or Level of Study 2
Explore ProgramsField or Level of Study 3
Explore ProgramsPer 9.25.23 Meeting EXCLUDE THIS OPTION. OPTION 2 – icon content: Icon content should show field or level of study per SEO guidance. Icons will be: stacked, large, and centered. CAT will select the appropriate icon based on the text. Field/Level name will be hyperlinked. Multi select can help if we have an off number/too many, allowing us to group multiple fields or levels into one hyperlink.
NOTE: If using cards option, background color should be used in 1 column to help the cards not blend into the background.