The Perfect University Course Page — Design Guidance

Discover the best practices from our in-depth research.

Just like any company or institution, universities are not exempt from maintaining a pristine, clear-cut digital image. While the website is the point of contact between prospective students and universities, the course page holds much more value when it comes to these institutions. This is especially true when it comes to pages that sell university courses.

Well-designed Page = Professionalism

Think about it this way, you’d feel more professional in a suit and tie than dressed slopily. The same thing applies to design.

The Creative Navy team of researchers has benchmarked and analysed 280 university websites from around the globe (including 120 from the UK) with the aim to identify useful patterns for the course page — both in terms of content and design. Here are only a couple of things done during this in-depth research:

• Creative Navy interviewed 45 prospective masters and bachelor programme students.
• Surveys were conducted with individuals within the academic space.
• Over a hundred session recordings have been gathered, showcasing specifically what users do on this type of page.
• Carefully analysed 280 universities, pinpointing design patterns and common mistakes.

Photo by Mikael Kristenson on Unsplash

Course Page Benchmarking

Outlined below are the key findings, with a focus on the elements observed more commonly, as well as those usually missing across these websites. All of these components make up the usual course page. We have analysed each one individually paying close attention to design details.

Above the fold

This section marks the first impression as it is usually the first thing that visitors see when they land on a webpage. It sets the tone and provides an initial idea of further content.

• Furthermore, the “above the fold” sections help in establishing the information hierarchy on a page while also maintaining user engagement.
• Knowing this, it is without doubt a section that needs to be carefully designed, to be as appealing to users as possible. After all, if this top section does not impress then it’s more likely for the bounce rate to increase.
• We have selected a few variants encountered on university websites to help designers visualise this sort of section and even gather ideas from other key players’ work.

Keep this in mind!

• While certain best practices help designers create high-quality “above the fold” sections, there is no definitive recipe.

Here are some examples to get you inspired:

Here are some tips & tricks:

• Provide a clear and engaging overview — title and concise description. The first impression needs to instil trust and professionalism, just like in any business website. This also allows for easier skimming, as users can easily find the most important pieces of information at first glance.
• While it is not imperative to have a CTA present in this section, including one might encourage users to take the next step faster. This is also helpful for students who already want to join the course.
• Incorporating a visually appealing form of media (be it a picture or a short video) will capture the users’ attention and provide a more immersive experience. As practised in the hiring/careers sections, images of people involved in the course can help the user relate more.

Units breakdown

The unit breakdown section is found on a few of the course pages, however it’s not universal. As a rule of thumb, such a section needs to follow a certain set of visual rules. The most important aspect of this section’s design stands in the visual hierarchy. Without it, implementing such a component on your page will likely damage more than aid.

• Keep the “units breakdown’ section easy to digest.
• Provide only relevant information to those interested in learning more.
• Once again, maintain a pristine and clear visual hierarchy.

Generally, the unit breakdown section showcases course unit (or module) titles. These titles should be descriptive, allowing for easy scanning. To successfully utilise these markers, the titles should also reflect the main themes or subjects covered within each unit.

Here are some design examples:

Testimonials

This section, if implemented properly, can endorse the university’s courses through firsthand accounts of students’ experiences. Such sections offer insights into the quality of education, the faculty’s expertise and the learning environment (indirectly, through these testimonials).

• Testimonial sections allow prospects to relate better to the students involved in the course.
• This section leads to fostering trust and confidence in prospects’ decision-making process.

Here are some great examples:

Keep in mind, that most of these Testimonial sections have one thing in common: they showcase people — this makes them more persuasive.

• On top of this, according to our research, videos tend to offer much more credibility when it comes to testimonials, so take that into consideration when designing this section.

Now, here is what to avoid when designing Testimonial sections:

• Avoid cramming too many testimonial videos or texts into a small space — this will inadvertently lead to overcrowding and difficulty in reading. A cluttered layout can overwhelm users and make it challenging to focus on individual testimonials.
• A testimonials section should represent a diverse range of voices and experiences to resonate with a broader audience. However, this might not be possible in all cases when the section is designed for university course pages.
• Testimonials that lack specific details or ones that are not attributed to any actual individuals will appear less credible — they will fail to resonate with visitors. Users are more likely to trust actual names, photos and identifiable details.
• Placing the testimonials section in an obscure location or burying it with multiple layers of navigation will diminish its visibility (naturally). If using such a section, make sure it is easily accessible.

