Improving the User Experience on a University of Portsmouth Website page: A Case Study

In this blog post, I will share my experience of rebuilding a website page for the University of Portsmouth. 

I will outline my approach to fixing the page, including the challenges I faced, such as addressing technical changes and enhancing the user experience. I will detail how I split the content into accordion tabs and introduced in-page navigation to improve navigation, and how I addressed mobile navigation issues.

I must acknowledge that I did not have access to analytics data on how users interact with this page, so I relied on my knowledge of web user experience best practices and common sense to make design decisions, considering how they would use the page.

Page: Initial | Changed

Fixing a University Website Page After Migration

The University of Portsmouth recently underwent a change in Content Management System (CMS) from Sitecore to Drupal and as a result of the migration, some pages needed to be adjusted to the new set of limitations, and changes in the way content was presented were necessary.

Tackling the Technical Changes

The main issue on this page was that the tables within the accordion items were not migrated so they had to be readded.

However, there is now a limit of 2000 characters per accordion item, whereas previously there was none. The character count includes the HTML tags, which reduces the available space further, especially for these tables that had a lot of content.

As I added more content to the accordion tabs, I realized that I would need to split the initial content (three to four tables of information) into separate tabs.

The original website page was easy to navigate, but as I added more content to the accordion tabs, it became cluttered and difficult to navigate. 

To resolve this, I divided the content into separate tabs, each labelled with a clear description of its content and numbered as sections, improving the overall user experience and consistency on the page.

Getting Permission for My Plan

Before jumping to tackle the challenges, I came up with a plan to address the challenges and sought approval from a Web Content Development Officer. I explained my reasoning and was granted permission to proceed with my approach.

Improving User Experience with Multiple Accordions

So, I made the decision to split the content into multiple accordions with clear titles, in order to improve the user experience.

One of the challenges I faced was the fact that the length of the page increased significantly after splitting the content into multiple accordions. This caused the courses at the bottom of the page, to be pushed further down and way out of view for users.

Handling Incomplete Website Updates

The process of adding content was lengthy and inefficient because I did not have original content and the archived version of the page had unnecessary HTML elements that could negatively influence the performance of the new page. 

So, I had to leave before I could finish all the necessary updates.

To mitigate this, I added a message for potential website visitors until I could complete the work the next day. I labelled the pages with information about the status of the updates and suggested when they should return to check again. 

This I did to improve the user experience and prevent the university lose potential students.

Introducing In-Page Navigation

The following day, when I returned to the page, I faced the challenge of excessive content. To address this, I introduced in-page navigation using anchor links and anchors in the navigation menu of bullet points to visually help the viewer.

Mobile Navigation Issues

To make the content more compact on desktop devices, I employed two separate HTML <div> blocks. Unfortunately, this resulted in some unnecessary space between the blocks on mobile devices, leading to an unappealing presentation of the page. 

I assumed that users looking into the opportunity of studying abroad would mainly use desktop devices and the tables containing information would be easier to view and understand on a larger screen. As a result, I decided to leave the design unchanged.