Somerset Partnership - Training Videos Management System

This was the only project that Somerset Partnership NHS Trust had planned for me when I took a 4 week internship with them in the summer of 2014. The project from start to finish took me 2 weeks, forcing my supervisor to task me with the additional projects of a map of sites and a visualization of their digital assets.

Screenshot of NHS Somerset Partnership's Training Videos Management System
Somerset Partnership NHS Trust - Training Videos Management System

The Brief

My task was to produce a content management system for the explicit storage, viewing and curation of videos that the training department used.

It had to work on desktops and the iPads that Somerset Partnership had newly rolled out. It also had to work sufficiently well for viewing on desktop computers that used Internet Explorer 6 for a browser, whereas those curating the content would use mordern browsers.

In addition it was noted that the system would have to cope with low bandwidth connections between the locations in Somerset Partnerships purview.

Optional desired features of the system included, notes on who the video was intended for, links to supporting resources if applicable per video and a method of searching the list of videos.

The Design

The final design that can be seen above, followed the all brand guidelines for Somerset Partnership NHS Trust except the font, since the font could not be licenced as a webfont, so a best approximation was used.

The design was responsive down to a width of 240px and above 1920px scaled proportionately. The minimum width for the design was far less than would be required, unless people start using the system on watches.

In terms of the video thumbnails, I took inspiration from YouTube with the duration in the bottom right of the thumbnail along with title and description to the right of the thumbnail. I felt this was intuative and follows user expectations.

Coping with Low Bandwidth

In order to cope with the difficultties of low bandwidth, I decided on a distributed architecture. I achieved this by utilising a series of NAS boxes that ran Apache and MySQL servers upon them, which were being deployed accross the Somerset Partnership extranet at the time.

The MySQL database that contained the metadata and related resources was distributed by means of SQL replication; set up in such a way that it utilised the stronger connections between locations in preference to weaker connections. This was suitable since it would be rare that large amounts of records would be changed in any one transaction.

For the distribution of the media assets, these would be uploaded to any single location and rsync through the same preferred connections as the SQL replication during off-peak hours. This solution was deemed suitable since the network was such that most upload locations would have deployed the media assets to all other locations within one night, and the outliers would take at most three nights; provided there is not too large a payload.

This did cause a slight problem since the database entires for a newly uploaded video would be deployed far sooner than the media assets. To combat this I made it such that the user interface did not display any videos that were in such state by checking for the existance of the media files.

Accessibility Concerns

Considerations of accessibility were completely ommitted in my brief. Yet from the beginning I made sure to marup the application in all ARIA attributes and roles.

I added a method by which WebVTT files could be uploaded along with the video files to serve as subtitles, closed-captions and/or chapters, relying on the user-agent to add a user-interface for interacting with the resources. Which at the time of developing the application, I saw no such interfaces among modern browsers.

I also wanted to add a togglable video overlay that would display sign-language, however with little support of HTML5 <video> and no notable example of this, I was unable to add such facility.

Optional Features

The optionally desired features in the brief were trivial by the time I was nearing the end of the project.


The only other notable feature that I added was a manual way of selecting a single frame from the video currently uploading to serve as the thumbnail and cover image for the video as part of the user-interface for the upload process. This utilised a HTML5 <canvas> with the video element as it's source, and decoding the base64 data-uri on the server to turn it into a file that could be served to older browsers.