Web Services

New design for course pages

In October 2015 the web team started a redesign of the course pages in Study section of the website. Feedback from staff and students was that whilst the website overall had come a long way over the last year there was still a lot we could do to improve the pages which are so crucial to showcasing our program portfolio and make a compelling proposition for prospective students.

Through user testing with groups of students it became apparent that users often found it difficult to access key information such as entry requirements or were overwhelmed or distracted by the sheer amount of options on the page.

So our first goal was clear: to improve various navigational issues and the way people interact with elements on a course page.

Secondly, and in regards to the course content itself, the feedback indicated that there was work to be done in terms of selling our courses to everyone who uses our website. To do this, we decided to implement advanced features for adding features such as student testimonials in text and video form and provide space for large photos with text overlays.

As far as content goes, it’s a tricky balance. We want people to engage with our content and hopefully find it interesting, but that by itself is not enough. Visitors come to our website usually wanting to perform a very specific task or looking for certain information. If they don’t find it with the slightest effort, they are likely to give up and move on, and in the case of course pages, often visit a competitor’s website. It is therefore crucial that all the important elements that influence a person’s decision to come and study here are present and easily accessible.

Focus the page

We knew that the course pages in their current guise lacked focus. The most obvious example of this was that the header at the top of the page referenced the word « Degree » instead of the course name. So we refined the header, making this change and moving the breadcrumbs further up the page as well.

heading

Perhaps most controversially, as the visitor scrolls down the page, we decided to hide the university logo masthead and main navigation. We don’t think this is as drastic as it sounds as it reappears when you scroll back to the top of the page and analysis has shown that many of the links here such as Alumni, Research and Business were of little interest to prospective students. This only strengthened our view that good design often consists of removing peripheral elements to focus on what really matters to the user.

Removed course search box

How to hide the main navigation, this decision was much discussed within the team. Course search now appears as a pop-up modal. This way we could free up space for the rest of the content. While it could be argued that this forces the user to take an extra click to jump to another course, we came to the conclusion through testing that it was secondary in priority to other important elements of the page.

Left column navigation removed

We’ve seen from testing that instead of improving the user experience, navigating to the left column often detracted from it. The links in this column were often duplicated elsewhere on the page or sometimes irrelevant (for example, do we really need to show a link to the Postgraduate section when someone is browsing Undergraduate?). Removing left column navigation on course pages had an obvious benefit in that it allowed the content to span the full width of the available space, giving the page the desired focus and freeing up space for richer content.

Navigation in page content

The content of the course pages was currently divided into sections which were hidden or displayed by clicking on the tabs. Our testers have often complained that they overlook important areas of content for this reason, particularly on mobile devices which account for 40% of the total traffic to these pages. The last statistic is significant as we are sometimes guilty of looking at the university website from an overly desktop perspective. We made the decision to free up the content and make each course one long scrolling page. Visitors can jump to specific sections using the prominent blue buttons that stay at the top of the page as they scroll.

nav-section

Calls to action

There are now very clear calls to action on every page anchored at the top so always accessible. On Undergraduate we have a ‘Register for an Open Day’ button and on Postgraduate there is ‘Register for more information’. At the bottom of the page are additional Open Day/Individual Visit/International links, as well as links to key sections of Student Life.

Country page improvements

We have also used this opportunity to provide much more meaningful and useful pages for prospective international students in the ‘Your country‘ pages. After consulting with the international recruitment team and student societies, the cThe content has been adapted to suit the user’s needs – e.g. information on relevant student societies, availability of particular foods (e.g. halal food stores, African/Caribbean grocery stores), worship offerings for different faiths, local communities, courses high level followed by students from that country, relevant British Council connections, etc.

In addition to this we have also included:

  • Rich content added in the form of images – both of the campus and relevant companies/activities – as well as videos containing student testimonials (generic on most pages, but specific where available).
  • Written testimonials from students accompanied, where possible, by photos of students
  • Graduate testimonials and information on what our graduates have gone on to do career-wise
  • Easier to view entry requirements
  • Up-to-date background information – about our diplomas, rankings, Dundee city etc, cost of living

Make our courses shine

Courses now have the ability to display large photos with accompanying text on a background color as an overlay. These panels break up what can be text-heavy pages and allow us to extract the unique strengths of each course. The colors can be customized to match the palette in the photo – a little detail that makes the designer in me very happy!

Image and text panels

Testimonials play an important role in building a persuasive case for a prospective student and we have now added more to the Course and International pages. To emphasize the university’s diverse international community, these often include a flag and link to the appropriate country page where students can find out more about what the university offers students from their location.

Testimonials

We’ve only just begun

There have been many other improvements to these pages and the above is a summary only. We have received very positive feedback on the improvements so far and the team is immensely proud of the work they have done. We realize that this is not the end, however, and that we need to continue to refine the website as we gather more evidence about how visitors use it. In this sense it is not necessarily about the destination but about the journey to get there!

Click here to view the study pages

Danny Cassidy
Web content manager