milestone-1-twptug-redesign

Tyne & Wear Public Transport Users Group website redesign

Introduction

I maintain the content of the above website which, though it does its job, is both dated and visually unappealing. It needs to be redeveloped, sooner rather than later, so I decided to do a first release of that as my project rather than the assignment brief based on a rock band. The site is huge, so no more than a prototype can be attempted. However, this fits in well with an agile approach, since I first need to convince the organisation of the need to re-develop it, so a partly-completed version that gives a general idea of how it could look is sufficient at this point in time.

Organisational Overview

Tyne & Wear Passenger Transport Users Group (TWPTUG) is voluntary community group that campaigns for the full integration of public transport in Tyne & Wear, such as rail, Metro, bus and ferry with private transport modes such as of walking, cycling and driving. TWPTUG believes such integration can only be achieved through local public ownership of public transport. TWPTUG covers the five boroughs of Tyne & Wear, namely Newcastle, Gateshead, North Tyneside, South Tyneside and Sunderland. Only Newcastle and North Tyneside are running at the moment. Gateshead and South Shields did start up but have since stopped due to various reasons like members moving out of the area, ill-health, and the distraction of other issues affecting the community like hospital closures. TWPTUG is run by a Management Committee, the members of which are elected by individuals within the local groups and partner organisations. TWPTUG’s members include individuals as well as a number of partner organisations such as cycling groups, pensioners’ groups, union community branches and other community transport groups from across the UK. TWPTUG also works closely with bus operating companies, local authorities and Nexus to influence general transport policy. Nexus is the Passenger Transport Executive for Tyne & Wear, which directly operates the Metro and the Shields Ferry on behalf of the five boroughs and secures some essential local bus services ran by the private bus operators.

Current website

The current website (www.twptug.org.uk) was created in 2010 using a website builder called Webeden. This tool is a somewhat dated product, has little documentation to support it, and has some time-consuming bugs to work around. It is awkward to use for both maintaining and developing the site. The TWPTUG site was not built with responsive design in mind. It may not have even been available then. There is now some support for displaying on a mobile but the results are far from perfect e.g. elements and components are too wide making it necessary to scroll from left to right on a narrow screen. This seems to have been done all automatically. It is not clear how the width can be reduced, or elements can be styled differently to the default. The TWPTUG site has a primitive blogging page that supports basic text and image formatting. It is not currently used but there is an intention to do some blogging activity in the future. TWPTUG have both a Facebook and Twitter account but connection to social media is only currently available via
the blog page, which appears to be built into the page already. The current logo (entitled “Action on Public Transport”) does not look particularly professional. It is also not clear from the website what “Action on Public Transport” is. It is, in fact, an alternative name later suggested for TWPTUG, because it was thought “Tyne & Wear Passenger Transport Users Group” was too long. However, the latter has stuck with many people, though they tend to abbreviate it to “PTUG”, so it’s not so easy to change it now. Putting both logos up is a bit of a fudge, so for the redesigned website, I will be dropping the “Action on Public Transport” logo so as to avoid visitor confusion over which organisation the site is supposed to represent. The content of the live site is quite dynamic as news articles, events, files and meeting notices are posted to it regularly, and old stuff is taken down. The website averages around 3000 hits per calendar month.

Website Purpose

Aims For This Release

As per the milestone project criteria, my aim is to initially prototype a responsive, front-end website. I want to give it a fresher, more appealing look while still retaining most of the existing features and adding some new ones. I particularly want to display more images and icons across the site. I think it is probably a good idea to create all the necessary menu buttons and associated pages but without adding content (other than standard content like menus and footers) to all the pages NOT included in this release. Instead, I will create them but display them as ‘Under construction’, with a Back button, if they are entered.

UX

Website Audience

This consists of public transport users, local group activists, Management Committee members, partner organisations, Media organisations, other UK community transport organisations, Nexus officials, and local councillors.

User Stories

User stories to be catered for in this release:

Layouts

The files shown below are stored in the _Project Documentation folder in the GitHub repository. The layout diagrams show both wide screen and mobile layouts. I drew out the Home page layout first, but I didn’t stick to it as it didn’t look right on the page. The later pages reflect the new design. Even then, I haven’t followed the later designs to the letter, but repositioned elements according to what looked right in practice. I did not design layouts for the Acknowledgement page as it consisted only of a simple banner message and a Return button. Similarly for the ‘Under construction’ pages, as these were cloned from the Acknowledgement page, though styled with a different background colour.

Features

Pages/modals implemented and styled:

Pages to be displayed as ‘Under Construction’:

Existing Features

Features Left to Implement

Technologies Used

Testing

Deployment

Credits

Content

Media

Code Snippets

Acknowledgements