Career Prospects

The Career Prospects section serves as a gateway to the professional opportunities available for students upon completion of their studies. This section is meant to offer valuable insights into the potential paths to follow as a graduate of a certain course — possible careers, industry partnerships, job placement statistics etc.

• Prospective students are more likely to engage with the course when they are provided with tangible evidence of their career possibilities.
• This also empowers prospective students to make informed decisions about their career paths.
• Similar to testimonials, “Career prospects” sections are able to highlight alumni success stories — demonstrating the value and relevance of the course.

Here are some design examples:

Tips and tricks:

• As in all aspects of such a page, avoid misleading information — do not be vague about career prospects associated with the course. Present realistic expectations for students.
• Ensure that the data utilised within the section is up-to-date and relevant. Avoid showcasing outdated statistics or career pathways that no longer reflect the realities of the job market.
• Limited interactivity might not always be a problem for this section, but it is worth keeping in mind that incorporating features such as clickable elements, animated graphics or infographics will boost engagement.
• Overly lengthy content could seem informative and valuable, but it is not. Keep the content concise and to the point.

How to Apply

This section serves as a critical resource for prospective students. It’s without a doubt probably the most common part of course pages. It helps prospective students through the application process, outlines requirements and deadlines (depending on the page).

• The How to Apply section provides clear and comprehensive guidance. This ensures that applicants understand what is expected of them and how to proceed with their applications.
• More than this, the section aids in accessibility and inclusivity by making the application process more transparent and understandable for all prospective students. It levels, in a sense, the playing field.
• The section boosts user engagement due to the convenience it poses by presenting and consolidating all relevant information and resources. It streamlines the process, saving time and effort in gathering information from multiple sources.

Here are some examples:

Tips and tricks:

• Ensure that the “How to Apply” section is easy to find and navigate to within the page. Use intuitive menu labels and prominent CTAs as seen in the give examples.
• Visual clarity should be top-notch. This means that the language should be clear and concise to explain application requirements, deadlines, and procedures.
• Returning to the topic of CTAs, these should be clear and easily visible. After all, this will both boost user engagement and consolidate the professional image of the page. Use descriptive and action-oriented language to encourage user engagement.

General Navigation

This section serves as guidance for prospective students through the various aspects and other sections of the course page, while also helping them navigate the wealth of information available.

• Here, users find essential information about course structure, curriculum details, faculty profiles, and additional resources. By offering clear and intuitive navigation, this section ensures that users can easily explore different facets of the course without feeling overwhelmed or lost.
• Prospective students are more likely to engage with the course when they can effortlessly access pertinent information.
• Similar to testimonials and career prospects, a well-designed General Navigation section can highlight the course’s value and relevance. By showcasing user-friendly navigation menus, intuitive links, and organized content, this section reinforces the course’s credibility and assists prospective students in navigating their educational journey with confidence.

Here are some relevant examples for inspiration:

Tips and tricks:

• Ensure that the general navigation section is prominently placed and easy to find within the page layout. Utilize intuitive menu labels and navigation elements to guide users to relevant sections of the course page.
• The general navigation section should be optimised for responsiveness, adapting seamlessly to different screen sizes and devices. Test the layout on various devices to ensure that all navigation options remain accessible and user-friendly.
• Provide feedback mechanisms such as hover effects or color changes to indicate interactive elements within the navigation section. Feedback mechanisms help users understand how to interact with the navigation elements and improve overall usability.

Entry requirements

This section directs prospective students through the prerequisites and criteria necessary for enrollment. Here, users discover essential information about admission criteria, academic prerequisites, standardised test scores, and any additional requirements.

• By providing clear and transparent guidance, this section ensures that users can navigate the application process confidently without encountering unexpected obstacles.
• Prospective students are more likely to engage with the course when they have easy access to pertinent information about its entry requirements.
• A well-designed Entry Requirements section can underscore the course’s value and relevance.

Here are some design examples:

Tips and tricks:

• Organise the entry requirements logically, grouping similar criteria together. This helps prospective students quickly locate the information they need and understand the full scope of requirements.
• Use plain language and avoid jargon or overly technical terms that may be unfamiliar to prospective students. Make sure the requirements are understandable to a wide audience, including international applicants.
• Use legible fonts, appropriate font sizes, and sufficient spacing to enhance readability. Ensure that the text is visually distinct from other content on the page to draw attention to the entry requirements.

Text description

This section acts as an informational panel for prospective students by providing key details about the course. We have concluded that the text description section is quite common throughout these websites — which goes to show how important it is.

• Users can discover crucial information about the course, its structure, the curriculum specifics, faculty profiles and supplementary resources.
• Prospective students are more likely to engage with a course when they are presented with the relevant information effortlessly.
• A well-crafted text description section can underscore the course’s values and relevance. By presenting user-friendly, insightful descriptions and well-organised content, this segment reinforces the course’s credibility.

Below is a design example:

Here are some tips & tricks:

• The text mustn’t be too long and winded as readers’ might lose their attention and dismiss the rest of the text.
• While in the above example the grey diagonal background creates certain difficulties in reading the text, it’s safe to say that this is to be taken into consideration. Lisibility is key when it comes to this section.
• Moreover, the formatting of this text section should be well-crafted, so as to allow for easier reading.

Fees and funding

This section provides essential information about the financial aspects of enrolling in the course. It typically outlines the tuition fees, additional costs, and available funding options such as scholarships, grants, and financial aid programs.

• Prospective students rely on this section to understand the financial investment required to pursue the course and to explore opportunities for financial assistance. By offering transparent and comprehensive information about fees and funding options, this section empowers students to make informed decisions about their educational journey

Here are some examples:

Keep these tips in mind:

• The section should provide clear information quickly, without any hiccups or distractions. Students are interested in what they have to pay and want to see it as soon as possible without getting sent through menus.
• Use visual hierarchy to emphasize important information such as tuition fees, scholarships, and financial aid options. Use larger fonts, bold text, or color contrast to draw attention to these details.
• Maintain consistency with the university’s branding guidelines in terms of colors, fonts, and design elements. This reinforces the professional image of the university and ensures a cohesive user experience.
• Use whitespace effectively to create breathing room between elements and improve readability. Avoid overcrowding the section with too much information or visual clutter.

Key facts

This section serves as a concise repository of essential information, providing prospective students with quick access to crucial details about the course. From summarised entry requirements and program duration to accreditation and key statistics, this section offers a snapshot of the course’s most pertinent details.

• The “Key Facts” section offers a convenient summary of important details about the course, allowing prospective students to grasp essential information at a glance.
• With concise and organized information, the “Key Facts” section simplifies the process of accessing crucial details, saving prospective students time and effort in their research process.

Discover professional UX design.

Here are some design examples:

Tips & Tricks:

• Present key facts in a clear and concise manner, using bullet points or short sentences to convey information efficiently.
• Use visual hierarchy to emphasize important details such as program duration, accreditation status, and key statistics. Utilise bold text, color contrast, or icons to make key facts stand out.
• Regularly review and update the key facts section to ensure that it reflects the most current information and statistics. This helps prospective students make informed decisions about their course selection based on up-to-date information.

Features and benefits

This section provides an insightful exploration into the unique attributes and advantages of the course, offering prospective students a deeper understanding of what sets it apart. Here, users can uncover the distinctive features, practical advantages, and potential opportunities associated with enrolling in the course

• By showcasing the distinctive features and benefits of the course, this section captures the attention of prospective students and piques their interest. It effectively communicates what makes the course stand out from others, encouraging further exploration.
• The section provides valuable insights into how the course can meet the specific needs, interests, and career aspirations of prospective students. By addressing these factors, it resonates with individuals seeking a course that aligns with their goals, increasing engagement.

Here are some design examples:

These examples are better because they are easier to digest, but the gimmicky style makes them less credible.

These examples are interesting but the texts are generic and the pages don’t make use of the clear visual style.

With better copy, the section would have been very strong.

Tips & Tricks:

• Use hierarchy to prioritise important information. Make key features and benefits more prominent by using larger fonts, bold text, or color contrast.
• Organise information using bullet points or lists to make it easy to scan and digest. This format helps users quickly identify the most relevant features and benefits.
• Use whitespace effectively to create separation between different features and benefits. Adequate spacing helps prevent information overload and improves readability.

