The Programs, Interests, and Related Programs components were created for the Degree Programs section of the site. Each plays an important role in user journeys that lead to enrollment conversions.
The Timeline component was created for the Professional Development landing page, to convey that people can benefit from professional development at every stage of their career, and before and after obtaining a degree at Penn GSE.
In the future, despite their intended use, and particular names, you may find them useful on other key pages.
PROGRAMS
What it is:
A complex, interactive, major wayfinding tool to different degree program types.
UX purpose:
- Exploration and Storytelling
- Wayfinding
Usage guidelines:
- The group Title and Description start the story and set the stage.
- Think of each of the three sections as starting points for three distinct paths.
- Keep item Titles concise, as in the example.
- Make item descriptions inviting, but also short and clear.
- Make wayfinding links concise, as in the example.
- Choose your most evocative images, since images are major pieces of content here.
- This component is meant to be evergreen.
Programs example:
Programs that Fit Your Plans
Our executive doctoral students develop skills necessary to align learning initiatives with their organization's strategy, while also developing the scholarly research skills needed to write a doctoral dissertation.
Master's Programs & Certifications
We have an extensive list of prgrams, erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Doctoral Programs
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
Executive Programs
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
We have an extensive list of prgrams, erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
INTERESTS
What it is:
A complex, interactive, major wayfinding tool to degree program interest area landing pages.
UX purpose:
- Exploration
- Informational
- Wayfinding
Usage guidelines:
- Interests is designed to open progressively on scroll, so it will be engaging to the early-stage explorer of your degree programs. It allows visitors to browse any or all interest areas before committing to any single interest area.
- Here too, interest area descriptions should be compelling, but also short and clear. The UX goal is to click through, not linger.
- Think of this component as opening the road to 10 or more interest area journey paths.
- Interests is meant to be evergreen, although you can add or subtract interest areas to it.
- Although created for the Degree Programs landing page, and intended to lead to conversion events on interest area landing, and program detail pages, you may decide to also use it on other major pages.
Interests example:
Interest Areas
Education Policy
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Counseling & Human Development
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Quantitative Methods
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Workforce Learning & Entrepreneurship
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
RELATED PROGRAMS
What it is:
A special version of the Topic Group that unifies different degree levels (credentials) of the same discipline, and contains high-level program metadata.
UX purpose:
- Informational
- Wayfinding
Usage guidelines:
- Related Programs is created for Interest Area landing pages, and gives you total control over associating degree program disciplines with particular interest areas.
- It is necessary to include on every Interest Area landing page, so explorers who land can easily click through to the degree level (credential) that aligns with their career plans.
- Be sure to include all applicable programs' metadata, as well as direct links to their program detail pages.
- Keep the program metadata and the links below the description in the same order.
- In addition to using Related Programs on Interest Area landing pages, you could experiment with it on these page types, as well as others:
- As a Related Programs component at the end of degree program detail pages, instead of the Card Group seen in the design mockup. Consider limiting metadata and links to degree programs in the same degree level, since the visitor has already committed to exploring a program by degree level.
- As a Related Degree Programs component at the end of professional development detail pages, especially to accentuate learning paths that start with a professional development offering, and culminate in a higher degree.
Related Programs example:
Related Programs
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.
Independent School Teaching Residency
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
Education Policy
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
Educational Linguistics
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct. Praesent commodo cursus magna, vel scelerisque nisl consectetur.
TIMELINE
What it is:
A complex, interactive, major wayfinding tool designed to convey a career development timeline and offerings to consider at career milestones.
UX purpose:
- Exploration and Storytelling
- Wayfinding
Usage guidelines:
- The component Title and Description start the story and set the stage.
- Think of each Timeline item as a particular point of time in a career journey, with callouts appropriate to that point in time.
- Keep item Titles concise, as in the example.
- Make item descriptions inviting, but also short and clear.
- Make wayfinding links concise, as in the example.
- Images are huge and very important for telling the story. Choose them carefully.
- This component is meant to be evergreen, except for your swapping in professional development offering links, depending upon availability and business priorities.
- Although this component was designed to convey milestones in the passage of time, you could adapt it for other situations where a progressive reveal of closely related items would be beneficial.
Timeline example:
Timing is Everything
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.
Early in Career
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.
Before Pursuing Additional Degrees
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornar.
For Career Advancement
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna.
Early in Career
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.
Before Pursuing Additional Degrees
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornar.
For Career Advancement
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna.