UPSU.net: web design and development

The University of Portsmouth Students' Union has an extremely large web presence, based at www.upsu.net. The website must serve the needs of the university's 18,000+ students, from providing easily-accessible information about the union's support and advice services, to providing information on food and drink promotions, events and even photos from event nights. The vast majority of the site is based on a heavily modified Mambo installation; I made changes to security, registration, URL-handling, permissions and navigation code, to name but a few areas. I have outlined some of the larger projects I undertook on the site, below. Where my work was supported by other staff I have done my best to credit them. As you'd expect from an evolving organisation like Portsmouth Students'  Union, their website has undergone a major redesign since I was there, and many of the features mentioned here have moved or been discontinued. Shame :(

On this page...

  • Implementing a new CMS: Mambo
  • NUS registration system
  • Mass e-mail marketing
  • A better commenting system
  • RSS expansion
  • Blogging platform
  • Search engine URL optimisation
  • Metatagging
  • Google Analytics
  • Homepage redesign
  • A better events calendar system
  • Graduation Ball promo mini-sites
  • Creating our own Youtube branding
  • Auditing system
  • Use of Facebook as a communications platform
  • The organic groups and permissions system
  • Pugwash and Pugwash News (magazine and newspaper) online archives
  • News article creator tool
  • JobShop website project
  • Union Shop website project
  • Homepage hero tool
  • Elections mini-sites
  • Homepage refresh
  • Bullying Sucks minisite
  • Other minisites

CMS redesign

The design, creation and implementation of an extremely large student community website, moving from an ASP closed-source CMS to the open-source Mambo platform. I was tasked with identifying the client's (the Union's) needs, designing the interface, constructing and configuring the CMS, moving or creating the vast majority of the site's informational content to the new system, and ensuring the roll-out went smoothly.
.

NUS Registration system

Running consecutively to the UPSU.net CMS redesign project, the need was identified for an online registration system to allow students to sign up for an NUS card. I modified the existing Mambo registration system within UPSU.net, and created a number of web-based tools for use by customer service assistants (to issue cards) and back-office staff (to monitor card issue figures). The registration system was extensively overhauled the following year to provide a better user experience throughout the registration process, and a significant increase in conversions was noted as a result.
.

Mass e-mail marketing

The University of Portsmouth Students' Union's primary first point of online contact with its students is when they register for their union membership cards at the start of each year. By ensuring students could not collect their cards - which offered membership benefits including discounts - until they had validated their e-mail addresses, the union could be confident that it had direct marketing access to a significant proportion - usually around 60% of the 20,000 student population - of its students each year. This mailing list was used to communicate important messages about events, entertainments, student services and other important and time-sensitive promotional material to the student population. I ensured that this was always done within a strict set of highly visible privacy guidelines which specified students' rights, including the maximum frequency of messages (i.e. limiting messages to no more than one per fortnight, for example) to maintain customer confidence.
.

A better commenting system

Starting from the Akocomment Mambo extension, I developed a highly customisable commenting system with ease of use for non-technical and non-registered users in mind. An automatic expiry system was introduced to prevent commenting on news articles which hadn't been edited for more than a month, but the system was clever enough to allow comments on static web pages (where content is less time-constrained), as well as more effective and transparent anti-spam measures, and a solid enterprise-style moderation system which allowed the article or page's owner to moderate comments.
.

RSS expansion

This project extended the Mambo CMS's standard RSS feeds system, resulting in highly flexible XML feeds for any or all news streams, comments, blog entries, forum posts, and events diary listings. This was a project which represented an overall commitment to providing UPSU.net's content, wherever possible, in a syndication-friendly format to encourage external use and improve search engine profiles. This project also included updating the website to provide links to RSS feeds in a contextually-sensitive manner.
.

Blogging platform

Using the Mamblog blogging application as a base, I installed, modified and implemented a basic, easy-to-use yet powerful blogging platform, open for use by all students using the UPSU.net website. Although the initial launch only took a matter of days, the project was ongoing as it received regular development, for example through the inclusion of tag clouds and better archive navigation.
.

Search Engine Friendly URLs engine

Extensive modification of the Mambo core code and the Mambo CMS MySQL database was needed to allow the introduction of a better "search engine-friendly" URLs system within UPSU.net, whilst still maintaining backwards compatibility, a critical requirement to prevent broken links in existing content. This project resulted in non-SEF links, e.g. upsu.net/index.php?foo=bar, to be presented as, for example, upsu.net/forums/2345.html, and also allowed the editor of "static" (i.e. non-news) web pages to set their own custom URL for a page, e.g. upsu.net/getinvolved/democracy. The SEF engine comes into its own in areas like news, where URLs show the geneaology of the article (e.g. a news article URL of upsu.net/news/union/get-involved/2008/07/02/central-point-clothi-3475.html not only includes a couple of Google-friendly headline words, but also the date of posting and the article’s section and category
.

Tags in news, webpages and blogs

Creation of a tag-cloud generation system to visually represent META data contained in news articles and web pages on UPSU.net, and to allow users to easily add META tags to their blog entries. This project also provided a global class which could be called to generate a tag cloud from any known data streams (at the end of development, this included news, web pages, blogs, forum posts, photo galleries, jobs and employers (in the Jobshop application). Examples here.
.

Google Analytics

Installation and effective use of the excellent Google Analytics package to monitor site traffic and use. This was an ongoing project to analyse and improve site use, resulting in a number of key changes to the site's design to improve navigation landmarks and a resultant increase in traffic and search engine position.
.

Homepage redesign

Creation, design and implementation of a fully CSS-based homepage, providing users with an easily-digested summary of the website's main dynamic content - news, blog entries, forum posts, etc - as well as allowing the promotion of key information from the Union, and facilitating quick access to the wide range of services on offer to students and staff. The redesign included a homepage which changed from a light to dark colour scheme depending on time of day, nine user-selectable colour schemes, and two high contrast (light on black, and dark on white) schemes for visually-impaired users, and those on mobile internet devices. Sadly this homepage is no more, and was deleted before I had a chance to take screenshots :(
.

Diary refresh, including iCalendar downloads and "coming up" widget

A comprehensive redesign of the events diary layout, and the implementation of iCalendar downloads to enable users to share and export event information. Project also included a large amount of bug-fixing in the events diary's presentation code to generate standards-compliant XHTML wherever possible.
.

Grad Ball minisite

A comprehensive project to create a mini-site which encouraged exploration and sharing of user-generated content from the Graduation Ball 2007, by integrating content from UGC websites such as Flickr and Facebook into an attractive and informative collection of web pages. I worked with the Union's communications manager to develop an appropriate set of branding appropriate to the Union's and the event's marketing styles, and the site received a consistently high level of traffic both in the run-up to the event, and following the event as graduating students returned to find the photos and comments from the event. This project marked a positive turning point in the Union's approach to disseminating information, with plenty of facts and figures about the event being released in a friendly, conversational tone to potential customers well in advance of the event.
.

Youtube design

A small project to present the Union's video media on the Youtube website, promote use of Youtube video embedded within UPSU.net content, and education of contributors as to the benefits of using Youtube to broadcast to a wider, previously untapped user base.
.

Site events auditing system

This is an events log which functions both as a security log and potentially as a Facebook-style “news feed”, should the website’s future developers choose to develop the site into a more interactive social networking platform. The audit system provides a global function for developers to record events, and a key feature of this system is the provision of a web interface which allows the addition of new event categories and sub-categories, presenting a highly extensible logging system
.

The Union's Facebook Fan Page

A small project to develop the Union's presence on the popular social networking site, moving from the use of a Facebook group to the considerably more flexible Facebook fan page system, allowing us to take advantage of better photo galleries and video uploads, feedback mechanisms including discussion forums, and the integration of RSS-based news from the Union into its Facebook presence in order to increase the student organisation's exposure to its target audience. You can find their page here.
.

Organic groups

A major project to develop a web-based groups system to allow the arbitrary grouping of members of the UPSU.net website. A group can be stand-alone, i.e. simply a group of people (with a web presence, group image for branding, and an e-mail mechanism to allow members to be contacted and to contact the group owner/s), or can be used by developers of the UPSU.net website to determine access controls. The project provided a global class of functions to enable developers to interact with the groups database, and was designed from the ground up with security and privacy in mind. The groups system was later used to control access to various sensitive areas of the site, including management of the online shop, NUS registration system, and was also embedded into the static web pages system to allow the restriction of access to selected web pages to members of groups, for example to provide confidential documentation resources.
.

Pugwash and Pugwash News online archives

Portsmouth Students’ Union’s student magazine - Pugwash - has a long and very visually-attractive history, but very little of this history had ever been digitised. I spent a lot of time throughout the 2007/2008 year locating and producing PDFs of old issues of the magazine, as well as ensuring the latest issues of the new student newspaper Pugwash News, and uploading them to the Union's website. 
.

News wizard

A small web application to provide a wizard-based system with non-technical users in mind to allow the fast creation of META data-rich news articles consistent with the UPSU.net news presentation standards. The user (the "contributor") is asked to enter information about the article being created in a short series of clearly-worded screens, and a news article is created and inserted into the Mambo "new news article" page. This tool was largely responsible for the significant increase in timely news content published on UPSU.net during 2007/2008, as non-technical student journalists could use the Mambo CMS with minimal training to produce consistently-presented articles.
.

JobShop

Written from the ground-up in PHP, this is a tagging-orientated part-time jobs listing website, designed with search engine optimisation in mind. The focus here was on creating a highly accessible, easily-managed and visually light-weight website for the Union’s JobShop service to publish its jobs online. Average monthly traffic to the /jobshop homepage exceeds 6,000 visitors a month during term-time, and is by far the most-used area of the UPSU.net website.
.

The Union Shop

A heavily-tweaked implementation of the Virtuemart open-source shop system, operating within Mambo, the key challenges of this project were the creation of a visually-appealing template and resolving a number of usability issues in the original Virtuemart installation, including ease of navigation. The other key requirement to integrate Google Checkout into the shop system has also proven to be a massive success, and was the Union’s first tentative foray into online sales.
.

Homepage hero management tool

A project to integrate the open source Smoothgallery image rotator into the main homepage promo ("hero") space on UPSU.net, and to build an easy-to-use web interface to allow the uploading and scheduling of promo images. The project also provided an RSS feed of promotional content, which was then used in the Union's Facebook fan page as a key visual landmark to advertise the Union's services.
.

Elections mini-site

This was a largely text-based project to refresh and digitise the reams of rules, regulations, information and guides published each year for candidates and those considering running for the students' union elections. A focus on presenting easy-to-digest content in plain English underpinned the project, as I worked closely with the communications manager to develop a visual style and online brand.
.

Homepage refresh

A small side-project to update the graphics and styling used on the UPSU.net homepage to refresh the image of the site. Although only a minor overall change, the effect of presenting a revised colour palette and tidying up some of the elements of the page gave the page a considerably "nicer" feel.
.

Bullying Sucks mini-site

A campaign website designed to provide a well-populated resource on tackling bullying, focused at students and academic staff alike. I worked closely with the Union's Student Support Officer to develop a design brief. A key point of the design brief was to create a branding-agnostic resource to encourage University staff to link to the resource instead of, or as well as, the University's own anti-bullying resources.
.

Various other mini-sites

A large number of mini-sites were created for various projects, all of which were built within the content management system, and the vast majority of which include their own design templates. As well as those already mentioned, these include RAG (raising and giving for charity), VIP (volunteering), sports clubs, societies, Social:Life, Get Involved, Student Life (support and advice), student democracy, student essentials, STAND (student training and development), Elections 2006, 2007 and 2008, an introducton to the Union’s “Sabbs”, and many more.
.