Accreditations awards etc.

This section serves as a testament to the quality and credibility of the education offered, providing assurance to students and stakeholders alike by showcasing esteemed recognitions and achievements earned by the course or university.

• Displaying accreditations and awards in this section validates the quality and credibility of the course or university. It assures prospective students that the institution meets recognised standards of excellence.
• By showcasing prestigious accreditations and awards, this section builds trust and confidence among prospective students, demonstrating the institution’s commitment to providing high-quality education and services.
• By prominently featuring accreditations and awards, the institution showcases its dedication to excellence and continuous improvement.

Here are some examples:

Tips and tricks:

• Display accreditations and awards prominently in a visually appealing manner. Use clear headings, icons, or badges to highlight each accreditation or award.
• Provide brief descriptions or explanations for each accreditation or award to give users context and understanding of its importance. Use concise language to convey key points.
• Include links to external sources or dedicated pages where users can learn more about each accreditation or award. This gives users the option to explore further if they are interested in learning more.

Video Section

This section can serve many different purposes but overall it is meant to boost engagement. Prospective students can delve deeper into the course experience, gain valuable insights into the learning environment, or can simply relate to the student pictured in the video (as some course pages take this approach). In essence, the video section is a blank canvas which can be customised depending on the university’s needs.

• Videos offer a visually engaging way to showcase course content, campus facilities, student experiences or other information.
• These forms of media create a sense of personal connection (depending on the content).
• As a result of boosting engagement, the videos tend to also help people retain information better.

Here are some examples:

Keep in mind!

• Integrating more videos within the page and even adding subtitles could be a great choice for boosting engagement and user interest in the course.

Here are a couple of tips and tricks:

• Use autoplay sparingly to avoid overwhelming users. A clear play button should be provided for user-initiatied playback.
• Provide intuitive navigation controls such as play, pause, volume, and full-screen mode for a seamless viewing experience.
• Optimise video file sizes and loading times to prevent user frustration. Use efficient video hosting platforms and compression techniques.

Tutors overview

The purpose of this section is to make the program more personal, human and relatable. It also offers an opportunity for prospective students to explore the diverse backgrounds, qualifications, and passions of each tutor, contributing to the shaping of the educational journey of students.

• It provides insight into the tutors’ teaching philosophies and areas of specialisation, helping prospective students understand how they will be supported and guided throughout their educational journey.
• It sets the course apart by showcasing the quality and caliber of the tutors, demonstrating the institution’s commitment to providing a high-quality education.

Here are some design examples:

Keep in mind:

• Images of real people are favoured. They help users relate more to the course.
• Craft concise and engaging tutor profiles that highlight key qualifications, expertise, and teaching philosophies.
• Include a clear call-to-action prompting users to learn more about individual tutors or contact the admissions office for additional information.

Assessment and Teaching

This section serves as a comprehensive resource for prospective students to understand the methods and strategies used for evaluating student progress and delivering instruction within the course

• It helps prospective students gauge how they will be assessed throughout their studies and gain insight into the teaching style and learning environment of the course.
• It provides transparency about the educational approach employed by the institution.

As always, here are some design examples:

Here’s a quick tip!

• The section on the left is elegant and clear. This could be taken as a great example.
• The section on the right is too complicated and could cause confusion among users.

More tips and tricks:

• Organise information into clear sections for assessment methods and teaching approaches to enhance readability and comprehension.
• Incorporate visual aids such as diagrams or infographics to illustrate complex assessment processes or teaching methodologies effectively.
• Provide concise descriptions of assessment methods and teaching strategies to convey key information efficiently.

Meet us

This section typically serves as a platform for introducing key faculty members, staff, or administrators involved in the course or program.

• It aims to provide prospective students with insights into the individuals who will be guiding and supporting their academic journey.
• This section may include brief biographies, photos, contact information, and links to faculty profiles or personal websites
• Overall, the section helps to humanize the educational experience, foster connections, and build trust.

Here are some design examples:

Note: The CTA is quite weak here (because it is vague).

Tips and tricks:

