Tim Thompson's Portfolio NHS Guidance

A workshop web application

I was tasked with building a website to host video based workshops, using the WordPress platform. Access should be restricted firstly by a user account provided by LPT's identity portal service, and secondarily by access codes that could be handed out by health practitioners.

Videos were produced by a third-party and hosted on Vimeo; I customised WordPress functionality and developed a theme for collating and embedding these into "topics", leveraging the WordPress CMS to allow content owners to add and edit topics.

The project was led by a product owner with whom I worked closely, and was supported by other developers on occasion for elements of back-end logic.

Optimising the experience

Initially the design pattern followed that of a typical blog-style responsive website. As usage of Guidance increased, I was keen to optimise the experience, both in terms of supporting what the user is trying to do, and adapting the UI for different device types. Examples of improvements:

• Creating an app-based UI. Instead of a traditional website layout, I proposed a design based on a mobile app UI. I refactored the layout with a fixed-position navbar, and used flexbox on the topic screen for assigning controls and scrollable panels to areas that block to the edge of the screen
• AJAX-based paging. Previously, a topic would show multiple chapters, each containing a video, repeated in a list down the page. This was replaced with a Javascript-driven approach, where only one chapter is shown at a time, and paging performed by AJAX. This allowed me to increase the canvas size of the video to full column width, and optimise layout of other elements for the viewing of a chapter
• Remembering user progress. Typically a user might view the videos over a number of sessions. The product owner requested that the app save user progress so their place could be restored on a return visit. Now that the UI could render chapters independently, I was able to store progress in the database and return the user to where they left off on a return visit

Other notables

The front-end code is based on Bootstrap SASS, which allowed me to make customisations to the house style prior to building the CSS. I aimed at building the theme using technologies familiar with other developers.

It soon became clear that the various clinicians needed statistics on how many people were using the service, and get some idea of feedback. On request of the product owner, I built a simple feedback UI (thumbs up/down) and a simple reporting plugin to allow viewing of statistics in the admin area.

Purpose in the pandemic

I was proud to be able to work on this project over the Covid-19 pandemic. It was something that could directly benefit NHS patients, and allowed me to make a meaningful contribution during this time.