New Design for Course pages

In October 2015 the web team commenced a redesign of the course pages in the Study section of the website. The feedback from staff and students was that although the website overall had come on leaps and bounds over the last year there was still much we could do to improve the pages which are so crucial in showcasing our portfolio of programmes and making a compelling proposition to prospective students.

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

So our first objective was clear –  improve the various issues around navigation and how people interact with the elements on a course page.

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

On the subject of content, it’s a tricky balancing act. We want people to engage with our content and hopefully find it interesting but this in itself isn’t enough. Visitors arrive on our website usually wishing to perform a very specific task or looking for a certain piece of information.  If they don’t find it with minimal effort then the chances are they will give up and move on – and in the case of the course pages, often they will go to a competitor’s website. It’s therefore vital that all the important elements which influence a person’s decision to come and study here are in place and easy to access.

Giving the page focus

We knew that the course pages in their current guise lacked focus. The most obvious example of this was the fact that the header at the top of the page referenced the word ‘Undergraduate’ rather than the course name.  So we refined the header, making this change and also moving the breadcrumbs further up the page.


More controversially perhaps, as the visitor scrolls down the page we decided to hide the university logo masthead and primary navigation. We don’t think this is as drastic as it sounds as it reappears when you scroll to the top of the page again and the analytics demonstrated that many of the links here such as Alumni, Research and Business were of little interest to prospective students.  Doing this only reinforced our view that good design is often about removing peripheral elements to focus on what really matters to the user.

Removing course search box

Like hiding the primary navigation this decision was one which was much discussed amongst the team. The course search now appears as a pop-up modal window. By doing this we could free up space for the rest of the content. Whilst you could argue that this forces the user to make an additional click to navigate to another course we came to the conclusion, through testing, that in terms of priorities it was secondary to other important elements on the page.

Removing the left column navigation

We saw from testing that rather than enhancing the user experience the left column navigation often diminished it. The links in this column were often duplicated elsewhere on the page or sometimes irrelevant (e.g. do we really need to show a link to the Postgraduate section when someone is browsing Undergraduate?). Removing the 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.

Navigating the content of the page

The content on course pages was currently divided up into sections which were hidden or displayed by clicking tabs. Our testers frequently complained that they were overlooking important areas of content because of this, particularly on mobile which accounts for 40% of the total traffic to these pages. The last statistic is a significant one as we’re sometimes guilty at looking at the university website from an overly desktop perspective. We took the decision to free the content and make each course one long scrollable page. Visitors can jump to specific sections using the prominent blue buttons which remain at the top of the page as it is scrolled.


Calls to action

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

Improvements to Country pages

We’ve 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 content has been tailored to meet the needs of the user – e.g. information about relevant student societies, availability of particular foods (e.g. halal foodstores, African/Caribbean grocers), provision of worship for different faiths, local communities, top courses taken by students from that country, relevant British Council links etc.

In addition to this we’ve also included:

  • Rich content added in the form of images – both of the campus and of relevant societies/activities – and also video containing student testimonials (generic on most pages, but specific where available).
  • Written student testimonials accompanied by photos of students where possible
  • Graduate testimonials and information about what our graduates have gone on to do career-wise
  • Easier to view entry requirements
  • Updated generic information – about our degrees, our rankings, about the city of Dundee etc, living costs

Making our courses shine

Courses now have the option to show large photos with accompanying text on a background colour as an overlay. These panels break up what can be text heavy pages and allow us to pull out the unique selling points of each course. The colours can be customised to match the photo’s palette – a small detail which makes the designer in me very happy!

Image and text panels

Testimonials play an important role in making a persuasive case to a prospective student and we’ve now added more of these to course and International pages. To emphasise the university’s diverse international community these often include a flag and a link to the appropriate country page where students can find out more about what the university offers students from their home location.


We’ve only just begun

There have been many other enhancements to these pages and the above is just a summary. So far we’ve had some very positive comments about the improvements and the team is immensely proud of the work done. We realise that this isn’t the end however and that we need to continue to refine the website as we gather more evidence about how visitors are using it. In this sense it’s not necessarily about the destination but the journey to get there!

Click here to view the Study pages

Danny Cassidy
Web Content Manager


Written by:

As Web Content Manager for the University, my role is to improve our website through better planning, creation, delivery, and governance of content.

  • Show Comments and Reply Form

    Leave a Reply

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>