• Maintain consistency in formatting and layout across all profiles to create a cohesive and organized appearance.
• Use professional and engaging headshots of faculty members to create a welcoming and personable atmosphere (if the sections involves people).
• Provide a prominent CTA button or link that directs users, encouraging them to take the next step towards enrollment or learning more about the university.

Alumni

The alumni section gives a partial answer to the important question of what happens after graduating. Due to this, we highly recommend including it.

• Alumni serve as living testimonials of the course’s effectiveness in preparing students for their careers.
• Alumni success stories inspire current students by showcasing the diverse career paths and accomplishments achieved by graduates.
• By gathering insights from graduates about their educational experiences and career outcomes, universities can identify areas for enhancement and better tailor their offerings to meet the needs of current and future students.
• It instills a sense of trust and professionalism, helping prospective users make the decision based on actual proof.

Here are some design examples:

Note: While this example is okay, it is quite weak because it presents a few notable alumni (that are semi-famous).

• A better way is to showcase alumnis that are not famous (but who do interesting things after graduation). These are more relatable people, closer to the aspirations of the younger generation.

Tips and tricks:

• Feature alumni success stories or testimonials that highlight individual achievements and career journeys.
• Incorporate visually appealing elements such as alumni photos, graduation ceremony snapshots, or images of alumni in their professional settings to draw attention and create interest.
• Implement interactive elements such as clickable profiles or filters to allow users to explore alumni based on criteria like graduation year, industry, or job title.

“Want to know more” section

This section serves as a direct invitation for prospective students to inquire further about the course, program, or university. It can provide access and quick navigation to all types of information. Each website can decide what information is relevant to their prospective students.

• The section can serve as a catalyst for converting interested prospects into applicants by providing them with the information and support they need to take the next steps towards enrollment.
• By actively encouraging interaction and communication, the section fosters engagement between prospective students and the university, building rapport and establishing a positive impression.
• It provides a convenient and accessible avenue for prospective students to seek information or assistance, regardless of their location or time zone.

Here are a few examples:

Tips and tricks:

• Provide concise and easy-to-find contact details for the admissions office, department, or relevant personnel, including email addresses, phone numbers, and office hours.
• Use a prominent and action-oriented CTA button or link that clearly prompts visitors to reach out for more information.

Research

This section typically showcases the ongoing research activities, projects, and initiatives within the department or faculty associated with the course.

• The section demonstrates the faculty members’ expertise and research interests, showcasing their contributions to the respective fields.
• It engages prospective students by providing insights into the cutting-edge research being conducted within the department, fostering excitement and interest in the course.
• Prospective students can learn about research opportunities, facilities, and resources available within the department, helping them make informed decisions about their academic pursuits.

Here are some design examples:

Tips and tricks:

• Bring in more factual and specific content in order to make the section actually informative. This will boost engagement.
• Use shorter titles and CTAs (if they are too long, they are difficult to read and this is a no-go).
• Mention statistics and students — this will make the section and the information presented within more relatable to the prospective users.

Student work

This section is a great way of demonstrating substance through showing students’ work. This can come in the form of pictures, separate pages or even social media links to an Instagram account dedicated to this content.

• It provides prospective students with tangible examples of projects, assignments, or creative works completed by current students, demonstrating the quality of education and the skills students develop.
• Viewing exemplary student work can inspire prospective students, providing them with ideas and motivation for their own academic and creative endeavors.
• Providing access to student work promotes transparency and openness, demonstrating the institution’s commitment to showcasing student achievements and fostering a culture of accountability.

Here are some design examples:

While this section is more common for creative fields, you could generate content for more abstract disciplines too.

• The point is to show that students generate content, they don’t just take it in.
• This aspect should become more and more important as the popularity of online learning increases.

Tips and tricks:

• Include a call-to-action prompting visitors to explore more student work, learn about related courses or programs, or contact admissions for further information.
• Use high-quality images, videos, or interactive media to showcase student projects and assignments in an engaging and visually appealing manner.
• Organise student work into categories or themes to make it easy for visitors to navigate and find examples relevant to their interests.

Life as a student

This section might not be as common as others but it brings a lot of value to a course page. There are various ways of communicating “life as a student” but the best way to do it is to use imagery.

• Highlighting student life activities, events, clubs, and organizations fosters a sense of belonging and community among prospective students, reassuring them that they will find like-minded peers and opportunities for personal growth and social engagement.
• This section provides authentic glimpses into the daily lives of students, helping prospective students understand what to expect in terms of campus culture.

Here are some examples:

Tips and tricks:

• Use imagery which is expressive of the course, not just uni life in general.
• A boring text is the worst way of going about designing this section. Steer clear of verbose, long texts.

Facilities

This section brings a lot of value to a course page. We recommend showcasing the university facilities whenever possible.

• They give substance to any other claims on the page and demonstrate your commitment to the subject area.

Here are some examples:

Note: Using small images reduces the persuasiveness of this section.

Also, using no images makes the section futile.

Tips and tricks:

• Offer virtual tours or 360-degree panoramic views of campus facilities if possible. This allows prospective students to explore the campus environment from the comfort of their own homes.
• Utilise high-quality images or videos to visually showcase the facilities available to students, including classrooms, laboratories, libraries, study areas, recreational spaces, and specialised equipment.
• The design does not have to be complicated. Quality over quantity.

Discover more professional design.

Statement

This type of section helps break up text heavy pages while also providing a breather for users. It can be used to display many types of statements.

• It helps decrease cognitive load from content-heavy pages. This makes the overall experience much better for the users.
• However, it also gets a particular point across that could have been lost in all the text.

Here are some examples:

Tips and tricks:

• We highly recommend developing the UI pattern in one or two places in each course page.
• Make sure the text is highlights something that differentiates the course from its competitors.

Exchange Opportunities

This provides authentic glimpses into the daily lives of students, helping prospective students understand what to expect in terms of campus culture.

• It encourages students to explore opportunities for international experiences, fostering a global mindset and cross-cultural understanding.
• It introduces students to the possibility of studying at partner universities abroad, allowing them to access courses, research opportunities.

Here are some examples:

Tips and tricks:

• This section should paint a picture of abundance by showing the number of exchange partners, the number of cities and countries, for example.
• This section is an opportunity to use appealing and emotional content. Use either videos or pictures of students traveling.

Is it for you?

This section is interesting because it caters to the very top of the funnel, more specifically, people who have not yet decided what to study.

• This section might help prospective students make a decision regarding the course.

Here are some examples:

Tips and tricks:

• Think more about the intended use of this section before implementing it.
• While targeting the top of the funnel is indeed a great idea, you would probably need much more content to make this part actually useful to students.
• “Is X right for you” should be kept as a separate page that targets the top of the funnel — with dedicated content that drives traffic to the course pages (not the other way around).

Infograph or super simplification

This section serves as a visual tool to convey key information, statistics, or concepts related to the course in a clear, concise, and engaging manner.

• Infographics provide a visually appealing way to present complex information, making it easier for prospective students to understand and retain important details about the course curriculum, learning outcomes, or program highlights.
• By using visual elements such as charts, graphs, icons, and illustrations, infographics help break down complex concepts or data into easily digestible chunks, facilitating comprehension and retention among visitors to the course page.
• Infographics are inherently engaging and can attract visitors’ attention, encouraging them to explore the course page further and learn more about the offerings and benefits of the course.

Here are some examples:

Tips and tricks:

• Do not include more than 2–3 of such elements.
• Creating an entire section only with these charts is not appealing.
• If you keep a simple and minimalistic design, it will break up the sections with long text and make the page more appealing.

Personalisation

This section offers the ability to customise the content seen on the course page. This works in a couple of ways:

• Depending on IP, if you are visiting the course page from abroad you get an option to be directed to a page made for foreign students.
• There might be a toggle added to the top of the page, directing the user to another version of the page.
• Another variant could be provided by including a toggle that does not take you to a new page but simply changes the content in one section.
• The section and these features are useful if you target international students.

Tips and tricks:

• Provide a clear call-to-action for visitors to update their country or region if they prefer to view content for a different location. This ensures transparency and empowers users to control their browsing experience.
• Ensure that the course page is optimized for mobile devices and tablets, with responsive design elements that adapt seamlessly to different screen sizes and resolutions.

Check out some more of our recent research & benchmarking articles here:

Chemical Manufacturers Websites Best Design Practices
Industrial Machinery Manufacturers Websites Best Design Practices
Medical Device Manufacturer Websites Best Design Practices